/* Polices auto-hébergées (v1.9.6). Elles venaient de fonts.googleapis.com : chaque chargement de
   page envoyait alors l'adresse IP du joueur à Google. Sous-ensemble latin, licence SIL OFL 1.1.
   Alegreya Sans (Juan Pablo del Peral), Cinzel (Natanael Gama), Grenze (Omnibus-Type),
   IBM Plex Mono (IBM / Mike Abbink, Bold Monday). */
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/alegreya-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/alegreya-sans-700.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/alegreya-sans-800.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/cinzel-500.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/cinzel-700.woff2) format('woff2'); }
@font-face { font-family: 'Grenze'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/grenze-600.woff2) format('woff2'); }
@font-face { font-family: 'Grenze'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/grenze-700.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-500.woff2) format('woff2'); }

/* Fields of Fire - table de guerre : cuir sombre autour, parchemin pour la carte et les cartes. Thème unique assumé. */
[hidden] { display: none !important; }
:root {
  --ink: #141416; --table: #1b1a1d; --panel: #232228; --panel-2: #2c2b31; --line: #3b3a42;
  --bone: #ece3cb; --bone-dim: #b9ad90; --muted: #8b8577;
  --gold: #d9b45f; --gold-hi: #f1d488; --gold-deep: #9c7a2c;
  --parch: #efe5cb; --parch-2: #e6d8b5; --parch-ink: #2a2218; --parch-line: #b9a57a;
  --star-gold: #d8a51c; --star-red: #c7342b; --star-blue: #3d6fcf; --arrow: #4aa43d;
  --danger: #d0574b;
  --f-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-card: 'Grenze', 'Cinzel', Georgia, serif;
  --f-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --f-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #151417; color: var(--bone); font-family: var(--f-body); font-size: 17px; line-height: 1.4; }
button { font-family: inherit; font-size: 16px; cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
img { max-width: 100%; }

/* boutons */
.btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--bone); border-radius: 8px; padding: 7px 12px; transition: background .15s, border-color .15s; }
.btn:hover:not(:disabled) { border-color: var(--gold-deep); background: #36353c; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#2a4f86, #16294c); color: var(--gold-hi); border: 1px solid var(--gold); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#35619f, #1c3460); border-color: var(--gold-hi); color: #fff3cd; }
.btn.danger { border-color: #7a3a33; color: #f3bcb2; }
.btn.small { padding: 4px 9px; font-size: 15px; }
/* tout ce qui coûte de l'or est doré ; le reste est bleu et or (ou rouge et or pour l'assaut) */
.btn.gold { background: linear-gradient(#e6c776, #b88f37); color: #21190b; border-color: #efd188; font-weight: 800; }
.btn.gold:hover:not(:disabled) { background: linear-gradient(#f0d58c, #c89d45); border-color: #fff0bd; }
.btn.ghost { background: transparent; }

/* ---------- éléments « cartes à jouer » ---------- */
.star { --sc: var(--star-gold); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--sc); color: #fff; font-family: var(--f-card); font-weight: 700; font-size: 19.5px; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  clip-path: polygon(50% 0, 63% 17%, 85% 15%, 83% 37%, 100% 50%, 83% 63%, 85% 85%, 63% 83%, 50% 100%, 37% 83%, 15% 85%, 17% 63%, 0 50%, 17% 37%, 15% 15%, 37% 17%); flex: none; }
.star.hi { --sc: var(--star-red); } .star.lo { --sc: var(--star-blue); } .star.gold { color: #3a2a05; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* v1.9.25 - puissance des unités : bleu (0), jaune au milieu (3), rouge (6) (créateur, 24/10/2026) */
.star.v0 { --sc: #2f62d8; } .star.v1 { --sc: #1f93b0; } .star.v2 { --sc: #5aa63a; } .star.v3 { --sc: #e6bb17; color: #3a2a05; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.star.v4 { --sc: #e88a1c; } .star.v5 { --sc: #e05a1f; } .star.v6 { --sc: #d62a2a; }
.arrow { display: inline-flex; align-items: center; justify-content: center; background: var(--arrow); color: #fff; font-weight: 800; font-size: 16px; height: 24px; min-width: 34px; padding: 0 12px 0 7px; clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%, 18% 50%); flex: none; }
.coins { display: inline-flex; gap: 2px; } .coins i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffc84a, #f09a0d); border: 1px solid #c77d06; display: inline-block; }
.coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd35c, #ee950b); border: 1px solid #b97308; display: inline-block; flex: none; }
.ribbon { font-family: var(--f-card); font-weight: 700; color: var(--parch-ink); background: #f3ead2; border: 2px solid var(--parch-ink); border-radius: 4px; padding: 1px 10px; text-align: center; position: relative; }
.parch { background: radial-gradient(ellipse at 30% 20%, #f4ebd3 0%, #e9dcbb 60%, #dfcfa7 100%); color: var(--parch-ink); }

/* carte d'unité */
.ucard { width: 100%; border-radius: 10px; border: 4px solid #d4b04f; padding: 6px 7px 7px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 10px 22px -12px #000; position: relative; }
.ucard.elite { border-color: #b8463c; }
.ucard .uh { display: flex; align-items: center; gap: 6px; }
.ucard .uh .ribbon { flex: 1; font-size: 15.5px; line-height: 1.15; padding: 2px 6px; }
.ucard .art { width: 100%; aspect-ratio: 400 / 244; object-fit: cover; border-radius: 3px; display: block; background: #2a2622; }
.ucard .art.none { display: flex; align-items: center; justify-content: center; background: #1f1e22; }
.ucard .art.none img { width: 46%; opacity: .8; }
.biomes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.biomes div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.biomes img { height: 22px; width: 36px; object-fit: contain; }
.biomes .star { width: 26px; height: 26px; font-size: 16px; }
.ucard .txt { font-size: 14.5px; line-height: 1.25; min-height: 58px; }
.ucard .ft { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--parch-line); padding-top: 4px; font-family: var(--f-card); font-size: 14px; }
.ucard .ft small { display: block; font-size: 12.5px; color: #6b5c40; }
.cond { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 17px; }
.cond img { height: 22px; }
.ucard .acts { display: flex; gap: 5px; }
.ucard .acts .btn { flex: 1; padding: 5px 6px; font-size: 14.5px; background: #2b241a; color: #f4e9cf; border-color: #2b241a; }
.ucard .acts .btn.buy { background: linear-gradient(#e6c776, #b88f37); color: #21190b; border-color: #b88f37; font-weight: 800; }
.ucard .why { font-size: 13px; color: #8a3a2c; min-height: 1.2em; line-height: 1.2; }

/* fiche de dirigeant (inspirée des plateaux) */
.hero { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid #b59e6d; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 10px 20px -12px #000; text-align: left; }
.hero .portrait { width: 96px; height: 102px; object-fit: cover; border: 2px solid var(--parch-ink); border-radius: 3px; background: #1d1c20; }
.portrait.none { display: flex; align-items: center; justify-content: center; }
.portrait.none img { width: 70%; }
.hero .hbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero .htop { display: flex; align-items: center; gap: 6px; }
.hero .htop .ribbon { flex: 1; font-size: 17px; min-width: 0; }
.hero .power { font-size: 15.5px; line-height: 1.3; }
.hero .tag { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #7a6a4c; }
.hero.taken { opacity: .45; filter: grayscale(.6); }
/* v1.9.6 - dirigeants à débloquer : grisés, avec un cadenas. Ils restent cliquables : le clic
   ouvre la demande d'inscription. */
.hero.locked { opacity: .5; filter: grayscale(1); position: relative; }
.hero.locked::after { content: "\1F512"; position: absolute; left: 14px; top: 12px; font-size: 22px;
  filter: none; opacity: 1; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
.hero.locked:hover, .hero.locked:focus-visible { opacity: .72; filter: grayscale(.55); }
.hero.locked .tag { color: #8a6410; font-weight: 600; }
label.chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
label.chk input { margin-top: 2px; flex: none; width: 16px; height: 16px; }
#heroPick .fld { display: block; margin-top: 12px; }
#heroPick .fld span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
#heroPick .fld input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid #b59e6d; background: #fdfaf3; color: #2a2118; font: inherit; font-size: 15px; }
#heroPick .err { color: #c8413a; font-size: 13px; min-height: 1.2em; margin: 6px 0 0; }
.hero.chosen { outline: 3px solid var(--gold); outline-offset: 2px; }
button.hero { cursor: pointer; font: inherit; }
button.hero:hover:not(:disabled) { transform: translateY(-2px); }

/* ---------- accueil ---------- */
/* v1.9.9 - accueil refait : l'écran restait collé en haut avec un grand vide dessous, les deux
   cartes n'avaient pas la même hauteur (celle du jeu local était presque vide), et les pictogrammes
   étaient des émojis au milieu d'un jeu entièrement dessiné à la main. */
#setup { position: fixed; inset: 0; overflow: auto; z-index: 50; padding: 32px 20px 28px;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(217,180,95,.10) 0%, rgba(217,180,95,0) 60%),
    radial-gradient(ellipse at 50% 0%, #2b2a31 0%, #111113 72%);
  /* 'safe' : quand le contenu dépasse (écran des dirigeants), on repart du haut au lieu de centrer,
     sinon le début du contenu passe au-dessus du bord et devient inatteignable. */
  display: grid; align-content: center; align-content: safe center; }
#setup::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px); }
.setup-inner { position: relative; max-width: 1120px; width: 100%; margin: 0 auto; display: grid;
  grid-template-columns: 320px 1fr; gap: 48px; align-items: center; }

/* la jaquette : cadre doré, léger halo, elle porte le titre du jeu */
.cover { position: relative; text-align: center; padding: 34px 22px 26px; margin: 0;
  background: linear-gradient(#1a1a1d, #141416);
  border: 1px solid transparent; border-radius: 4px;
  background-origin: border-box; background-clip: padding-box, border-box;
  background-image: linear-gradient(#1a1a1d, #141416), linear-gradient(160deg, #6d5a2c, #d9b45f 45%, #5b4a24);
  box-shadow: 0 26px 60px -30px #000, 0 0 60px -30px rgba(217,180,95,.7); }
.cover::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(217,180,95,.28);
  border-radius: 2px; pointer-events: none; }
.cover h1 { font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 1.04;
  margin: 0 0 18px; letter-spacing: .05em;
  background: linear-gradient(#f7ead0 15%, #d9b45f 55%, #9c7a2c);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover img { width: 168px; margin: 2px auto 18px; display: block; filter: drop-shadow(0 6px 18px rgba(217,180,95,.25)); }
.cover .proto { font-family: var(--f-display); letter-spacing: .34em; color: var(--bone-dim);
  font-size: 14px; padding-top: 14px; position: relative; }
.cover .proto::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,180,95,.55), transparent); }

.setup-form .eyebrow { font-family: var(--f-display); letter-spacing: .24em; text-transform: uppercase;
  font-size: 12.5px; color: var(--gold-deep); margin: 0 0 10px; }
.setup-form h2 { font-family: var(--f-display); font-size: 34px; line-height: 1.12; margin: 0 0 10px;
  letter-spacing: .01em; color: var(--bone); }
.setup-form #stepMode > h2::after { content: ''; display: block; width: 74px; height: 2px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--gold), rgba(217,180,95,0)); }
.setup-form p.lead { color: var(--bone-dim); margin: 14px 0 24px; max-width: 58ch; font-size: 17px; }
.count-pick { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.count-pick button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-family: var(--f-display); font-size: 19.5px; }
.count-pick button[aria-pressed="true"] { background: var(--gold); color: #1d160a; border-color: var(--gold); }
.prow { display: grid; grid-template-columns: 30px minmax(120px, 190px) 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.prow input { width: 100%; background: #19191d; border: 1px solid var(--line); color: var(--bone); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 17px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); padding: 0; }
.prow .hero { grid-template-columns: 64px 1fr; padding: 7px; }
.prow .hero .portrait { width: 64px; height: 68px; }
.prow .hero .power { font-size: 14.5px; }
.prow .hero .htop .ribbon { font-size: 15px; }
.setup-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.note { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 64ch; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

/* ---------- jeu ---------- */
#game { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
header.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #18171a; flex-wrap: wrap; }
.brand { font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; font-size: 19.5px; white-space: nowrap; }
.phases { display: flex; align-items: center; gap: 0; margin: 0 auto; flex-wrap: wrap; }
.phase { display: flex; align-items: center; gap: 7px; padding: 6px 14px 6px 10px; font-size: 15.5px; color: var(--muted); }
.phase .n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.phase.on { color: var(--bone); font-weight: 700; }
.phase.on .n { background: var(--gold); color: #1d160a; border-color: var(--gold); }
.phase.done .n { background: #3a3a40; color: var(--bone-dim); }
.phase + .phase::before { content: ''; width: 18px; height: 1px; background: var(--line); margin-right: 10px; }
.round-chip { font-family: var(--f-display); color: var(--bone-dim); font-size: 16px; }

aside { overflow-y: auto; padding: 10px; background: #19181b; }
aside.left { border-right: 1px solid var(--line); }
aside.right { border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; grid-row: 2 / 4; grid-column: 3; }
.section-title { font-family: var(--f-display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); margin: 2px 0 8px; }

/* adversaires */
.opp { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 10px; padding: 7px; margin-bottom: 8px; background: var(--panel); }
.opp.active { background: #2e2c26; border-color: var(--pc); }
.opp.dead { opacity: .4; }
.opp > img.portrait, .opp > .portrait { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pc); }
.opp > .portrait.none { display: flex; align-items: center; justify-content: center; background: #19191b; overflow: hidden; } .opp > .portrait.none img { width: 34px; }
.opp .nm { font-weight: 800; display: flex; gap: 6px; align-items: center; min-width: 0; }
.opp .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp .ld { font-size: 14px; color: var(--muted); }
.opp .st { display: flex; gap: 10px; font-size: 15px; margin-top: 3px; flex-wrap: wrap; }
.opp .st b { font-family: var(--f-num); }
.pill { font-size: 12px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--bone-dim); white-space: nowrap; }
.pill.tyran { background: #5b1d19; border-color: #a8453b; color: #ffd4cc; }
.pill.pact { border-color: #4f6f8f; color: #bcd6f0; }
.icn, .opp .icn { width: auto; height: 15px; border: 0; border-radius: 0; vertical-align: -3px; filter: invert(.92) sepia(.2); }

/* carte */
#board { position: relative; overflow: auto; background: #20242a; }
#boardWrap { position: relative; margin: 0 auto; }
/* v1.9 - LA cause du « svg qui recouvre les constructions » : cette règle visait les calques du
   plateau, mais elle attrapait AUSSI toutes les icônes SVG des fenêtres ouvertes au-dessus de la
   carte (le panneau de construction est dans #boardWrap). Chaque icône était étirée sur tout le
   plateau et avalait les clics. Restreinte aux enfants directs. */
#boardWrap > canvas, #boardWrap > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#baseCv { image-rendering: auto; border-radius: 6px; box-shadow: 0 20px 50px -20px #000; }
#ovCv { opacity: .95; mix-blend-mode: multiply; pointer-events: none; }
#tokens { pointer-events: none; }
#tokens .tk { pointer-events: auto; cursor: pointer; }
#tokens .tk:hover circle.ring { stroke-width: 3.5; }
.tlabel { font-family: var(--f-display); font-size: 8.4px; font-weight: 700; fill: #2a2218; text-anchor: middle; paint-order: stroke; stroke: rgba(245,236,212,.85); stroke-width: 2.6px; letter-spacing: .03em; }
.slabel { font-family: var(--f-display); font-size: 7.2px; fill: rgba(36,52,58,.7); text-anchor: middle; letter-spacing: .16em; }
.mvbadge { font-family: var(--f-body); font-weight: 800; font-size: 7px; fill: #1d160a; text-anchor: middle; dominant-baseline: central; }
/* v1.8 : le marché (z-index 5) recouvrait les boutons de zoom pendant toute la phase de
   recrutement, à toutes les tailles d'écran. Ils passent devant et se décalent de la hauteur
   du marché, que renderMarket publie dans --mh. */
.board-tools { position: sticky; float: right; right: 10px; bottom: calc(10px + var(--mh, 0px)); margin: -52px 10px 10px 0; display: flex; gap: 6px; z-index: 6; }
.banner { position: sticky; top: 10px; margin: 10px auto -44px; width: fit-content; max-width: calc(100% - 32px); z-index: 4; background: rgba(24,23,26,.94); border: 1px solid var(--gold); color: var(--bone); padding: 8px 10px 8px 16px; border-radius: 999px; font-size: 16px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px -10px #000; }
.popover { position: absolute; z-index: 6; width: 290px; background: #242328; border: 1px solid #5c5543; border-radius: 12px; padding: 12px; box-shadow: 0 24px 50px -16px #000; }
.popover h4 { font-family: var(--f-display); margin: 0 0 2px; font-size: 18.5px; }
.popover .sub { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.popover .x { position: absolute; right: 8px; top: 6px; background: none; border: 0; font-size: 20.5px; color: var(--muted); }
.pc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #36353c; }
.pc-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pc); flex: none; }
.pc-row .t { flex: 1; min-width: 0; font-size: 15.5px; } .pc-row .t small { display: block; color: var(--muted); font-size: 14px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
/* v1.9.6 - boutons d'aménagement : fond sombre et icône dorée. Le parchemin beige avec une icône
   noire se lisait mal et jurait avec le reste de la fenêtre, qui est sombre. */
.bbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px;
  border-radius: 8px; border: 2px solid #cfa94e; font-size: 14.5px; line-height: 1.15;
  background: linear-gradient(#2a241c, #1d1913); color: #efe3c6; }
.bbtn small { color: #b9a77e; }
.bbtn .price { color: #f0d491; }
.bbtn:not(:disabled):hover { background: linear-gradient(#37301f, #241f17); }
.bbtn img { height: 26px; }
.bbtn .price { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-family: var(--f-num); }
.bbtn .price .coin { width: 12px; height: 12px; }
.bbtn:disabled { opacity: .45; cursor: not-allowed; }
.bbtn:not(:disabled):hover { border-color: #f0d491; transform: translateY(-1px); }
.blds-now { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.bchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; border-radius: 6px; background: var(--parch); color: var(--parch-ink); font-size: 14.5px; border-left: 4px solid var(--bc); }
.bchip img { height: 16px; }
.err { color: #f2a79c; font-size: 15px; min-height: 1em; margin-top: 6px; }
.legend { position: sticky; left: 10px; bottom: 10px; float: left; margin: -46px 0 10px 10px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--bone-dim); background: rgba(22,21,24,.88); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; z-index: 3; align-items: center; }
.legend img { height: 16px; filter: invert(.9); vertical-align: -3px; margin-right: 3px; }

/* marché */
.market { position: sticky; bottom: 0; z-index: 5; margin-top: -10px; background: linear-gradient(to top, rgba(18,17,20,.98) 70%, rgba(18,17,20,.0)); padding: 26px 16px 14px; }
.market-inner { display: grid; grid-template-columns: 120px repeat(5, minmax(0, 190px)); gap: 12px; justify-content: center; align-items: end; }
.market h3 { font-family: var(--f-display); margin: 0 0 8px; text-align: center; font-size: 17px; letter-spacing: .08em; }
.deckpile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14.5px; color: var(--bone-dim); text-align: center; }
.deckpile img { width: 100px; border-radius: 8px; box-shadow: 4px 4px 0 #2c2b30, 8px 8px 0 #232227; }

/* tapis du joueur (bas) */
.mat { grid-column: 1 / 3; border-top: 1px solid var(--line); background: #1c1b1f; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 10px 14px; align-items: center; }
.me { display: grid; grid-template-columns: 84px auto; gap: 12px; align-items: center; }
.me .portrait { width: 84px; height: 90px; border-radius: 8px; object-fit: cover; border: 3px solid var(--pc); }
.me .who { display: flex; flex-direction: column; gap: 5px; }
.me .who .ribbon { font-size: 18.5px; }
.me .who .line { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--bone-dim); }
.purse { display: flex; align-items: center; gap: 8px; }
.purse .coin { width: 30px; height: 30px; }
.purse b { font-family: var(--f-num); font-size: 26px; color: #ffd66b; }
.tracks { display: flex; flex-direction: column; gap: 5px; }
.track { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--bone-dim); }
.track .lbl { width: 92px; display: flex; align-items: center; gap: 5px; }
.track .boxes { display: flex; gap: 3px; }
.track .boxes i { width: 13px; height: 13px; border: 1px solid #6b6453; border-radius: 2px; display: block; }
.track .boxes i.on { background: var(--pc); border-color: var(--pc); }
.track .boxes i.goal { border-color: #c7342b; box-shadow: inset 0 0 0 1px #c7342b; }
/* v1.9.1 : la barre du bas change de contenu à chaque joueur (armée fournie ou vide, texte sur
   une ou deux lignes). Sa hauteur variait de 130 à 159 px, ce qui faisait sauter la carte à
   chaque rendu. Ces deux hauteurs minimales la figent. */
.army { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; min-height: 88px; align-items: center; }
.mini { width: 112px; flex: none; border-radius: 8px; border: 3px solid #d4b04f; overflow: hidden; font-size: 13px; position: relative; cursor: pointer; background: var(--parch); color: var(--parch-ink); }
.mini.elite { border-color: #b8463c; } .mini.done { opacity: .55; }
.mini img { width: 100%; height: 46px; object-fit: cover; display: block; }
.mini .mn { font-weight: 800; padding: 2px 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-card); font-size: 14.5px; }
.mini .ms { padding: 0 5px 3px; color: #5c4d33; }
.mini .mv { position: absolute; top: 3px; right: 3px; background: var(--arrow); color: #fff; font-weight: 800; border-radius: 10px; padding: 0 6px; font-size: 12.5px; }
.cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 330px; }
.cta .hint { font-size: 15px; color: var(--bone-dim); text-align: right; min-height: 2.8em; display: flex; align-items: center; justify-content: flex-end; }
.cta .go { font-size: 19.5px; padding: 12px 22px; border-radius: 12px; font-family: var(--f-display); letter-spacing: .03em; box-shadow: 0 0 0 0 rgba(120,170,240,.55); animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 8px rgba(120,170,240,0); } 0% { box-shadow: 0 0 0 0 rgba(120,170,240,.5); } }

/* panneau droit */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.box h3 { font-family: var(--f-display); font-size: 18.5px; margin: 0 0 6px; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 15.5px; padding: 2px 0; }
.kv span:first-child { color: var(--muted); }
.muted { color: var(--muted); }
.log { font-size: 14.5px; color: var(--bone-dim); max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.log div { border-left: 3px solid var(--lc, #444); padding-left: 7px; }

/* modales */
.modal-bg { position: fixed; inset: 0; background: rgba(8,8,10,.74); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.modal { background: #212025; border: 1px solid #4d4739; border-radius: 14px; padding: 20px; width: min(580px, 100%); max-height: calc(100% - 32px); overflow-y: auto; box-shadow: 0 30px 60px -20px #000; }
.modal.wide { width: min(980px, 100%); }
.modal h2 { font-family: var(--f-display); margin: 0 0 8px; font-size: 22px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; margin: 12px 0; }
.side { background: var(--panel); border-radius: 12px; padding: 10px; border-top: 4px solid var(--sc); text-align: center; }
.side img.portrait { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sc); }
.side h4 { margin: 4px 0 6px; font-size: 17px; }
.side .kv { font-size: 14.5px; text-align: left; }
.die { width: 56px; height: 56px; border-radius: 12px; background: var(--parch); color: var(--parch-ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 30px; font-weight: 700; margin: 8px auto 0; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.die.roll { animation: roll .6s ease-out; }
@keyframes roll { 0% { transform: rotate(-220deg) scale(.4); opacity: .2; } 70% { transform: rotate(12deg) scale(1.08); } 100% { transform: none; opacity: 1; } }
.total { font-family: var(--f-display); font-size: 26px; margin-top: 4px; }
.vs { font-family: var(--f-display); color: var(--gold); align-self: center; font-size: 20.5px; }
.verdict { text-align: center; font-family: var(--f-display); font-size: 23px; color: var(--gold); margin: 6px 0; }
.pass { text-align: center; padding: 10px; border-radius: 10px; margin-bottom: 12px; font-size: 18.5px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.choice-grid .btn { text-align: left; padding: 10px 12px; }
.help h3 { font-family: var(--f-display); font-size: 17px; margin: 14px 0 4px; }
.help ul { margin: 4px 0; padding-left: 18px; }

@media (max-width: 1150px) { #game:not(.no-right) { grid-template-columns: minmax(0,1fr) 260px; } .market-inner { grid-template-columns: repeat(5, minmax(0, 170px)); } .deckpile { display: none; } }
@media (max-width: 860px) {
  html, body { height: auto; }
  #game { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  aside.left, aside.right, .mat { grid-column: 1; grid-row: auto; border: 0; }
  #board { height: 70vh; }
  .mat { grid-template-columns: 1fr; }
  .cta { align-items: stretch; max-width: none; } .cta .hint { text-align: left; }
  .setup-inner { grid-template-columns: 1fr; gap: 24px; } .cover { max-width: 300px; margin: 0 auto; }
  /* le bandeau musique est en haut à droite : on lui laisse la place au-dessus de la jaquette */
  #setup { align-content: start; padding-top: 68px; } .setup-form h2 { font-size: 27px; }
  .mode-card { height: auto; } .cover h1 { font-size: 33px; } .cover img { width: 132px; }
  .prow { grid-template-columns: 30px 1fr; } .prow .hero { grid-column: 1 / -1; }
  .market-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .die.roll, .cta .go { animation: none; } * { transition: none !important; } }

/* ---------- modes de jeu & salon en ligne ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 10px; }
/* v1.9.9 - les deux cartes ont la même hauteur et finissent toutes les deux par une action :
   la carte du jeu local se terminait dans le vide, ce qui déséquilibrait toute la page. */
.mode-grid { align-items: stretch; }
.mode-card { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 22px 22px 20px;
  border-radius: 14px; border: 1px solid var(--line); color: var(--bone); font: inherit; height: 100%;
  background: linear-gradient(#26252c, #1e1d23);
  box-shadow: 0 18px 40px -28px #000; }
button.mode-card { cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
button.mode-card:hover { transform: translateY(-3px); border-color: var(--gold-deep);
  box-shadow: 0 24px 46px -26px #000, 0 0 0 1px rgba(217,180,95,.18) inset; }
button.mode-card:hover .mc-go { color: var(--gold-hi); }
button.mode-card:hover .mc-ico { border-color: rgba(217,180,95,.55); }
.mode-card b { font-family: var(--f-display); font-size: 23px; letter-spacing: .01em; }
.mode-card > span:not(.mc-ico):not(.mc-go):not(.mc-list) { color: var(--bone-dim); font-size: 16px; line-height: 1.5; }
.mc-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid rgba(217,180,95,.3); background: rgba(217,180,95,.08);
  color: var(--gold); margin-bottom: 4px; transition: border-color .14s; }
.mc-ico svg { width: 25px; height: 25px; }
.mc-list { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.mc-list i { font-style: normal; color: var(--muted); font-size: 14.5px; padding-left: 17px; position: relative; }
.mc-list i::before { content: ''; position: absolute; left: 3px; top: .55em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-deep); }
.mc-go { margin-top: auto; padding-top: 14px; color: var(--gold); font-family: var(--f-display);
  font-size: 15.5px; letter-spacing: .03em; transition: color .14s; }
.online-only .fld { margin-top: auto; }
.mode-card .fld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.mode-card input, .linkbox input, .seat input { background: #19191d; border: 1px solid var(--line); color: var(--bone); border-radius: 8px; padding: 9px 10px; font-family: inherit; font-size: 17px; width: 100%; text-transform: none; letter-spacing: 0; }
.join-row { display: flex; gap: 8px; align-items: stretch; padding-top: 8px; border-top: 1px dashed var(--line); }
.join-row input { font-family: var(--f-num); letter-spacing: .3em; text-transform: uppercase; font-size: 19.5px; text-align: center; }
#stepMode.offline .online-only { opacity: .45; pointer-events: none; }
.err { color: #f2a79c; min-height: 1.2em; margin: 6px 0; }
.lobby-head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--gold); border-radius: 14px; background: rgba(241,212,136,.06); margin: 6px 0 14px; }
.big-code { font-family: var(--f-num); font-size: 44px; letter-spacing: .22em; color: var(--gold); line-height: 1.1; user-select: all; }
.share p { margin: 0 0 8px; color: var(--bone-dim); font-size: 16px; }
.linkbox { display: flex; gap: 8px; }
.linkbox input { font-size: 15px; }
.seats .prow { grid-template-columns: 30px minmax(120px, 190px) auto 1fr; }
.seats .prow.empty { grid-template-columns: 30px 1fr; }
.seat.mine { box-shadow: 0 0 0 1px var(--gold) inset; }
.seat.empty { border-style: dashed; opacity: .55; min-height: 56px; }
.seat-name { display: flex; flex-direction: column; } .seat-name small { color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; }
/* v1.9.1 - LE clignotement. Ce sélecteur visait le <span class="waiting"> du salon, mais
   ui.js pose aussi la classe « waiting » sur <body> pendant le tour d'un autre joueur :
   la PAGE ENTIÈRE passait de 100 % à 45 % d'opacité toutes les 1,6 s. Limité au span. */
span.waiting { color: var(--bone-dim); align-self: center; animation: pulse 1.6s ease-in-out infinite; }
/* pastilles « prêt » du salon en ligne */
.seat .rdy { display: inline-flex; align-items: center; gap: 6px; justify-self: end; padding: 5px 11px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  border: 1px solid rgba(214,196,150,.28); background: rgba(0,0,0,.22); color: var(--bone-dim); }
.seat .rdy .ic { opacity: .85; }
.seat .rdy.on { border-color: rgba(120,190,120,.55); background: rgba(70,130,70,.22); color: #b9e6b0; }
.seat button.rdy { cursor: pointer; font-family: inherit; transition: transform .12s, background .18s, border-color .18s; }
.seat button.rdy:hover { transform: translateY(-1px); border-color: rgba(214,196,150,.6); }
.seat button.rdy.on:hover { border-color: rgba(120,190,120,.85); }
.seat span.rdy:not(.on) .ic { animation: hg 2.4s ease-in-out infinite; }
@keyframes hg { 0%,70%,100% { transform: rotate(0); } 80%,95% { transform: rotate(180deg); } }
@media (max-width: 620px) { .seat .rdy { font-size: 12px; padding: 4px 8px; } .seat .rdy .lbl { display: none; } }
@keyframes pulse { 50% { opacity: .45; } }
.room-code { font-family: var(--f-num); letter-spacing: .15em; color: var(--gold); }
button.hero:disabled { cursor: not-allowed; }
@media (max-width: 700px) { .lobby-head { grid-template-columns: 1fr; } .big-code { font-size: 36px; } .seats .prow { grid-template-columns: 30px 1fr auto; } .seats .prow.empty { grid-template-columns: 30px 1fr; } .seats .prow .hero { grid-column: 1 / -1; } }
.legend .chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.4); }
#tokens .bic { pointer-events: none; }

/* ---------- animations ---------- */
#board { position: relative; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.fx-banner { position: absolute; left: 0; right: 0; top: 38%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 0 14px; background: linear-gradient(90deg, transparent, rgba(18,17,20,.92) 18%, rgba(18,17,20,.92) 82%, transparent); border-top: 2px solid var(--bc, var(--gold)); border-bottom: 2px solid var(--bc, var(--gold)); animation: fxBanner 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
.fx-banner b { font-family: var(--f-display); font-size: 34px; letter-spacing: .06em; color: var(--bone); text-shadow: 0 0 22px var(--bc, var(--gold)); }
.fx-banner small { font-family: var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); font-size: 14px; }
.fx-banner span { color: var(--bone-dim); font-size: 17px; }
.fx-banner .ico { font-size: 26px; line-height: 1; }
@keyframes fxBanner { 0% { opacity: 0; transform: scaleY(.6); } 16% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleY(.85); } }
.fx-float { position: fixed; transform: translate(-50%, 0); font-family: var(--f-num); font-weight: 700; font-size: 16px; pointer-events: none; z-index: 80; animation: fxFloat 1.5s ease-out forwards; text-shadow: 0 1px 4px #000; }
.fx-float.gain { color: #f1d488; } .fx-float.loss { color: #f2a79c; } .fx-float.dip.gain { color: #9bd58f; }
.fx-float.big { font-size: 24px; }
@keyframes fxFloat { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1); } }
.purse.bump b { animation: bump .5s ease; display: inline-block; }
@keyframes bump { 40% { transform: scale(1.35); color: #f1d488; } }
#tokens .fx-ring { fill: none; stroke-width: 2.4; transform-box: fill-box; transform-origin: center; animation: ring 1.3s ease-out both; pointer-events: none; }
@keyframes ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(4.6); opacity: 0; } }
#tokens .tk.fx-in .tki { animation: tokIn .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes tokIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
#tokens .tk .tki { transform-box: fill-box; }
#tokens .tk.can .ring { animation: canPulse 1.8s ease-in-out infinite; }
@keyframes canPulse { 50% { stroke: #fff6c8; stroke-width: 3.2px; } }
#tokens .tk:hover .tki { filter: brightness(1.15) drop-shadow(0 0 3px #fff8); }
.market .slot.deal .ucard { animation: deal .6s cubic-bezier(.2,.8,.2,1); }
@keyframes deal { 0% { transform: translateX(-160px) rotate(-14deg) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* v1.8 : paliers de resserrement du marché quand le plateau est trop court pour 5 cartes entières.
   Objectif : voir les cinq cartes ET leur bouton Acheter sans faire défiler. */
.market.tight { padding: 12px 16px 8px; }
.market.tight h3 { font-size: 14px; margin-bottom: 4px; }
.market.tight .ucard .art { height: 78px; max-height: 78px; object-fit: cover; }
.market.tight .ucard .txt { font-size: 11.5px; line-height: 1.25; max-height: 42px; overflow: hidden; }
.market.tight .deckpile { display: none; }
.market.tighter { padding: 8px 12px 6px; }
.market.tighter h3 { font-size: 13px; margin-bottom: 3px; }
.market.tighter .market-inner { gap: 7px; }
.market.tighter .ucard { padding: 3px 4px 4px; border-width: 3px; }
.market.tighter .ucard .art { height: 52px; max-height: 52px; }
.market.tighter .ucard .txt { display: none; }
.market.tighter .ucard .ft { display: none; }
.market.tighter .ucard .uh .ribbon { font-size: 12px; }
.market.tighter .ucard .acts .btn { font-size: 11.5px; padding: 3px; }
.market.tighter .slot .why { font-size: 10.5px; }


/* Dernier palier : les cinq cartes sur une seule rangée, plafond de hauteur et défilement annulés.
   Déclenché par la mesure (voir fitMarket), pas par la largeur : il sert aussi bien au téléphone
   qu'à une fenêtre de bureau très basse. Les cartes rétrécissent, mais elles restent toutes visibles. */
.market.row1 { max-height: none; overflow: visible; padding: 8px 8px 6px; }
.market.row1 .market-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.market.row1 .deckpile { display: none; }
.market.row1 .ucard { padding: 2px 3px 3px; border-width: 2px; }
.market.row1 .ucard .art { height: 42px; max-height: 42px; object-fit: cover; }
.market.row1 .ucard .uh .ribbon { font-size: 10px; letter-spacing: 0; }
.market.row1 .ucard .uh .arrow { width: 15px; height: 15px; font-size: 10px; }
.market.row1 .ucard .txt, .market.row1 .ucard .biomes, .market.row1 .ucard .ft { display: none; }
.market.row1 .ucard .acts { gap: 3px; }
.market.row1 .ucard .acts .btn { font-size: 10px; padding: 5px 1px; min-height: 30px; }
.market.row1 .slot .why { font-size: 10px; }

/* v1.8 : marché réduit - les cartes restent visibles, en vignettes, pour dégager la carte du jeu. */
.market.compact { padding: 6px 16px 6px; margin-top: 0; }   /* le retrait de -10px mordait sur le bas de la carte */
.market.compact h3 { font-size: 13px; margin-bottom: 4px; }
/* La largeur du marché suit celle de son contenu : rétrécir les cartes écrase toute la barre et le
   titre part sur huit lignes. On garde donc la largeur d'origine et on ne réduit que la hauteur. */
.market.compact .market-inner { gap: 8px; align-items: start; cursor: pointer; }
.market.compact .deckpile { visibility: hidden; height: 0; overflow: hidden; }   /* v1.9.15 : la pile cachée gardait sa hauteur et le plateau rétrécissait */
.market.compact .slot .why, .market.compact .ucard .txt, .market.compact .ucard .biomes,
.market.compact .ucard .ft, .market.compact .ucard .acts { display: none; }
.market.compact .ucard { border-width: 3px; padding: 3px 4px 4px; }
.market.compact .ucard .uh .ribbon { font-size: 11.5px; letter-spacing: 0; }
.market.compact .ucard .uh .arrow { width: 17px; height: 17px; font-size: 11px; }
.market.compact .ucard .art { display: none; }   /* v1.9.15 : bandeau fin, seuls les noms restent, la carte garde sa taille */
.market.compact .ucard .art.none { display: grid; place-items: center; }
.market.compact .ucard .art.none img { width: 30px; height: 30px; }
.market.compact .ucard:hover { transform: translateY(-3px); }
@media (max-width: 900px) { .market.compact .market-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.market .ucard { transition: transform .18s ease, box-shadow .18s ease; }
.market .ucard:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 18px 30px -14px #000; }
.modal-bg { animation: fadeIn .2s ease; } .modal { animation: popIn .28s cubic-bezier(.2,1.2,.4,1); }
@keyframes fadeIn { from { opacity: 0; } } @keyframes popIn { from { transform: scale(.94) translateY(8px); opacity: 0; } }
.duel .side:first-child { animation: fromL .5s cubic-bezier(.2,.8,.2,1); } .duel .side:last-child { animation: fromR .5s cubic-bezier(.2,.8,.2,1); }
@keyframes fromL { from { transform: translateX(-40px); opacity: 0; } } @keyframes fromR { from { transform: translateX(40px); opacity: 0; } }
.modal .verdict { animation: stamp .5s .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp { from { transform: scale(2.2); opacity: 0; } }
.victory { position: relative; overflow: hidden; }
.victory .vcrown { animation: crown 1s cubic-bezier(.2,1.5,.4,1); }
@keyframes crown { from { transform: translateY(-60px) scale(.6); opacity: 0; } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; background: var(--gold); animation: conf 2.8s linear infinite; }
.confetti i:nth-child(3n) { background: #c9453a; } .confetti i:nth-child(3n+1) { background: #6fa8dc; } .confetti i:nth-child(4n) { background: #9bd58f; }
.confetti i:nth-child(1) { left: 3%; animation-delay: .1s } .confetti i:nth-child(2) { left: 8%; animation-delay: 1.2s } .confetti i:nth-child(3) { left: 13%; animation-delay: .6s } .confetti i:nth-child(4) { left: 18%; animation-delay: 2s } .confetti i:nth-child(5) { left: 23%; animation-delay: .3s } .confetti i:nth-child(6) { left: 28%; animation-delay: 1.6s } .confetti i:nth-child(7) { left: 33%; animation-delay: .9s } .confetti i:nth-child(8) { left: 38%; animation-delay: 2.4s } .confetti i:nth-child(9) { left: 43%; animation-delay: .2s } .confetti i:nth-child(10) { left: 48%; animation-delay: 1.4s } .confetti i:nth-child(11) { left: 53%; animation-delay: .7s } .confetti i:nth-child(12) { left: 58%; animation-delay: 1.9s } .confetti i:nth-child(13) { left: 63%; animation-delay: .4s } .confetti i:nth-child(14) { left: 68%; animation-delay: 2.2s } .confetti i:nth-child(15) { left: 73%; animation-delay: 1s } .confetti i:nth-child(16) { left: 78%; animation-delay: .5s } .confetti i:nth-child(17) { left: 83%; animation-delay: 1.7s } .confetti i:nth-child(18) { left: 88%; animation-delay: .8s } .confetti i:nth-child(19) { left: 93%; animation-delay: 2.6s } .confetti i:nth-child(20) { left: 97%; animation-delay: 1.1s }
.confetti i:nth-child(n+21) { display: none; }
@keyframes conf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: .2; } }
.phase.on { animation: phaseOn .5s ease; } @keyframes phaseOn { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } }
/* musique */
.music { display: inline-flex; align-items: center; gap: 4px; }
.music input[type=range] { width: 86px; accent-color: var(--gold); }
.music .mtitle { font-size: 14px; color: var(--muted); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music.off .mtitle { opacity: .5; }
.setup-music { position: absolute; top: 14px; right: 16px; z-index: 5; background: rgba(22,21,24,.85); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 4px; }
@media (max-width: 1150px) { header.bar .music .mtitle { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-banner, .fx-float, #tokens .fx-ring, .confetti, #tokens .tk.can .ring { display: none; animation: none; } .market .slot.deal .ucard, .modal, .modal-bg, .duel .side, .modal .verdict, .victory .vcrown { animation: none; } }
.fx-toasts { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, 70%); }
.fx-toast { display: flex; gap: 8px; align-items: flex-start; background: rgba(22,21,24,.93); border: 1px solid var(--line); border-left: 4px solid var(--tc, var(--gold)); border-radius: 10px; padding: 7px 11px; font-size: 15.5px; color: var(--bone); box-shadow: 0 10px 22px -12px #000; animation: toastIn .35s cubic-bezier(.2,1.3,.4,1); transition: opacity .4s, transform .4s; }
.fx-toast .i { font-size: 17px; line-height: 1.2; }
.fx-toast.bad { background: rgba(48,20,20,.94); } .fx-toast.good .i { filter: saturate(1.2); }
.fx-toast.out { opacity: 0; transform: translateX(-20px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-30px) scale(.9); } }
.fx-pop { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 28px; min-width: 260px; max-width: 80%; text-align: center; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, rgba(241,212,136,.22), rgba(18,17,20,.95) 70%); border: 2px solid var(--tc, var(--gold)); box-shadow: 0 0 40px -6px var(--tc, var(--gold)), 0 30px 60px -20px #000; animation: popFx 2.3s cubic-bezier(.2,1.4,.4,1) forwards; }
.fx-pop.bad { background: radial-gradient(ellipse at 50% 0%, rgba(201,69,58,.3), rgba(18,17,20,.95) 70%); }
.fx-pop .i { font-size: 42px; line-height: 1; animation: popIco .6s .1s cubic-bezier(.2,1.8,.4,1) both; }
.fx-pop b { font-family: var(--f-display); font-size: 23px; letter-spacing: .02em; }
@keyframes popFx { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 12% { opacity: 1; transform: translateX(-50%) scale(1.06); } 20% { transform: translateX(-50%) scale(1); } 82% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.96); } }
@keyframes popIco { from { transform: scale(0) rotate(-30deg); } }
@media (prefers-reduced-motion: reduce) { .fx-toast, .fx-pop, .fx-pop .i { animation: none; } }

/* ---------- v1.4 : mise en page (carte plus grande), survol, surbrillances ---------- */
#game { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
#game.no-right { grid-template-columns: minmax(0, 1fr) 0; }
#game.no-right aside.right { display: none; }
aside.left { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 8px; overflow-x: auto; padding: 7px 10px; border-right: 0; border-bottom: 1px solid var(--line); background: #17161a; }
aside.left .section-title { display: none; }
aside.left .opp { flex: none; margin: 0; min-width: 220px; grid-template-columns: 42px 1fr; padding: 5px 8px; }
aside.left .opp > img.portrait, aside.left .opp > .portrait { width: 42px; height: 42px; }
aside.left .opp .ld { display: none; }
aside.left .opp .st { margin-top: 1px; }
#board { grid-column: 1; grid-row: 3; }
aside.right { grid-row: 3 / 5; grid-column: 2; }
.mat { grid-column: 1; grid-row: 4; }
#baseCv { border-radius: 10px; box-shadow: 0 0 0 2px #b8913f, 0 0 0 5px #231d14, 0 0 0 6px rgba(217,180,95,.35), 0 24px 60px -18px #000; }
#ovCv { mix-blend-mode: normal; opacity: 1; }
#rcCv { pointer-events: none; opacity: 0; }
#rcCv.on { animation: reachBlink 1.1s ease-in-out infinite; }
@keyframes reachBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#tokens .mallet { pointer-events: auto; cursor: pointer; }
#tokens .mallet .bob { animation: malletBob 1.6s ease-in-out infinite; }
#tokens .mallet:hover circle { fill: #fff6dc; stroke: #d9a24a; }
@keyframes malletBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
#tokens .flag .flagcloth { animation: flagWave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes flagWave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.92); } }
#hoverTip { position: fixed; z-index: 70; pointer-events: none; background: rgba(20,19,23,.95); border: 1px solid #4d4739; border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; max-width: 280px; box-shadow: 0 12px 26px -10px #000; }
#hoverTip b { font-family: var(--f-display); font-size: 17px; color: var(--bone); letter-spacing: .02em; }
#hoverTip small { font-size: 14px; color: var(--bone-dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#hoverTip small img { height: 15px; filter: invert(.9) sepia(.2); }
#hoverTip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hdr-toggle[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); }
.fx-gold { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 90; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 16px 30px; border-radius: 999px; background: radial-gradient(ellipse at 50% 30%, rgba(255,214,107,.28), rgba(20,18,16,.94) 70%); border: 2px solid #e2b448; box-shadow: 0 0 50px -8px rgba(241,212,136,.7); font-family: var(--f-display); font-size: 40px; font-weight: 700; color: #ffd66b; text-shadow: 0 2px 10px #000; animation: goldPop 2.4s cubic-bezier(.2,1.4,.4,1) forwards; }
.fx-gold.loss { color: #f2a79c; border-color: #a8453b; background: radial-gradient(ellipse at 50% 30%, rgba(201,69,58,.25), rgba(20,18,16,.94) 70%); box-shadow: none; }
.fx-gold .coin { width: 42px; height: 42px; }
.fx-gold small { font-size: 16px; color: var(--bone-dim); font-family: var(--f-body); font-weight: 400; display: block; }
.fx-gold i.spark { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe38a, #e0a91d 60%, #a8740e); animation: spark 1.1s ease-out forwards; }
@keyframes goldPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.95); } }
@keyframes spark { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; } }
@media (max-width: 900px) { #game { grid-template-columns: 1fr; } aside.right { grid-column: 1; grid-row: auto; } #board { grid-row: auto; } .mat { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { #rcCv.on { animation: none; opacity: .8; } #tokens .mallet .bob, #tokens .flag .flagcloth { animation: none; } .fx-gold { animation: none; opacity: 0; } }
.me[data-heroinfo] { cursor: pointer; } .me[data-heroinfo]:hover .portrait { filter: brightness(1.12); }

#board.panning { cursor: grabbing; }
header.bar { gap: 10px; padding: 7px 12px; flex-wrap: nowrap; }
header.bar .btn { white-space: nowrap; }
header.bar .phases { flex-wrap: nowrap; min-width: 0; }
header.bar .phase { padding: 5px 9px 5px 7px; }
header.bar .phase + .phase::before { width: 10px; margin-right: 6px; }
@media (max-width: 1960px) { header.bar .music .mtitle { display: none; } }
@media (max-width: 1320px) { header.bar .phase:not(.on) .t { display: none; } .brand { display: none; } }
.track .lbl { width: 118px; white-space: nowrap; }

/* ================= v1.5 ================= */
#amCv { pointer-events: none; }
.icon-btn { font-size: 18px; padding: 5px 9px; }
#animBtn.off { opacity: .45; filter: grayscale(1); }
#bugBtn { font-size: 17px; }
.setup-bug { position: fixed; right: 14px; bottom: 14px; z-index: 30; }

/* portrait du dirigeant : flammes */
.me .pwrap { position: relative; width: 84px; height: 90px; }
.me .pwrap .portrait { position: relative; z-index: 1; }
.me.tyran .pwrap .portrait { box-shadow: 0 0 18px -2px #ff5a2a, 0 0 30px -6px #ff8a2a; border-color: #c9452f; }
.flames { position: absolute; inset: -6px -6px 0 -6px; pointer-events: none; z-index: 2; overflow: visible; }
.flames i { position: absolute; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff3b0 0%, #ffb23e 40%, rgba(255,80,20,.8) 70%, transparent 72%); filter: blur(.4px); mix-blend-mode: screen; opacity: 0; animation: flame 2.2s ease-out infinite; }
.flames i:nth-child(1) { left: 4%; animation-delay: 0s; } .flames i:nth-child(2) { left: 12%; animation-delay: .35s; width: 6px; height: 6px; }
.flames i:nth-child(3) { left: 22%; animation-delay: .9s; } .flames i:nth-child(4) { left: 31%; animation-delay: 1.4s; width: 10px; height: 10px; }
.flames i:nth-child(5) { left: 40%; animation-delay: .2s; } .flames i:nth-child(6) { left: 49%; animation-delay: 1.1s; width: 6px; height: 6px; }
.flames i:nth-child(7) { left: 58%; animation-delay: .6s; } .flames i:nth-child(8) { left: 67%; animation-delay: 1.7s; width: 9px; height: 9px; }
.flames i:nth-child(9) { left: 76%; animation-delay: .45s; } .flames i:nth-child(10) { left: 85%; animation-delay: 1.25s; width: 6px; height: 6px; }
.flames i:nth-child(11) { left: 93%; animation-delay: .8s; } .flames i:nth-child(12) { left: -2%; animation-delay: 1.9s; bottom: 30%; }
.flames i:nth-child(13) { left: 98%; animation-delay: 1.55s; bottom: 40%; } .flames i:nth-child(14) { left: 50%; animation-delay: 1.95s; width: 11px; height: 11px; }
@keyframes flame { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 60% { opacity: .8; transform: translate(3px, -48px) scale(.7); } 100% { opacity: 0; transform: translate(-4px, -82px) scale(.2); } }

/* collecte */
.modal.collect { max-width: 520px; }
.collect-top { display: flex; gap: 14px; align-items: center; margin: 10px 0 4px; }
.collect-top .portrait { width: 64px; height: 68px; border-radius: 8px; object-fit: cover; }
.gold-big { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 10px 0; font-family: var(--f-display); font-size: 52px; font-weight: 700; color: #ffd66b; text-shadow: 0 0 24px rgba(255,200,80,.45); animation: goldIn .7s cubic-bezier(.2,1.5,.4,1); }
.gold-big .coin { width: 40px; height: 40px; align-self: center; }
.gold-big small { font-family: var(--f-body); font-size: 16px; color: var(--bone-dim); font-weight: 400; text-shadow: none; }
.gold-big.neg { color: #f2a79c; text-shadow: 0 0 20px rgba(201,69,58,.4); }
@keyframes goldIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ledger { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 6px 0 10px; max-height: 280px; overflow-y: auto; }
.ledger .lg { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; font-size: 15.5px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ledger .lg b { font-family: var(--f-num); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ledger .lg.plus b { color: #8fd48a; } .ledger .lg.minus b { color: #f2a79c; }
.ledger .lg.tot { background: rgba(241,212,136,.08); border-bottom: 0; font-weight: 700; } .ledger .lg.tot b { color: var(--gold-hi); }
.ledger .coin { width: 16px; height: 16px; }
.btn.undo { border-color: #7f8bb0; color: #cfd8ee; background: #23242c; flex: none; }
.btn.undo:hover { border-color: #aab6d8; background: #2b2d38; }
.warn-line { color: #f2a79c; font-size: 15px; margin: 4px 0; }
.warn-line.danger { background: rgba(160,50,40,.18); border: 1px solid #8e3b31; border-radius: 9px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.warn-line.danger .ic { flex: none; margin-top: 2px; color: #f2a79c; }
.collect-acts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }

/* menu circulaire du dirigeant */
#radial { position: absolute; width: 0; height: 0; z-index: 12; }
#radial .rbtn { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 40% 30%, #3a3830, #1c1b1f); color: var(--bone); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; box-shadow: 0 8px 20px -6px #000, 0 0 16px -4px rgba(241,212,136,.5); animation: rIn .28s cubic-bezier(.2,1.5,.4,1) both; font-family: inherit; }
#radial .rbtn b { font-size: 22px; line-height: 1; } #radial .rbtn span { font-size: 11.5px; font-weight: 600; }
#radial .rbtn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.1); border-color: var(--gold-hi); }
#radial .rbtn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
#radial .rbtn.attack { border-color: #d9584a; box-shadow: 0 8px 20px -6px #000, 0 0 18px -2px rgba(217,88,74,.7); }
#radial .rbtn.conquer { border-color: #7fcf7a; }
#radial .rbtn.close { width: 40px; height: 40px; border-color: var(--line); } #radial .rbtn.close span { display: none; }
#radial .rhint { position: absolute; transform: translateX(-50%); white-space: nowrap; background: rgba(20,19,23,.9); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--bone-dim); pointer-events: none; top: -140px; color: var(--gold-hi); font-family: var(--f-display); }
@keyframes rIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }

/* attaque */
.btn.attack-cta, .btn.attack-go { background: linear-gradient(#a8352a, #6d1c14); border: 1px solid var(--gold); color: var(--gold-hi); font-weight: 700; box-shadow: 0 0 0 0 rgba(224,113,95,.7); animation: atkPulse 1.6s ease-out infinite; }
.btn.attack-cta:hover:not(:disabled), .btn.attack-go:hover:not(:disabled) { background: linear-gradient(#c8432f, #8c261a); border-color: var(--gold-hi); color: #fff3cd; }
.btn.attack-go { font-size: 18px; padding: 10px 20px; }
@keyframes atkPulse { 0% { box-shadow: 0 0 0 0 rgba(224,113,95,.7); } 70% { box-shadow: 0 0 0 12px rgba(224,113,95,0); } 100% { box-shadow: 0 0 0 0 rgba(224,113,95,0); } }
.modal.attack { border-color: #a8453b; box-shadow: 0 0 60px -14px rgba(201,69,58,.6), 0 30px 80px -20px #000; }
.lead-warn { margin: 10px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid #d9a24a; background: rgba(217,162,74,.12); color: #f5dfae; font-size: 15px; }

/* bataille */
.modal.battle { max-width: 760px; }
.modal.battle.awin { box-shadow: 0 0 60px -12px rgba(127,207,122,.45), 0 30px 80px -20px #000; }
.modal.battle.dwin { box-shadow: 0 0 60px -12px rgba(201,69,58,.5), 0 30px 80px -20px #000; }
.side h4 { color: var(--sc); }
.troops { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 8px; }
.trp { width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.trp img, .trp .noart, .trp .portrait { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; border: 2px solid var(--sc, var(--line)); background: #1d1c20; }
.trp .noart { display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 20px; }
.trp span { font-size: 11.5px; line-height: 1.15; color: var(--bone-dim); }
.trp.el img { border-color: var(--gold); box-shadow: 0 0 10px -2px var(--gold); }
.trp.lead .portrait, .trp.lead img { border-radius: 50%; border-color: var(--gold-hi); }
.trp.none img { object-position: 50% 30%; }
.die3d { width: 56px; height: 56px; perspective: 400px; margin: 10px auto 4px; }
.die3d .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: var(--final); animation: roll3d 1.3s cubic-bezier(.2,.7,.3,1) both; }
.die3d .face { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(145deg, #fffaf0, #e6dcc6); border: 2px solid var(--dc, #999); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 7px; box-shadow: inset 0 0 8px rgba(0,0,0,.2); backface-visibility: hidden; }
.die3d .face i { border-radius: 50%; margin: 2px; }
.die3d .face i.on { background: radial-gradient(circle at 35% 35%, #444, #111); }
.die3d .f1 { transform: translateZ(28px); } .die3d .f6 { transform: rotateY(180deg) translateZ(28px); }
.die3d .f2 { transform: rotateY(90deg) translateZ(28px); } .die3d .f5 { transform: rotateY(-90deg) translateZ(28px); }
.die3d .f3 { transform: rotateX(90deg) translateZ(28px); } .die3d .f4 { transform: rotateX(-90deg) translateZ(28px); }
@keyframes roll3d { 0% { transform: translateY(-40px) rotateX(0) rotateY(0) rotateZ(0); } 30% { transform: translateY(6px) rotateX(420deg) rotateY(260deg) rotateZ(90deg); } 60% { transform: translateY(-8px) rotateX(640deg) rotateY(480deg) rotateZ(160deg); } 100% { transform: var(--final); } }
.total.reveal { animation: totReveal .5s 1.25s both; }
@keyframes totReveal { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.modal.battle .verdict { animation: totReveal .5s 1.4s both; }

/* Tyran */
.fx-tyran { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; background: radial-gradient(ellipse at center, rgba(120,20,15,.75), rgba(10,5,5,.92) 70%); animation: tyIn .6s ease-out both; pointer-events: none; }
.fx-tyran.out { animation: tyOut .6s ease-in forwards; }
.fx-tyran .ty-crown { font-size: 90px; filter: drop-shadow(0 0 30px #ff4a2a); animation: tyCrown 1s cubic-bezier(.2,1.5,.4,1) both; }
.fx-tyran .ty-t { font-family: var(--f-display); font-size: 84px; font-weight: 700; letter-spacing: .25em; color: #ff6b4f; text-shadow: 0 0 40px #d02a14, 0 4px 0 #3b0a05; }
.fx-tyran .ty-n { font-family: var(--f-display); font-size: 26px; color: #f5dfae; }
.fx-tyran .ty-s { font-size: 17px; color: #e0c9c0; max-width: 560px; }
/* v1.9.11 : cliquable pour se fermer, et version fixe quand les animations sont réduites */
.fx-tyran { pointer-events: auto; cursor: pointer; }
.fx-tyran .ty-x { margin-top: 14px; font-size: 13px; color: rgba(245,223,174,.6); letter-spacing: .08em; }
.fx-tyran.still, .fx-tyran.still .ty-crown { animation: none; }
.fx-tyran.still.out { animation: none; opacity: 0; }
@media (max-width: 620px) { .fx-tyran .ty-t { font-size: 52px; } .fx-tyran .ty-n { font-size: 20px; } .fx-tyran .ty-s { font-size: 15px; } }
@keyframes tyIn { from { opacity: 0; } } @keyframes tyOut { to { opacity: 0; } }
@keyframes tyCrown { from { transform: scale(3) rotate(-30deg); opacity: 0; } }

/* marché */
.slot.can-buy { animation: canBuy 1.4s ease-in-out infinite; }
@keyframes canBuy { 0%, 100% { box-shadow: 0 0 0 2px rgba(241,212,136,.25); } 50% { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px 2px rgba(241,212,136,.55); } }

/* aperçu carte */
#cardTip { position: fixed; z-index: 75; pointer-events: none; width: 230px; filter: drop-shadow(0 16px 30px #000); }
#cardTip .card, #cardTip > * { width: 100%; }

/* tchat */
#chatBtn { position: relative; }
#chatBtn .badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #d9584a; color: #fff; font-size: 11.5px; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 700; }
#chatPanel { position: fixed; right: 16px; bottom: 16px; width: 330px; max-width: calc(100vw - 32px); height: 400px; max-height: 60vh; z-index: 60; display: flex; flex-direction: column; background: rgba(24,23,27,.97); border: 1px solid var(--gold-deep); border-radius: 14px; box-shadow: 0 20px 50px -16px #000; overflow: hidden; }
#chatPanel[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--f-display); }
#chatList { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.cmsg { font-size: 15px; line-height: 1.35; word-wrap: break-word; }
.chat-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-in input { flex: 1; min-width: 0; background: #16151a; border: 1px solid var(--line); color: var(--bone); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 15px; }

/* bug */
#bugModal { position: fixed; inset: 0; z-index: 100; }
#bugModal[hidden] { display: none; }
#bugModal .modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
#bugModal .modal { max-width: 520px; width: 100%; }
#bugModal textarea, #bugModal input { width: 100%; box-sizing: border-box; background: #16151a; border: 1px solid var(--line); color: var(--bone); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 15.5px; margin: 6px 0; resize: vertical; }

/* sons */
.music { display: flex; align-items: center; gap: 4px; }
.music input[type=range] { width: 70px; }
.music.battle .mtitle { color: #f2a79c; }

/* animations coupées */
body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
body.no-anim .flames, body.no-anim #amCv { display: none; }
body.no-anim #rcCv.on { opacity: .85; }
body.no-anim .slot.can-buy { box-shadow: 0 0 0 3px var(--gold-hi); }
@media (prefers-reduced-motion: reduce) { .flames { display: none; } }

/* v1.5 : grands écrans, on occupe les côtés de la carte (joueurs à gauche, chronique à droite) */
@media (min-width: 1280px) {
  #game { grid-template-columns: 250px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr) auto; }
  #game.no-right { grid-template-columns: 250px minmax(0, 1fr) 0; }
  header.bar { grid-column: 1 / -1; grid-row: 1; }
  aside.left { grid-column: 1; grid-row: 2; display: block; overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); border-bottom: 0; background: #17161a; }
  aside.left .section-title { display: block; }
  aside.left .opp { min-width: 0; margin: 0 0 8px; grid-template-columns: 50px 1fr; padding: 8px 9px; }
  aside.left .opp > img.portrait, aside.left .opp > .portrait { width: 50px; height: 50px; }
  aside.left .opp .ld { display: block; }
  aside.left .opp .st { gap: 6px 12px; }
  #board { grid-column: 2; grid-row: 2; }
  aside.right { grid-column: 3; grid-row: 2 / 4; }
  .mat { grid-column: 1 / 3; grid-row: 3; }
  #game.no-right .mat { grid-column: 1 / -1; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
  #game { grid-template-columns: 210px minmax(0, 1fr) 270px; } #game.no-right { grid-template-columns: 210px minmax(0, 1fr) 0; }
  aside.left .opp { grid-template-columns: 40px 1fr; } aside.left .opp > img.portrait, aside.left .opp > .portrait { width: 40px; height: 40px; }
}
header.bar { flex-wrap: wrap; row-gap: 4px; }
header.bar .phases { flex: 0 1 auto; min-width: 0; }
header.bar .music { flex: none; }
@media (max-width: 1760px) { header.bar .phases { order: 5; flex: 1 0 100%; margin-top: -2px; } header.bar .phase { padding: 3px 8px 3px 6px; } }
@media (max-width: 1300px) { header.bar .music input[type=range] { width: 48px; } header.bar .btn { font-size: 15px; padding: 5px 8px; } }

/* v1.5 : adaptation au format de la fenêtre */
@media (max-width: 1500px) {
  header.bar .phase:not(.on) .t { display: none; }
  header.bar .music .mtitle { display: none; }
  header.bar .music input[type=range] { width: 58px; }
}
.market-inner { grid-template-columns: 120px repeat(5, minmax(0, clamp(118px, 25vh, 190px))); }
@media (max-width: 1150px) { .market-inner { grid-template-columns: repeat(5, minmax(0, clamp(110px, 24vh, 170px))); } }
@media (max-height: 760px) {
  header.bar { padding: 4px 10px; }
  .mat { padding: 6px 12px; gap: 12px; }
  .me { grid-template-columns: 64px auto; } .me .pwrap, .me .pwrap .portrait { width: 64px; height: 68px; }
  .track { font-size: 14px; }
  .market { padding: 18px 12px 8px; } .market h3 { margin-bottom: 4px; font-size: 15px; }
}
@media (max-width: 700px) {
  #board { height: calc(100vw * 0.9); min-height: 300px; }
  .legend { font-size: 12px; gap: 6px; padding: 3px 7px; margin: -36px 0 6px 6px; }
  .legend img { display: none; }
  .market-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ucard .acts { flex-wrap: wrap; } .ucard .acts .btn { min-width: 0; white-space: normal; line-height: 1.1; }
@media (max-height: 760px), (max-width: 1400px) { .market .ucard .acts .btn { font-size: 12.5px; padding: 4px; } .market .ucard .txt { font-size: 12.5px; } }

/* bots */
.pname-box { display: flex; flex-direction: column; gap: 6px; }
.bot-toggle { font-size: 13.5px; padding: 4px 8px; }
.bot-toggle.on { border-color: #7fb0e8; color: #cfe3ff; background: rgba(90,140,210,.18); }
/* v1.8 : le bouton héritait de « border-radius: 50% » des pastilles de nombre et s'étirait en
   grande ellipse. On lui rend une forme de bouton, et on le sépare du groupe de chiffres. */
.count-pick .allbots { margin-left: auto; width: auto !important; height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-2, #4d4739); background: rgba(127,176,232,.10);
  color: #cfe3ff; font-family: var(--f-body, inherit); font-size: 14.5px; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.count-pick .allbots:hover { background: rgba(127,176,232,.20); border-color: #7fb0e8; }
@media (max-width: 560px) { .count-pick .allbots { margin-left: 0; width: 100% !important; justify-content: center; } }
.linkbtn { background: none; border: 0; color: var(--gold-hi); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.bot-think i { font-style: normal; animation: think 1.2s infinite; opacity: .2; } .bot-think i:nth-child(3) { animation-delay: .2s; } .bot-think i:nth-child(4) { animation-delay: .4s; }
@keyframes think { 50% { opacity: 1; } }

.modal.edouardc .ed-ledger { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2); }
.modal.edouardc .ed-ledger b { text-align: right; font-family: var(--f-num); }
.modal.edouardc .ed-ledger b.low { color: #e0a36a; }
.modal.edouardc .ed-ledger .coin { width: 12px; height: 12px; vertical-align: -1px; }

/* ---- attente d'un autre joueur : l'interface reste vivante ---- */
.wdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 0 currentColor; animation: wdot 1.8s ease-out infinite; }
@keyframes wdot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.wsec { font-size: 12.5px; color: var(--bone-dim); opacity: .75; margin-left: 6px; letter-spacing: .03em; }
.wbar { display: block; height: 3px; margin-top: 7px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.07); }
.wbar i { display: block; height: 100%; width: 34%; border-radius: 3px; opacity: .85; animation: wslide 2.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes wslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

.opp.thinking { position: relative; overflow: hidden; }
.opp > div { min-width: 0; }
.opp.thinking::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%); background-size: 260% 100%; animation: shimmer 2.6s linear infinite; }
@keyframes shimmer { 0% { background-position: 170% 0; } 100% { background-position: -70% 0; } }
.opp .thinking-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--pc); letter-spacing: .02em; white-space: nowrap; min-width: 0; }
.opp .thinking-row > span:first-of-type { margin-right: 2px; overflow: hidden; text-overflow: ellipsis; }
.opp .thinking-row .ic { flex: none; }
.opp .thinking-row .d { width: 4px; height: 4px; border-radius: 50%; background: var(--pc); opacity: .25; animation: think 1.2s infinite; }
.opp .thinking-row .d:nth-of-type(2) { animation-delay: .18s; } .opp .thinking-row .d:nth-of-type(3) { animation-delay: .36s; }

/* halo doux sous le pion du joueur actif pendant qu'on l'attend */
body.waiting #tokens .tk.cur .tki { animation: tokBob 2.6s ease-in-out infinite, curGlow 2.2s ease-in-out infinite; }
@keyframes curGlow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 7px var(--wc, #e2b448)); } }
/* liseré discret autour de la carte, à la couleur du joueur qu'on attend */
/* v1.9 : ce liseré « respirait » (opacité 0,10 → 0,34 en boucle) sur tout le pourtour de la carte
   pendant qu'on attendait un autre joueur. Cumulé aux bandeaux de phase, cela donnait une interface
   qui pulse. Il est désormais fixe : même information, plus aucun mouvement. */
body.waiting #boardWrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--wc, #e2b448); opacity: .22; }

@media (prefers-reduced-motion: reduce) {
  .wdot, .wbar i, .opp.thinking::after, .opp .thinking-row .d { animation: none; }
  body.waiting #tokens .tk.cur .tki { animation: none; }
}

/* v1.5 : un peu plus de vie dans l'interface */
.opp.active { animation: oppGlow 2.4s ease-in-out infinite; }
@keyframes oppGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px -2px var(--pc); } }
.opp { transition: transform .2s ease; } .opp:hover { transform: translateX(3px); }
.btn.primary.go:not(:disabled) { position: relative; overflow: hidden; }
.btn.primary.go:not(:disabled)::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.phase.on .n { animation: phasePulse 2s ease-in-out infinite; }
@keyframes phasePulse { 50% { box-shadow: 0 0 0 5px rgba(241,212,136,.25); } }
#tokens .tk.cur .tki { animation: tokBob 2.6s ease-in-out infinite; }
@keyframes tokBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
.mini { transition: transform .18s ease, box-shadow .18s ease; } .mini:hover { transform: translateY(-4px); box-shadow: 0 10px 18px -8px #000; }
@media (prefers-reduced-motion: reduce) { .opp.active, .btn.primary.go::after, .phase.on .n, #tokens .tk.cur .tki { animation: none; } }

/* icônes dessinées (remplacent les émojis) */
.ic { vertical-align: -0.16em; flex: none; }
.btn .ic, .track .lbl .ic, .opp .st .ic { vertical-align: -0.18em; }
#radial .rbtn b .ic { vertical-align: 0; }
.botmark { opacity: .7; }
.fx-toast .i .ic, .fx-pop .i .ic { vertical-align: 0; }

/* fin de partie, glossaire, deck */
.modal.endstats { max-width: 900px; }
.statwrap { overflow: auto; max-height: 56vh; margin: 8px 0; }
table.stats { width: 100%; border-collapse: collapse; font-size: 15px; }
table.stats th { position: sticky; top: 0; background: #23222a; text-align: right; padding: 6px 8px; font-weight: 600; color: var(--bone-dim); font-size: 13.5px; white-space: nowrap; }
table.stats th:first-child { text-align: left; }
table.stats td { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.07); text-align: right; }
table.stats td.who { text-align: left; font-weight: 700; display: flex; flex-direction: column; gap: 1px; }
table.stats td.who small { font-weight: 400; color: var(--bone-dim); font-size: 12.5px; }
table.stats td.who .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
table.stats tr.win { background: rgba(241,212,136,.12); box-shadow: inset 3px 0 0 var(--pc); }
table.stats tr.out { opacity: .55; }
.modal.gloss { max-width: 680px; } .glosswrap { max-height: 58vh; overflow: auto; padding-right: 6px; }
.gloss dl { margin: 6px 0; } .gloss dt { font-family: var(--f-display); color: var(--gold-hi); font-size: 17px; margin-top: 10px; }
.gloss dd { margin: 2px 0 0; color: var(--bone); font-size: 15.5px; line-height: 1.4; }
.modal.deckview { max-width: 760px; }
.deckcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 54vh; overflow: auto; }
.decklist { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.decklist li { display: flex; gap: 7px; align-items: baseline; font-size: 15px; border-left: 3px solid var(--line); padding: 3px 8px; background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0; }
.decklist li.el { border-left-color: #c9453a; } .decklist li.sp { border-left-color: var(--gold); }
.decklist li small { margin-left: auto; color: var(--bone-dim); font-size: 12.5px; white-space: nowrap; }
.hdr-speed .lbl { font-size: 14px; }
@media (max-width: 1400px) { .hdr-speed .lbl, #deckBtn .lbl { display: none; } }
@media (max-width: 700px) { .deckcols { grid-template-columns: 1fr; } }

/* didacticiel */
.tuto-opt { margin: 8px 0 2px; }
.tuto-check { display: inline-flex; align-items: center; gap: 7px; font-size: 15.5px; color: var(--bone-dim); cursor: pointer; }
.tuto-check input { accent-color: var(--gold); width: 16px; height: 16px; }
#tutoBox { position: fixed; right: 18px; bottom: 120px; width: 330px; max-width: calc(100vw - 32px); z-index: 78; background: linear-gradient(#262229, #1b1a1f); border: 1px solid var(--gold-deep); border-left: 4px solid var(--gold); border-radius: 12px; padding: 10px 13px 12px; box-shadow: 0 20px 44px -18px #000; animation: tutoIn .35s cubic-bezier(.2,1.3,.4,1); }
#tutoBox[hidden] { display: none; }
#tutoBox.left { right: auto; left: 18px; }
.tuto-head { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }
.tuto-head .muted { margin-left: auto; font-size: 13px; }
.tuto-head .btn { padding: 2px 6px; }
#tutoBox h4 { margin: 6px 0 4px; font-family: var(--f-display); font-size: 19px; color: var(--bone); }
#tutoBox p { margin: 0 0 9px; font-size: 15px; line-height: 1.42; color: var(--bone-dim); }
.tuto-acts { display: flex; gap: 8px; justify-content: flex-end; }
@keyframes tutoIn { from { opacity: 0; transform: translateY(12px); } }
.tuto-hi { position: relative; outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 10px; animation: tutoPulse 1.8s ease-in-out infinite; }
@keyframes tutoPulse { 50% { outline-color: rgba(241,212,136,.35); } }
@media (max-width: 900px) { #tutoBox { right: 10px; left: 10px; width: auto; bottom: 10px; } }
/* l'en-tête reste cliquable par-dessus les fenêtres (deck, glossaire, règles à tout moment) */
header.bar { position: relative; z-index: 96; }
/* v1.8 : le didacticiel passe au-dessus de tout (fenêtres, marché, effets) et reste cliquable. */
#tutoBox { z-index: 200; pointer-events: auto; }

/* téléphone : en-tête compact (icônes seules), marché plus dense */
@media (max-width: 820px) {
  header.bar { gap: 6px; padding: 5px 8px; }
  header.bar .btn { font-size: 0; padding: 5px 6px; }
  header.bar .btn .ic { width: 16px; height: 16px; }
  header.bar .btn .ic { margin: 0; }
  header.bar .music input[type=range], header.bar .music [data-mskip], header.bar .music .mtitle { display: none; }
  header.bar .round-chip { font-size: 13px; }
  header.bar .phases { order: 5; flex: 1 0 100%; }
  header.bar .phase { padding: 2px 6px; font-size: 14px; }
  .hdr-speed .lbl { display: none; }
  .market { padding: 10px 8px 6px; max-height: 64vh; overflow: auto; }
  .market h3 { font-size: 14px; }
  .market-inner { gap: 8px; }
  .market .ucard { border-width: 3px; padding: 4px 5px 5px; }
  .market .ucard .ribbon { font-size: 14px; }
  .market .ucard .txt, .market .ucard .acts .btn { font-size: 12px; }
  .modal { padding: 14px 14px 12px; }
  #tutoBox { max-height: 42vh; overflow: auto; }
}
@media (max-width: 700px) {
  .legend { position: static; float: none; margin: 6px 0 2px 4px; width: fit-content; }
  .board-tools { bottom: auto; }
}
/* phase de construction : les pions laissent passer le clic vers le territoire */
/* v1.8 : en phase de construction, seule la bannière de capitale et les icônes d'aménagement
   captaient encore le clic à la place du territoire - d'où le « SVG devant la construction ».
   On neutralise toute la couche, et on ne laisse que le maillet cliquable. */
#tokens.nohit { pointer-events: none; }
#tokens.nohit .mallet { pointer-events: auto; }
/* abandon : bouton discret mais visible, confirmation obligatoire */
.hdr-flag { opacity: .55; }
.hdr-flag:hover { opacity: 1; border-color: #a8453b; color: #f2a79c; }
.modal.surrender { max-width: 480px; border-color: #a8453b; }
.modal.surrender .btn.danger { background: linear-gradient(#a8352a, #6d1c14); border: 1px solid var(--gold); color: var(--gold-hi); font-weight: 700; }

/* v1.8 : cibles tactiles. Sur écran étroit, aucun contrôle cliquable ne descend sous 32 px. */
@media (max-width: 820px) {
  header.bar .btn, .setup-form .btn, .music button, .board-tools .btn { min-height: 34px; min-width: 34px; }
  .music input[type=range] { height: 32px; }
  .tuto-check input { width: 22px; height: 22px; }
  [data-swatch] { min-width: 34px; min-height: 34px; }
  [data-bot] { min-height: 34px; }
}

/* ---- v1.8 : accessibilité des commandes, issues de l'audit d'interface ---- */

/* La barre d'actions d'une fenêtre reste toujours atteignable : sur un écran bas, le bouton
   « Fermer » des Règles tombait sous le bord de l'écran. */
.modal .actions { position: sticky; bottom: -20px; z-index: 2; background: #212025; padding: 10px 0 0; margin-top: 10px; }
.modal.surrender .actions, .modal.edouardc .actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  /* Sur téléphone et tablette la mise en page s'empile et le bouton de phase - le plus utilisé du
     jeu - se retrouvait en bas d'une page défilante. Il est désormais ancré au bas de l'écran. */
  .cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: none;
         flex-direction: row; align-items: center; gap: 10px;
         background: rgba(28, 27, 31, .97); border-top: 1px solid var(--line); padding: 8px 12px;
         box-shadow: 0 -8px 20px -12px #000; }
  .cta .hint { flex: 1 1 auto; text-align: left; font-size: 13px; max-height: 40px; overflow: hidden; }
  .cta .go { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .mat { padding-bottom: 72px; }
}

@media (max-width: 820px) {
  /* cibles tactiles du marché */
  .market .ucard .acts .btn, .market.row1 .ucard .acts .btn { min-height: 34px; }
  .market h3 .btn { min-height: 34px; padding: 6px 12px; }
}

@media (max-width: 820px) {
  /* Les deux boutons d'une carte côte à côte tombaient à 22 px de large : on les empile pour
     qu'ils fassent toute la largeur de la carte. */
  .market .ucard .acts { flex-direction: column; gap: 4px; }
  .market .ucard .acts .btn { width: 100%; }
}
@media (max-width: 620px) {
  /* La consigne de phase tenait sur une ligne coupée : on lui laisse deux lignes au-dessus du bouton. */
  .cta { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px 10px; }
  .cta .hint { max-height: none; font-size: 12.5px; line-height: 1.3; text-align: left; }
  .mat { padding-bottom: 112px; }
}

/* v1.8 : la largeur du marché suivait son contenu. Sur tablette il tombait à 238 px pour un écran
   de 768, avec des cartes de 38 px et des boutons de 22. On l'ancre à la largeur du plateau. */
.market { width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  .market-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Les boutons de zoom remontent en haut du plateau : décalés de la hauteur du marché, ils
     finissaient par recouvrir une carte sur les écrans bas. */
  .board-tools { position: absolute; top: 8px; right: 8px; bottom: auto; margin: 0; z-index: 6; }
}

/* ==================== v1.8 : mise en page téléphone ====================
   Constat de l'essai sur 390×844 : l'en-tête occupait deux rangées, la barre des joueurs était
   coupée, la carte tombait à 366×275 pendant que le tapis en prenait 400, et le menu radial
   couvrait un tiers de la carte. On redonne la place à la carte. */
@media (max-width: 620px) {

  /* En-tête : une seule rangée qui défile, libellés masqués sur les boutons qui ont une icône. */
  header.bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 5px 8px;
               scrollbar-width: none; -ms-overflow-style: none; }
  header.bar::-webkit-scrollbar { display: none; }
  header.bar > * { flex: 0 0 auto; }
  header.bar .brand { display: none; }
  header.bar .btn { padding: 6px 9px; min-height: 36px; }
  header.bar #logBtn, header.bar #deckBtn, header.bar #glossBtn,
  header.bar #helpBtn, header.bar #newBtn { font-size: 0; gap: 0; }
  header.bar #logBtn svg, header.bar #deckBtn svg, header.bar #glossBtn svg,
  header.bar #helpBtn svg, header.bar #newBtn svg { width: 18px; height: 18px; }
  header.bar .phases { order: 0; flex: 0 0 auto; margin: 0; }
  header.bar .music input[type=range] { width: 44px; }

  /* Ordre des commandes : les plus utiles d'abord, l'ambiance et le signalement de bug à la fin.
     L'en-tête défile latéralement, autant que ce qui sert en jeu soit visible sans geste. */
  header.bar .round-chip { order: 0; }
  header.bar .phases { order: 1; }
  header.bar #logBtn { order: 2; }
  header.bar #helpBtn { order: 3; }
  header.bar #deckBtn { order: 4; }
  header.bar #glossBtn { order: 5; }
  header.bar #setBtn { order: 6; }
  header.bar #flagBtn { order: 7; }
  header.bar #newBtn { order: 9; }
  header.bar [data-music-slot] { order: 10; }
  header.bar #chatBtn { order: 12; }
  header.bar #bugBtn { order: 13; }

  /* Voile au bord droit : sans lui rien n'indique que l'en-tête continue. */
  #game::before { content: ''; position: fixed; top: 0; right: 0; width: 26px; height: 47px;
                  z-index: 97; pointer-events: none;
                  background: linear-gradient(to left, #18171a 30%, rgba(24, 23, 26, 0)); }

  /* Barre des joueurs : une rangée qui défile au doigt, une fiche par écran. */
  aside.left { display: flex; overflow-x: auto; gap: 8px; padding: 6px 8px;
               scroll-snap-type: x mandatory; scrollbar-width: none; }
  aside.left::-webkit-scrollbar { display: none; }
  aside.left .opp { flex: 0 0 86%; scroll-snap-align: center; margin: 0; min-width: 0; }
  aside.left .section-title { display: none; }

  /* La carte prend la moitié de l'écran. */
  #board { height: 52vh; }

  /* Tapis : les pistes passent en compteurs chiffrés, sans leurs rangées de cases. */
  .mat { grid-template-columns: 1fr; gap: 6px; padding: 6px 10px 0; }
  .me { grid-template-columns: 46px auto; gap: 10px; }
  .me .pwrap .portrait, .me .pwrap img { width: 46px; height: 46px; }
  .me .ribbon { font-size: 15px; padding: 2px 8px; }
  .me .purse { font-size: 15px; }
  .tracks { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .track { font-size: 13px; gap: 5px; }
  .track .boxes { display: none; }
  .track .lbl { display: inline-flex; align-items: center; gap: 4px; }
  .army { gap: 6px; }
  .army .mini { width: 78px; }

  /* Menu radial : boutons plus petits pour ne pas manger la carte. */
  #radial .rbtn { width: 50px; height: 50px; }
  #radial .rbtn b { font-size: 17px; }
  #radial .rbtn span { font-size: 9.5px; }
  #radial .rbtn.close { width: 34px; height: 34px; }

  /* La légende des terrains prend une rangée entière pour une information déjà lisible
     sur la carte et dans l'infobulle. */
  .legend { display: none; }

  /* Bandeau de phase : il recouvrait les cartes du marché. */
  .fx-banner { padding: 9px 0 8px; top: 14%; }
  .fx-banner b { font-size: 22px; }
  .fx-banner small { font-size: 11px; letter-spacing: .2em; }
}

/* v1.8 : fenêtre de réglages (style de carte, vitesse des bots, animations). */
.modal.settings .set-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--line); }
.modal.settings .set-row:first-of-type { border-top: 0; }
.modal.settings .set-lbl { flex: 1 1 190px; min-width: 0; }
.modal.settings .set-lbl b { display: block; font-size: 16px; color: var(--bone); }
.modal.settings .set-lbl small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.modal.settings .set-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.modal.settings .set-opts .btn { min-height: 38px; }
@media (max-width: 620px) { .modal.settings .set-row { gap: 8px; } .modal.settings .set-opts { width: 100%; } .modal.settings .set-opts .btn { flex: 1 1 auto; } }

.modal.settings .set-audio { display: flex; align-items: center; gap: 6px; }
.modal.settings .set-audio .mtitle { max-width: 170px; }

/* v1.8 : l'aide devient un vrai texte de règles - lisible, aéré, avec les valeurs de la partie. */
.modal.help { width: min(720px, 100%); }
.modal.help p { margin: 0 0 10px; line-height: 1.55; color: var(--bone-dim); }
.modal.help .section-title { margin-top: 18px; }
.modal.help .section-title:first-of-type { margin-top: 6px; }
.modal.help ul.rules-l, .modal.help ol.rules-l { margin: 0 0 12px; padding-left: 20px; color: var(--bone-dim); line-height: 1.55; }
.modal.help ul.rules-l li, .modal.help ol.rules-l li { margin-bottom: 6px; }
.modal.help b { color: var(--bone); }

/* v1.9.2 - licencier une unité, et la liste des pions d'une case surchargée */
.mini { position: relative; }
.mini-kill { position: absolute; right: 3px; top: 3px; z-index: 2; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(24,20,20,.88); border: 1px solid #a8453b; color: #f2a79c; cursor: pointer; }
.mini-kill:hover { background: #7a2c25; color: #fff; border-color: #f2a79c; }
#tokens .tmore { cursor: pointer; pointer-events: auto; }
#tokens .tmore:hover circle { fill: #33313a; stroke: #f1d488; }
.stacklist .pc-row:first-child { border-top: 0; }
.stacklist img { width: 44px; height: 44px; }

/* v1.9.2 - la zone de recrutement consultable depuis « Deck », et la fiche d'un adversaire */
.zonestrip { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.zcard { width: 104px; border-radius: 8px; overflow: hidden; border: 2px solid #cfa94e; background: var(--parch); color: var(--parch-ink); cursor: help; }
.zcard img { width: 100%; height: 62px; object-fit: cover; display: block; }
.zcard span { display: block; font-size: 12.5px; padding: 3px 5px; line-height: 1.15; }
.decklist li[data-key] { cursor: help; }
.decklist li[data-key]:hover { background: rgba(212,176,79,.12); border-radius: 6px; }
.opp[data-heroinfo] { cursor: pointer; }
.opp[data-heroinfo]:hover { border-color: var(--gold-deep); }
#tokens.nohit .tmore { pointer-events: auto; }

/* v1.9.2 - encart des Trébuchets dans la fenêtre d'assaut */
.treb-box { border: 1px solid #8a5a2b; background: rgba(60,38,18,.35); border-radius: 10px; padding: 9px 11px; margin: 10px 0 2px; }
.treb-box .treb-h { display: flex; align-items: center; gap: 7px; font-size: 15.5px; color: #f1d488; }
.treb-box p { margin: 4px 0 8px; font-size: 14px; line-height: 1.35; }
.treb-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.treb-opts .btn { display: inline-flex; align-items: center; gap: 6px; }
.treb-opts .btn img { height: 18px; }
#hoverTip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 0; }

/* Liens obligatoires vers les pages légales, depuis l'écran d'accueil du jeu. */
/* v1.9.9 - le bleu du bouton principal détonnait sur l'accueil, tout le reste du jeu étant
   à l'or et au parchemin. Le changement est limité à l'écran d'accueil et au salon. */
#setup .btn.primary { background: linear-gradient(#e3c274, #c19a3e); border-color: #8d6d25;
  color: #241a06; text-shadow: none; font-weight: 700; }
#setup .btn.primary:hover:not(:disabled) { background: linear-gradient(#f2dc9e, #cfa848); }

/* pied de page : trois paragraphes gris mangeaient la moitié de l'écran */
.setup-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07);
  display: grid; gap: 7px; max-width: 78ch; }
.setup-foot p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: none; }
.setup-foot b { color: var(--bone-dim); font-weight: 700; }
.setup-legal { margin-top: 4px; }
.ia-note { max-width: 1120px; width: 100%; margin: 44px auto -24px; padding: 12px 16px; border: 1px solid rgba(217,180,95,.45); border-left: 4px solid #d9b45f; border-radius: 6px; background: rgba(20,14,8,.82); color: var(--bone-dim); font-size: 14px; line-height: 1.5; }
.ia-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ia-note p { margin: 0; flex: 1 1 420px; }
.ia-note b { color: #e0c274; }
.ia-note .ia-maj { flex: none; text-decoration: none; }
.setup-legal a { color: #b9a77e; text-decoration: none; border-bottom: 1px solid rgba(185,167,126,.35); }
.setup-legal a:hover, .setup-legal a:focus-visible { color: #e0c274; border-bottom-color: currentColor; }
/* v1.9.11 - écran « Génération de la carte en cours » : hexagones qui se lèvent en vagues, rose des vents */
.gen-map { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(28,40,58,.985), rgba(8,8,12,.995) 72%); animation: genIn .35s ease both; }
.gen-map.fin { animation: genOut .45s ease forwards; }
.gen-scene { position: relative; width: min(560px, 100%); text-align: center; }
.gen-hex { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.gen-hex .gh { transform-box: fill-box; transform-origin: center; stroke: rgba(10,10,14,.55); stroke-width: 1.2; opacity: 0;
  animation: genHex 2.6s cubic-bezier(.2,1.3,.4,1) infinite; animation-delay: var(--d); }
.gen-hex .gh.t { stroke: rgba(241,212,136,.35); }
.gen-halo { position: absolute; left: 50%; top: 42%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(241,212,136,.5); animation: genHalo 1.6s ease-out infinite; pointer-events: none; }
.gen-rose { position: absolute; left: 50%; top: 42%; width: 118px; height: 118px; margin: -59px 0 0 -59px; animation: genRose 7s linear infinite; filter: drop-shadow(0 0 14px rgba(241,212,136,.45)); }
.gen-rose circle { fill: rgba(20,18,24,.55); stroke: #d9b45f; stroke-width: 1.6; }
.gen-rose circle.fine { fill: none; stroke-width: .7; stroke-dasharray: 2 3; }
.gen-rose circle.c { fill: #f1d488; stroke: none; }
.gen-rose path.a { fill: #f1d488; } .gen-rose path.b { fill: #9c7a2c; }
.gen-titre { margin: 18px 0 4px; font-family: var(--f-display); font-size: clamp(18px, 3.2vw, 24px); color: var(--gold-hi); letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.gen-etape { margin: 0; min-height: 1.4em; font-size: 14px; color: rgba(236,224,196,.72); letter-spacing: .12em; text-transform: uppercase; }
.gen-etape.in { animation: genEtape .5s ease both; }
@keyframes genIn { from { opacity: 0; } } @keyframes genOut { to { opacity: 0; transform: scale(1.04); } }
@keyframes genHex { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 18% { opacity: 1; transform: scale(1.06); } 26%, 72% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes genHalo { 0% { box-shadow: 0 0 0 0 rgba(241,212,136,.55); } 100% { box-shadow: 0 0 0 60px rgba(241,212,136,0); } }
@keyframes genRose { to { transform: rotate(360deg); } }
@keyframes genEtape { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .gen-hex .gh { animation: none; opacity: 1; } .gen-halo, .gen-rose, .gen-etape.in, .gen-map, .gen-map.fin { animation: none; } }
/* v1.9.11 : Espion joué depuis le panneau des joueurs */
.opp .spy-btn { margin-top: 6px; padding: 3px 8px; font-size: 12px; }
.spy-modal .spy-card { display: flex; justify-content: center; margin: 12px 0; }
.spy-modal .spy-card > * { max-width: 260px; }

/* =====================================================================================
   v1.9.12 - DIRECTION ARTISTIQUE « TABLE DE GUERRE » (choix du créateur, 27/09/2026)
   Le jeu se joue sur le bureau d'un stratège : plateau de bois sombre, sous-mains de cuir
   cousus, ferrures de laiton, sceaux de cire pour les actions décisives, feutre vert pour le
   marché. Tout est dessiné en CSS (dégradés + bruit SVG en ligne) : aucun fichier en plus.
   ===================================================================================== */
:root {
  --wood-1: #3b2616; --wood-2: #2a1a0f; --wood-3: #1a100a;
  --leather: #3d2a1c; --leather-2: #4b3322; --leather-edge: #1c120b;
  --stitch: rgba(232,196,128,.28);
  --brass-1: #f3d88f; --brass-2: #c99a42; --brass-3: #7a5a22;
  --brass: linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 48%, var(--brass-3) 100%);
  --wax-1: #b3322a; --wax-2: #6e1712;
  --felt-1: #20382b; --felt-2: #13241b;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0 0.04 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --panel: #2f2016; --panel-2: #3a281b; --line: #5a3f27;
}
body { background: var(--wood-3); }

/* --- le plateau de bois --- */
/* v1.9.13 : vraie texture de planches de noyer (assets/images/table-bois.jpg, 2048 × 1024, générée
   pour le jeu, raccord parfait sur les quatre bords), affichée à demi-taille pour rester nette. */
#game, #setup {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 35%, rgba(0,0,0,.5) 100%),
    url(../assets/images/table-bois.jpg) 0 0 / 1024px 512px repeat,
    var(--wood-2);
}
#setup::before { opacity: 0; }

/* --- la poutre du haut : bois clair verni, rivets de laiton --- */
header.bar {
  position: relative; border-bottom: 0;
  background: linear-gradient(180deg, rgba(255,210,150,.16), rgba(0,0,0,.25) 75%, rgba(0,0,0,.45)),
    url(../assets/images/table-bois.jpg) 0 -40px / 1024px 512px repeat-x, #3a2415;
  box-shadow: inset 0 1px 0 rgba(255,220,160,.18), 0 3px 0 var(--brass-3), 0 4px 0 #120b06, 0 10px 18px -6px rgba(0,0,0,.7);
  z-index: 4;
}
header.bar::before, header.bar::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--brass-2) 45%, var(--brass-3)); box-shadow: 0 1px 1px rgba(0,0,0,.7); }
header.bar::before { left: 6px; } header.bar::after { right: 6px; }
.brand { color: transparent; background: var(--brass); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }
.round-chip { color: #e9d3a3; }
.phase .n { border-color: var(--brass-3); }
.phase.on .n { background: var(--brass); border-color: var(--brass-1); color: #2a1a08; box-shadow: 0 0 10px rgba(241,212,136,.45); }
.phase.on { color: #fbeccb; }

/* --- sous-mains de cuir cousus --- */
aside, .mat {
  background:
    var(--noise),
    radial-gradient(ellipse at 30% 0%, rgba(255,210,150,.07), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--leather-2), var(--leather));
  background-size: 220px 220px, auto, auto;
}
aside.left { border-right: 0; box-shadow: inset -1px 0 0 var(--leather-edge), inset -7px 0 0 -6px var(--stitch), 6px 0 14px -8px rgba(0,0,0,.8); }
aside.right { border-left: 0; box-shadow: inset 1px 0 0 var(--leather-edge), inset 7px 0 0 -6px var(--stitch), -6px 0 14px -8px rgba(0,0,0,.8); }
.mat { border-top: 0; box-shadow: inset 0 1px 0 var(--leather-edge), inset 0 7px 0 -6px var(--stitch), 0 -6px 14px -8px rgba(0,0,0,.8); }
.section-title { color: transparent; background: var(--brass); -webkit-background-clip: text; background-clip: text; letter-spacing: .18em; }
.section-title::after { content: ''; display: block; height: 1px; margin-top: 5px; background: linear-gradient(90deg, rgba(201,154,66,.7), rgba(201,154,66,0)); }

/* --- fiches des joueurs : étiquettes de cuir à coin de laiton --- */
.opp { position: relative; background: linear-gradient(180deg, #4a3221, #36241a); border: 1px solid #1d130c; border-left: 5px solid var(--pc);
  box-shadow: inset 0 1px 0 rgba(255,220,170,.12), inset 0 0 0 1px rgba(0,0,0,.25), 0 6px 12px -8px #000; }
.opp::after { content: ''; position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c0, var(--brass-2) 50%, var(--brass-3)); }
.opp.active { background: linear-gradient(180deg, #5a3d27, #3f2a1c); border-color: #1d130c; border-left-color: var(--pc);
  box-shadow: 0 0 0 1px var(--brass-2), 0 0 18px -4px rgba(241,212,136,.55), inset 0 1px 0 rgba(255,220,170,.18); }
.opp .ld { color: #b8a07a; }
.box { background: linear-gradient(180deg, rgba(255,230,190,.05), rgba(0,0,0,.12)); border: 1px solid #1d130c; box-shadow: inset 0 0 0 1px rgba(232,196,128,.10); }

/* --- la carte : un parchemin épinglé, cadre de bois et coins de laiton --- */
#board { background: transparent; }
#boardWrap { box-shadow: 0 0 0 3px #1a0f08, 0 0 0 6px var(--brass-3), 0 0 0 7px #120a05, 0 26px 50px -18px rgba(0,0,0,.95); border-radius: 2px; }
#boardWrap::before, #boardWrap::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: 7; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6d0, var(--brass-2) 45%, var(--brass-3) 80%); box-shadow: 0 2px 3px rgba(0,0,0,.8); }
#boardWrap::before { left: -8px; top: -8px; } #boardWrap::after { right: -8px; bottom: -8px; }
.legend, .board-tools .btn { background: rgba(38,25,16,.92); border-color: #6b4c2a; }

/* --- le marché : un tapis de feutre vert --- */
.market { background:
    linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 40%),
    var(--noise), linear-gradient(180deg, var(--felt-1), var(--felt-2));
  background-size: auto, 220px 220px, auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.market h3 { color: #f1dca8; text-shadow: 0 1px 0 #000; }

/* --- boutons : bois et laiton ; les actions décisives portent un sceau de cire --- */
.btn { background: linear-gradient(180deg, #4a3221, #33221700); background-color: #33231a; border: 1px solid #6b4c2a; color: #f1e1bd;
  box-shadow: inset 0 1px 0 rgba(255,225,170,.14), 0 2px 0 #140c07; }
.btn:hover:not(:disabled) { background-color: #432e20; border-color: var(--brass-2); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.primary, #setup .btn.primary { background: radial-gradient(ellipse at 40% 30%, var(--wax-1), var(--wax-2) 75%); color: #ffe9b8; border: 1px solid #3d0c09;
  box-shadow: inset 0 1px 0 rgba(255,200,170,.25), inset 0 -3px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(201,154,66,.55), 0 4px 10px -4px #000; text-shadow: 0 1px 0 #3d0c09; }
.btn.primary:hover:not(:disabled), #setup .btn.primary:hover:not(:disabled) { background: radial-gradient(ellipse at 40% 30%, #c93b31, #7d1b15 75%); color: #fff4d6; box-shadow: inset 0 1px 0 rgba(255,200,170,.3), 0 0 0 2px var(--brass-1), 0 0 16px -2px rgba(201,59,49,.6); }
.btn.gold { background: var(--brass); color: #2a1a08; border-color: #fff0bd; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #3d2a0c; }
.btn.danger { border-color: #8a3a2c; color: #ffcdbf; }

/* --- fenêtres : un dossier de cuir à coins de laiton --- */
.modal { background: var(--noise), linear-gradient(180deg, #4a3222, #2f2016); background-size: 220px 220px, auto;
  border: 1px solid #140c07; box-shadow: 0 0 0 2px var(--brass-3), inset 0 0 0 6px rgba(0,0,0,.18), inset 0 0 0 7px var(--stitch), 0 40px 80px -24px #000; position: relative; }
.modal h2 { color: transparent; background: var(--brass); -webkit-background-clip: text; background-clip: text; }
.modal h2 svg, .modal h2 img { color: var(--brass-1); }
/* v1.9.13 : la barre d'actions collante gardait le fond gris des anciennes fenêtres (#212025) */
.modal .actions { background: linear-gradient(to bottom, rgba(47,32,22,0), #2f2016 12px); }

/* --- accueil : un grimoire relié posé sur la table --- */
.cover { background-image: var(--noise), linear-gradient(160deg, #5a3a24, #2e1d12 70%), linear-gradient(160deg, #6d5a2c, #d9b45f 45%, #5b4a24); background-size: 220px 220px, auto, auto;
  box-shadow: 0 30px 60px -24px #000, inset 0 0 0 10px rgba(0,0,0,.18), inset 0 0 0 11px var(--stitch); }
.mode-card { background: var(--noise), linear-gradient(180deg, #4a3222, #33231a); background-size: 220px 220px, auto; border: 1px solid #1a110a;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.14), inset 0 0 0 6px var(--stitch), 0 16px 30px -18px #000; }
.mode-card:hover { box-shadow: inset 0 0 0 5px rgba(0,0,0,.14), inset 0 0 0 6px rgba(241,212,136,.5), 0 0 0 1px var(--brass-2), 0 20px 34px -18px #000; }
.setup-form h2 { color: #f6e8c6; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.setup-form .eyebrow { color: var(--brass-2); }
.prow { background: linear-gradient(180deg, #43301f, #30211a); border-color: #1d130c; box-shadow: inset 0 0 0 1px rgba(232,196,128,.08); }

/* --- catalogue de l'accueil --- */
.catalog { position: relative; max-width: 1120px; width: 100%; margin: 44px auto 0; padding: 26px 26px 30px;
  background: var(--noise), linear-gradient(180deg, var(--felt-1), var(--felt-2)); background-size: 220px 220px, auto;
  border-radius: 6px; box-shadow: 0 0 0 3px #1a0f08, 0 0 0 5px var(--brass-3), 0 30px 60px -28px #000, inset 0 0 60px rgba(0,0,0,.45); }
.cat-head { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 22px; margin-bottom: 18px; }
.cat-head h2 { margin: 0; font-family: var(--f-display); font-size: 28px; color: transparent; background: var(--brass); -webkit-background-clip: text; background-clip: text; }
.cat-head p { margin: 0; color: #cfe0cf; flex: 1 1 280px; font-size: 16px; }
.cat-tabs { display: flex; gap: 6px; }
.cat-tab { border: 1px solid #6b4c2a; background: #2a1c12; color: #f1e1bd; padding: 7px 14px; border-radius: 6px 6px 2px 2px; font-family: var(--f-display); font-size: 15px; }
.cat-tab b { font-family: var(--f-num); font-size: 13px; opacity: .75; margin-left: 4px; }
.cat-tab.on { background: var(--brass); color: #2a1a08; border-color: #fff0bd; }
.cat-filters { display: flex; gap: 6px; margin: 0 0 14px; }
.cat-filters .chip { border: 1px solid rgba(232,196,128,.35); background: rgba(0,0,0,.25); color: #e9dcc0; padding: 4px 12px; border-radius: 999px; font-size: 14px; }
.cat-filters .chip.on { background: rgba(201,154,66,.25); border-color: var(--brass-1); color: #fff2cf; }
.cat-grid.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; }
.cat-grid.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cat-grid .ucard, .cat-grid .hero { transition: transform .18s ease, box-shadow .18s ease; }
.cat-grid .ucard:hover, .cat-grid .hero:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 30px -14px #000; }
@media (max-width: 620px) { .catalog { padding: 18px 14px 22px; margin-top: 28px; } .ia-note { margin: 28px auto -12px; } .cat-grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .cat-grid .ucard, .cat-grid .hero { transition: none; } }
@media (max-width: 620px) { header.bar::before, header.bar::after { display: none; } }

/* v1.9.13 - derniers fonds gris hérités de l'ancien thème : panneaux, menus contextuels, bulles */
aside.left, aside.right {
  background: var(--noise), radial-gradient(ellipse at 30% 0%, rgba(255,210,150,.07), rgba(0,0,0,0) 60%), linear-gradient(180deg, var(--leather-2), var(--leather));
  background-size: 220px 220px, auto, auto;
}
.popover, #chatPanel, #hoverTip {
  background: var(--noise), linear-gradient(180deg, rgba(74,50,34,.98), rgba(47,32,22,.98));
  background-size: 220px 220px, auto;
  border: 1px solid #140c07; box-shadow: 0 0 0 1px var(--brass-3), inset 0 0 0 4px rgba(0,0,0,.14), inset 0 0 0 5px var(--stitch), 0 24px 50px -16px #000;
}
.fx-toast { background: rgba(47,32,22,.95); border-color: #6b4c2a; }
.fx-toast.bad { background: rgba(70,24,18,.95); }
.btn.undo { background: #33231a; border-color: #8a6a3a; color: #f1e1bd; }
table.stats th { background: #3a281b; }
.ucard .art.none { background: #2a1c12; }
#radial .rbtn { background: radial-gradient(circle at 40% 30%, #5e4029, #2a1b11); border-color: var(--brass-2); }
.mode-card input, .linkbox input, .seat input, .prow input, #chatInput, .join-row input { background: #1f140c; border-color: #6b4c2a; color: #f1e1bd; }

/* v1.9.14 - bulles de pions groupées par joueur et fenêtre de détail au survol */
#tokens.nohit .tk { pointer-events: auto; }
#pileTip { position: fixed; z-index: 76; pointer-events: none; max-width: min(640px, calc(100vw - 16px)); padding: 10px 12px 12px; border-radius: 12px;
  background: linear-gradient(#2a221a, #1d1812); border: 1px solid #6b5530; box-shadow: inset 0 1px 0 #ffffff14, 0 18px 36px -14px #000; }
#pileTip .pt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--bone-dim); }
#pileTip .pt-h b { font-family: var(--f-display); font-size: 17px; color: var(--bone); }
#pileTip .pt-h em { margin-left: auto; font-style: normal; font-weight: 700; color: #f3d6cf; background: #7d2a24; border: 1px solid #c8413a; border-radius: 99px; padding: 1px 8px; display: inline-flex; align-items: center; gap: 4px; }
#pileTip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px #0006; }
#pileTip .pt-c { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
#pileTip .pc { width: 230px; zoom: .6; position: relative; }
#pileTip .pc.hero-c { width: 330px; }
#pileTip .pc-etat { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; font-size: 17px; background: #1d1812; color: var(--bone); border: 1px solid #6b5530; border-radius: 99px; padding: 1px 10px; }
#pileTip .pc:has(.pc-etat) { margin-bottom: 12px; }
.cat-card { position: relative; }
.cat-card .ucard { height: 100%; }
.cat-card .cat-x { position: absolute; top: -8px; right: -6px; z-index: 2; min-width: 30px; padding: 2px 7px; border-radius: 99px; text-align: center;
  font: 700 14px/1.2 var(--f-display); color: #2a1f10; background: linear-gradient(#f3dc9a, #c89b45); border: 1px solid #6b5530; box-shadow: 0 3px 8px -3px #000; }
/* v1.9.15 - revenu net par tour sur les bannières des joueurs */
.opp .st .rev { font-size: 11px; font-weight: 500; opacity: .55; margin-left: 3px; letter-spacing: 0; }

/* ---------- v1.9.15 - Chausse-trapes : démineur pendant le tour des autres ---------- */
.minijeu { background: var(--leather, #2a1f16); border: 1px solid rgba(212,176,79,.28); border-radius: 10px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px -12px #000; }
.minijeu[hidden] { display: none; }
.mj-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mj-titre { font-family: var(--f-display); font-size: 15px; letter-spacing: .06em; color: #e9d7a6; }
.mj-niveau { background: #1b150f; color: #e9d7a6; border: 1px solid rgba(212,176,79,.35); border-radius: 6px; font: inherit; font-size: 12.5px; padding: 2px 4px; }
.mj-barre { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bone-dim, #c9bda2); }
.mj-barre b { color: #f1e4c2; font-variant-numeric: tabular-nums; }
.mj-barre .ic { vertical-align: -2px; }
.mj-barre button { margin-left: auto; background: #1b150f; color: #e9d7a6; border: 1px solid rgba(212,176,79,.35); border-radius: 6px; width: 28px; height: 26px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.mj-barre button + button { margin-left: 0; }
.mj-barre button.on { background: #7d2a24; border-color: #c8413a; color: #fff; }
.mj-grille { display: grid; grid-template-columns: repeat(var(--l), minmax(0, 1fr)); gap: 2px; background: #1a130c; padding: 3px; border-radius: 6px; }
.mj-c { aspect-ratio: 1; min-width: 0; border: 0; border-radius: 3px; padding: 0; cursor: pointer; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 14px; line-height: 1;
  background: linear-gradient(160deg, #6f7f3c, #4d5a2a); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.28); color: #f1e4c2; }
.mj-c:hover { filter: brightness(1.14); }
.mj-c:focus-visible { outline: 2px solid #f1d488; outline-offset: 1px; }
.mj-c.vue, .mj-c.piege { background: #e6d6ad; box-shadow: inset 0 0 0 1px rgba(90,64,30,.18); cursor: default; filter: none; }
.mj-c.vue.n0 { background: #d8c595; }
.mj-c.n1 { color: #2d4f8e; } .mj-c.n2 { color: #2f6128; } .mj-c.n3 { color: #9a2d24; } .mj-c.n4 { color: #4b2a6e; }
.mj-c.n5 { color: #7a3b10; } .mj-c.n6 { color: #1f6a6a; } .mj-c.n7 { color: #1e1810; } .mj-c.n8 { color: #5a5048; }
.mj-c.piege { color: #1e1810; }
.mj-c.piege.fatal { background: #b8463c; color: #fff; }
.mj-c.ban { color: #f1d488; }
.mj-c.ban.faux { background: linear-gradient(160deg, #6a4a3a, #4a3326); }
.mj-pied { font-size: 12.5px; line-height: 1.35; color: var(--bone-dim, #c9bda2); min-height: 2.7em; }
.mj-pied b { color: #f1e4c2; }
.mj-rejouer { margin-left: 4px; background: #7d2a24; color: #fff; border: 1px solid #c8413a; border-radius: 6px; font: inherit; font-size: 12px; padding: 1px 8px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mj-c:hover { filter: none; } }
/* v1.9.15 - main réduite : une seule ligne (bouton à gauche, noms des cartes à droite) pour que le plateau garde sa taille */
.market.compact { display: flex; align-items: center; gap: 10px; padding: 5px 12px; -webkit-mask-image: none; mask-image: none; }
.market.compact h3 { margin: 0; flex: none; font-size: 12px; }
.market.compact h3 .mk-t { display: none; }
.market.compact .market-inner { flex: 1; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.market.compact .deckpile { display: none; }

/* =====================================================================================
   v1.9.15 - HABILLAGES (choix du créateur, 29/09/2026) : « Encre et braise » par défaut,
   « Feutre et or » au choix par un bouton. L'ancien bois et cuir reste en dessous, remplacé ici.
   Les couleurs passent par des variables --t-* ; l'attribut data-theme est posé sur <html>.
   ===================================================================================== */
html[data-theme="braise"] { --t-bg: #111013; --t-table: #121114; --t-bar: #141316; --t-surf: #18171b; --t-surf2: #201f24; --t-surf3: #28262d; --t-line: #2e2c33; --t-btn-line: #3a3740; --t-text: #f0ebe3; --t-dim: #a39d95; --t-title: #f5efe6; --t-acc: #e0693a; --t-acc2: #f08457; --t-on-acc: #1a0d06; --t-acc-line: rgba(224,105,58,.55); --t-acc-glow: rgba(224,105,58,.7); --t-frame: #3a3740; --t-glass: rgba(17,16,19,.88); --t-market: #18171b; --t-modal: #1b1a1f; --t-input: #141316; --bone: #f0ebe3; --bone-dim: #a39d95; --muted: #8a847d; --panel: #18171b; --panel-2: #201f24; --line: #2e2c33 }
html[data-theme="feutre"] { --t-bg: #0d1513; --t-table: radial-gradient(ellipse at 50% 35%, #183229 0%, #0f1c18 55%, #0b1210 100%); --t-bar: #0f1917; --t-surf: #14201c; --t-surf2: #1a2924; --t-surf3: #20342d; --t-line: rgba(214,178,94,.20); --t-btn-line: rgba(214,178,94,.35); --t-text: #eee6d2; --t-dim: #a9b3a6; --t-title: #f0cf7f; --t-acc: #d6ae52; --t-acc2: #f0cf7f; --t-on-acc: #1b1407; --t-acc-line: rgba(214,178,94,.55); --t-acc-glow: rgba(214,174,82,.6); --t-frame: #d6ae52; --t-glass: rgba(13,21,19,.9); --t-market: #173427; --t-modal: #15231e; --t-input: #0f1917; --bone: #eee6d2; --bone-dim: #a9b3a6; --muted: #8c978b; --panel: #14201c; --panel-2: #1a2924; --line: rgba(214,178,94,.20) }
html[data-theme="braise"] body, html[data-theme="feutre"] body {background: var(--t-bg); }
html[data-theme="braise"] #game, html[data-theme="feutre"] #game, html[data-theme="braise"] #setup, html[data-theme="feutre"] #setup {background: var(--t-table); }
html[data-theme="braise"] header.bar, html[data-theme="feutre"] header.bar {background: var(--t-bar); box-shadow: 0 1px 0 var(--t-line); }
html[data-theme="braise"] header.bar::before, html[data-theme="feutre"] header.bar::before, html[data-theme="braise"] header.bar::after, html[data-theme="feutre"] header.bar::after, html[data-theme="braise"] #boardWrap::before, html[data-theme="feutre"] #boardWrap::before, html[data-theme="braise"] #boardWrap::after, html[data-theme="feutre"] #boardWrap::after, html[data-theme="braise"] .opp::after, html[data-theme="feutre"] .opp::after {display: none; }
html[data-theme="braise"] .brand, html[data-theme="feutre"] .brand, html[data-theme="braise"] .modal h2, html[data-theme="feutre"] .modal h2, html[data-theme="braise"] .cat-head h2, html[data-theme="feutre"] .cat-head h2 {background: none; color: var(--t-title); -webkit-text-fill-color: currentColor; }
html[data-theme="braise"] .section-title, html[data-theme="feutre"] .section-title {background: none; color: var(--t-dim); -webkit-text-fill-color: currentColor; }
html[data-theme="braise"] .section-title::after, html[data-theme="feutre"] .section-title::after {background: var(--t-line); }
html[data-theme="braise"] .round-chip, html[data-theme="feutre"] .round-chip {color: var(--t-dim); }
html[data-theme="braise"] aside, html[data-theme="feutre"] aside, html[data-theme="braise"] aside.left, html[data-theme="feutre"] aside.left, html[data-theme="braise"] aside.right, html[data-theme="feutre"] aside.right, html[data-theme="braise"] .mat, html[data-theme="feutre"] .mat {background: var(--t-surf); box-shadow: none; }
html[data-theme="braise"] aside.left, html[data-theme="feutre"] aside.left {border-right: 1px solid var(--t-line); }
html[data-theme="braise"] aside.right, html[data-theme="feutre"] aside.right {border-left: 1px solid var(--t-line); }
html[data-theme="braise"] .mat, html[data-theme="feutre"] .mat {border-top: 1px solid var(--t-line); }
html[data-theme="braise"] .opp, html[data-theme="feutre"] .opp {background: var(--t-surf2); border: 1px solid var(--t-line); border-left: 4px solid var(--pc); box-shadow: none; }
html[data-theme="braise"] .opp.active, html[data-theme="feutre"] .opp.active {background: var(--t-surf3); border-color: var(--t-acc-line); border-left-color: var(--pc); box-shadow: 0 0 0 1px var(--t-acc-line); animation: none; }
html[data-theme="braise"] .opp .ld, html[data-theme="feutre"] .opp .ld {color: var(--t-dim); }
html[data-theme="braise"] .box, html[data-theme="feutre"] .box, html[data-theme="braise"] .minijeu, html[data-theme="feutre"] .minijeu {background: var(--t-surf2); border: 1px solid var(--t-line); box-shadow: none; }
html[data-theme="braise"] #boardWrap, html[data-theme="feutre"] #boardWrap {box-shadow: 0 0 0 1px var(--t-frame), 0 30px 60px -24px #000; }
html[data-theme="braise"] .legend, html[data-theme="feutre"] .legend, html[data-theme="braise"] .board-tools .btn, html[data-theme="feutre"] .board-tools .btn {background: var(--t-glass); border-color: var(--t-line); }
html[data-theme="braise"] .market, html[data-theme="feutre"] .market {background: linear-gradient(180deg, transparent, var(--t-market) 26px); -webkit-mask-image: none; mask-image: none; }
html[data-theme="braise"] .market.compact, html[data-theme="feutre"] .market.compact {background: var(--t-market); }
html[data-theme="braise"] .market h3, html[data-theme="feutre"] .market h3 {color: var(--t-text); text-shadow: none; }
html[data-theme="braise"] .btn, html[data-theme="feutre"] .btn {background: var(--t-surf2); border: 1px solid var(--t-btn-line); color: var(--t-text); box-shadow: none; text-shadow: none; }
html[data-theme="braise"] .btn:hover:not(:disabled), html[data-theme="feutre"] .btn:hover:not(:disabled) {background-color: var(--t-surf3); border-color: var(--t-acc-line); }
html[data-theme="braise"] .btn.ghost, html[data-theme="feutre"] .btn.ghost {background: transparent; border-color: transparent; }
html[data-theme="braise"] .btn.ghost:hover:not(:disabled), html[data-theme="feutre"] .btn.ghost:hover:not(:disabled) {background: var(--t-surf2); }
html[data-theme="braise"] .btn.primary, html[data-theme="feutre"] .btn.primary, html[data-theme="braise"] #setup .btn.primary, html[data-theme="feutre"] #setup .btn.primary {background: var(--t-acc); color: var(--t-on-acc); border: 1px solid var(--t-acc2); box-shadow: 0 6px 18px -8px var(--t-acc-glow); text-shadow: none; }
html[data-theme="braise"] .btn.primary:hover:not(:disabled), html[data-theme="feutre"] .btn.primary:hover:not(:disabled), html[data-theme="braise"] #setup .btn.primary:hover:not(:disabled), html[data-theme="feutre"] #setup .btn.primary:hover:not(:disabled) {background: var(--t-acc2); color: var(--t-on-acc); box-shadow: 0 8px 22px -8px var(--t-acc-glow); }
html[data-theme="braise"] .btn.gold, html[data-theme="feutre"] .btn.gold, html[data-theme="braise"] .cat-tab.on, html[data-theme="feutre"] .cat-tab.on {background: var(--t-acc); color: var(--t-on-acc); border-color: var(--t-acc2); box-shadow: none; }
html[data-theme="braise"] .btn.undo, html[data-theme="feutre"] .btn.undo {background: var(--t-surf2); border-color: var(--t-btn-line); color: var(--t-text); }
html[data-theme="braise"] .modal, html[data-theme="feutre"] .modal, html[data-theme="braise"] .popover, html[data-theme="feutre"] .popover, html[data-theme="braise"] #hoverTip, html[data-theme="feutre"] #hoverTip, html[data-theme="braise"] #pileTip, html[data-theme="feutre"] #pileTip, html[data-theme="braise"] #chatPanel, html[data-theme="feutre"] #chatPanel {background: var(--t-modal); border: 1px solid var(--t-line); box-shadow: 0 30px 70px -24px #000; }
html[data-theme="braise"] .modal .actions, html[data-theme="feutre"] .modal .actions {background: linear-gradient(to bottom, transparent, var(--t-modal) 12px); }
html[data-theme="braise"] .fx-toast, html[data-theme="feutre"] .fx-toast {background: var(--t-modal); border-color: var(--t-line); }
html[data-theme="braise"] .phase .n, html[data-theme="feutre"] .phase .n {border-color: var(--t-btn-line); }
html[data-theme="braise"] .phase.on .n, html[data-theme="feutre"] .phase.on .n {background: var(--t-acc); border-color: var(--t-acc2); color: var(--t-on-acc); box-shadow: none; }
html[data-theme="braise"] .phase.on, html[data-theme="feutre"] .phase.on {color: var(--t-text); }
html[data-theme="braise"] #radial .rbtn, html[data-theme="feutre"] #radial .rbtn {background: var(--t-surf2); border-color: var(--t-acc-line); }
html[data-theme="braise"] table.stats th, html[data-theme="feutre"] table.stats th {background: var(--t-surf3); }
html[data-theme="braise"] .ucard .art.none, html[data-theme="feutre"] .ucard .art.none {background: var(--t-surf3); }
html[data-theme="braise"] .cover, html[data-theme="feutre"] .cover {background: var(--t-surf2); box-shadow: 0 30px 60px -24px #000, inset 0 0 0 1px var(--t-line); }
html[data-theme="braise"] .mode-card, html[data-theme="feutre"] .mode-card {background: var(--t-surf); border: 1px solid var(--t-line); box-shadow: 0 16px 30px -18px #000; }
html[data-theme="braise"] .mode-card:hover, html[data-theme="feutre"] .mode-card:hover {box-shadow: 0 0 0 1px var(--t-acc-line), 0 20px 34px -18px #000; }
html[data-theme="braise"] .prow, html[data-theme="feutre"] .prow {background: var(--t-surf2); border-color: var(--t-line); box-shadow: none; }
html[data-theme="braise"] .mode-card input, html[data-theme="feutre"] .mode-card input, html[data-theme="braise"] .linkbox input, html[data-theme="feutre"] .linkbox input, html[data-theme="braise"] .seat input, html[data-theme="feutre"] .seat input, html[data-theme="braise"] .prow input, html[data-theme="feutre"] .prow input, html[data-theme="braise"] #chatInput, html[data-theme="feutre"] #chatInput, html[data-theme="braise"] .join-row input, html[data-theme="feutre"] .join-row input {background: var(--t-input); border-color: var(--t-btn-line); color: var(--t-text); }
html[data-theme="braise"] .setup-form h2, html[data-theme="feutre"] .setup-form h2 {color: var(--t-title); text-shadow: none; }
html[data-theme="braise"] .setup-form .eyebrow, html[data-theme="feutre"] .setup-form .eyebrow {color: var(--t-dim); }
html[data-theme="braise"] .catalog, html[data-theme="feutre"] .catalog {background: var(--t-surf); box-shadow: 0 0 0 1px var(--t-line), 0 30px 60px -28px #000; }
html[data-theme="braise"] .cat-head p, html[data-theme="feutre"] .cat-head p {color: var(--t-dim); }
html[data-theme="braise"] .cat-tab, html[data-theme="feutre"] .cat-tab {background: var(--t-surf2); border-color: var(--t-btn-line); color: var(--t-text); }
html[data-theme="braise"] .cat-filters .chip, html[data-theme="feutre"] .cat-filters .chip {border-color: var(--t-btn-line); background: transparent; color: var(--t-text); }
html[data-theme="braise"] .cat-filters .chip.on, html[data-theme="feutre"] .cat-filters .chip.on {background: var(--t-surf3); border-color: var(--t-acc-line); }
html[data-theme="braise"] .mj-titre, html[data-theme="feutre"] .mj-titre {color: var(--t-title); }
html[data-theme="braise"] .mj-niveau, html[data-theme="feutre"] .mj-niveau, html[data-theme="braise"] .mj-barre button, html[data-theme="feutre"] .mj-barre button {background: var(--t-input); border-color: var(--t-btn-line); color: var(--t-text); }
html[data-theme="braise"] .mj-barre button.on, html[data-theme="feutre"] .mj-barre button.on, html[data-theme="braise"] .mj-rejouer, html[data-theme="feutre"] .mj-rejouer {background: var(--t-acc); border-color: var(--t-acc2); color: var(--t-on-acc); }
/* bouton d'habillage sur l'accueil : sous la barre de musique */
.setup-theme { position: absolute; top: 56px; right: 16px; z-index: 5; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; gap: 6px; background: var(--t-surf2, rgba(22,21,24,.85)); border: 1px solid var(--t-btn-line, var(--line)); }
@media (max-width: 620px) { .setup-theme { top: auto; bottom: 14px; } }
html[data-theme] .setup-music { background: var(--t-surf2); border-color: var(--t-line); }
/* v1.9.15 - écrans moyens (bandeau des joueurs en haut) : les fiches se partagent la largeur au lieu de
   déborder à droite ; le revenu par tour les avait élargies et la dernière était coupée */
@media (min-width: 901px) and (max-width: 1279px) {
  aside.left .opp { flex: 1 1 190px; min-width: 170px; }
  aside.left .opp .st { gap: 2px 8px; font-size: 14px; }
}

/* ---------- v1.9.16 - coin des mini-jeux : onglets et six jeux de plus ---------- */
.mj-onglets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: -2px -2px 2px; }
.mj-onglet { height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--t-dim, #c9bda2); }
.mj-onglet:hover { background: var(--t-surf3, rgba(255,255,255,.06)); color: var(--t-text, #f1e4c2); }
.mj-onglet.on { background: var(--t-acc, #b8463c); border-color: var(--t-acc2, #c8413a); color: var(--t-on-acc, #fff); }
.mj-onglet:focus-visible { outline: 2px solid var(--t-acc2, #f1d488); outline-offset: 1px; }
.mj-zone { display: flex; flex-direction: column; gap: 8px; }
.mj-bilan { opacity: .75; white-space: nowrap; }
.mj-barre button:disabled { opacity: .4; cursor: default; }

/* Moulin */
.mj-moulin { width: 100%; max-width: 230px; align-self: center; display: block; background: #d9c79c; border-radius: 6px; box-shadow: inset 0 0 0 2px #7a5a2b; }
.mj-moulin .ml-l { fill: none; stroke: #5a3f1e; stroke-width: 2.2; }
.mj-moulin .ml-pt { cursor: pointer; }
.mj-moulin .ml-zone { fill: transparent; }
.mj-moulin .ml-trou { fill: #5a3f1e; }
.mj-moulin .ml-pt.cible .ml-trou { fill: #2f6128; r: 5.5; }
.mj-moulin .ml-pt.cible:hover .ml-zone { fill: rgba(47,97,40,.18); }
.mj-moulin .ml-pion.p1 { fill: #f6ecd2; stroke: #6b5530; stroke-width: 1.6; }
.mj-moulin .ml-pion.p2 { fill: #2a2119; stroke: #0d0a07; stroke-width: 1.6; }
.mj-moulin .ml-pt.sel .ml-pion { stroke: var(--t-acc, #c8413a); stroke-width: 3.2; }
.mj-moulin .ml-pt.prise .ml-pion { stroke: #c8413a; stroke-width: 3.2; stroke-dasharray: 4 2.4; }
.mj-moulin .ml-pt.dernier .ml-pion.p2 { stroke: #d6ae52; stroke-width: 2.4; }
.ml-mini { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.ml-mini.p1 { background: #f6ecd2; box-shadow: 0 0 0 1px #6b5530; } .ml-mini.p2 { background: #2a2119; box-shadow: 0 0 0 1px #d6ae52; }

/* Trésor */
.tr-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border-radius: 8px; background: #1a130c; touch-action: none; outline: none; }
.tr-c { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.05); display: grid; place-items: center; align-content: center; gap: 1px; text-align: center; line-height: 1; }
.tr-c b { font-family: var(--f-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.tr-c small { font-size: 9.5px; letter-spacing: .02em; opacity: .85; }
.tr-c.v1, .tr-c.v2 { background: #8a5a3a; color: #fbe9d6; }
.tr-c.v3, .tr-c.v4 { background: #a8703f; color: #fff4e3; }
.tr-c.v5, .tr-c.v6 { background: #b9bcc2; color: #1e1a15; }
.tr-c.v7, .tr-c.v8 { background: #d8b35a; color: #231a08; }
.tr-c.v9, .tr-c.v10 { background: #e9c75e; color: #231a08; box-shadow: 0 0 10px -2px rgba(233,199,94,.7); }
.tr-c.v11, .tr-c.v12, .tr-c.v13 { background: #f3dc8a; color: #3a1a08; box-shadow: 0 0 16px -2px rgba(243,220,138,.9); }
.tr-c.v7 b, .tr-c.v8 b, .tr-c.v9 b, .tr-c.v10 b { font-size: 15px; }
.tr-c.v11 b, .tr-c.v12 b, .tr-c.v13 b { font-size: 13px; }
.tr-c.neuve { animation: trNeuve .18s ease-out; }
@keyframes trNeuve { from { transform: scale(.6); opacity: .3; } }
.tr-fleches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tr-fleches button { height: 30px; border-radius: 6px; cursor: pointer; background: var(--t-surf3, #2a2119); border: 1px solid var(--t-btn-line, #6b5530); color: var(--t-text, #f1e4c2); display: grid; place-items: center; }

/* Blasons */
/* v1.9.28 : grille unique (indices + cases), chiffres droits et lisibles, repères de 5 en 5 */
.bl-jeu { display: grid; grid-template-columns: auto repeat(var(--n), minmax(0, 1fr)); gap: 1px; user-select: none; touch-action: none;
  --bl-trait: #6b5530; }
.bl-coin { display: grid; place-items: center; } .bl-coin img { width: 34px; height: auto; filter: invert(.9) sepia(.3); }
.bl-ci, .bl-li { font-style: normal; font-weight: 700; font-size: 12px; line-height: 1.15; color: var(--t-text, #f1e4c2); border-radius: 2px; transition: background .12s; }
.bl-ci span, .bl-li span { font-style: normal; }
.bl-ci { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 2px 0 4px; min-width: 0; }
.bl-li { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 0 7px 0 4px; white-space: nowrap; }
.bl-ci.imp, .bl-li.imp { background: rgba(255,255,255,.045); }
.bl-ci.vise, .bl-li.vise { background: rgba(212,176,79,.28); color: #fff; }
.bl-ci.ok, .bl-li.ok { opacity: .38; }
.bl-c { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 1px; background: #e6d6ad; cursor: pointer; }
.bl-c:hover { background: #f6ebcc; }
.bl-c.plein { background: #2a2119; }
.bl-c.croix { background: #e6d6ad linear-gradient(45deg, transparent 42%, #9a2d24 43%, #9a2d24 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, #9a2d24 43%, #9a2d24 57%, transparent 58%); background-size: 70% 70%; background-position: center; background-repeat: no-repeat; }
.bl-c.bd::after, .bl-ci.bd::after { content: ""; position: absolute; top: -1px; bottom: -1px; right: -2px; width: 2px; background: var(--bl-trait); pointer-events: none; z-index: 1; }
.bl-c.bb::before, .bl-li.bb::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: -2px; height: 2px; background: var(--bl-trait); pointer-events: none; z-index: 1; }
.bl-ci.bd, .bl-li.bb { position: relative; }
.bl-ci.bd::after { top: 0; bottom: -1px; } .bl-li.bb::before { left: 0; }
.bl-jeu.fini .bl-c.croix, .bl-jeu.fini .bl-c:not(.plein) { background: #e6d6ad; }
.bl-jeu.fini .bl-c.plein { background: #7d2a24; }
.mj-barre .mj-mode { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; width: auto; padding-inline: 8px; }
.mj-mode span { font-size: 12px; }
.bl-ci .z, .bl-li .z { opacity: .45; font-weight: 500; }

/* Mémoire */
.me-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.me-c { aspect-ratio: 1; padding: 0; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid #6b5530; background: #2a2119 url(../assets/cardback.jpg) center / cover; }
.me-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-c.face { border-color: #d6ae52; cursor: default; }
.me-c.gagnee { border-color: #4aa43d; opacity: .82; }
.me-c:not(.face):hover { filter: brightness(1.15); }

/* Taquin */
.tq-plateau { position: relative; align-self: center; background: #1a130c; border-radius: 4px; overflow: hidden; }
.tq-c, .tq-vide { position: absolute; box-sizing: border-box; }
.tq-c { border: 1px solid rgba(0,0,0,.45); padding: 0; cursor: pointer; transition: left .12s ease, top .12s ease; }
.tq-c:hover { filter: brightness(1.12); }
.tq-plateau.fini .tq-c { border-color: transparent; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tq-c { transition: none; } .tr-c.neuve { animation: none; } }

/* Réussite */
.rs-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-height: 112px; }
.rs-col { display: flex; flex-direction: column; }
.rs-col .rs-carte + .rs-carte { margin-top: -26px; }
.rs-carte { position: relative; aspect-ratio: 32 / 44; width: 100%; border-radius: 4px; background: #f3ead3; border: 1px solid #8a7550; box-shadow: 0 1px 2px rgba(0,0,0,.4); display: grid; place-items: center; color: #1e1810; }
.rs-carte b { position: absolute; top: 1px; left: 3px; font: 700 11px/1 var(--f-display); }
.rs-carte .ic { margin-top: 8px; }
.rs-carte.coupe { color: #9a2d24; } .rs-carte.denier { color: #8a6a1a; } .rs-carte.epee { color: #2d4f8e; } .rs-carte.baton { color: #2f6128; }
.rs-carte.der { cursor: pointer; }
.rs-carte.der.ok { box-shadow: 0 0 0 2px var(--t-acc, #d6ae52), 0 2px 6px rgba(0,0,0,.4); }
.rs-carte.der:hover { transform: translateY(-2px); }
.rs-bas { display: grid; grid-template-columns: 40px 40px 1fr; gap: 8px; align-items: center; }
.rs-pioche { aspect-ratio: 32 / 44; width: 40px; padding: 0; border-radius: 4px; cursor: pointer; border: 1px solid #6b5530; background: #2a2119 url(../assets/cardback.jpg) center / cover; color: #fff; font: 700 13px var(--f-display); text-shadow: 0 1px 2px #000; }
.rs-pioche:disabled { opacity: .35; cursor: default; }
.rs-def .rs-carte { width: 40px; }
.rs-aide { font-size: 11.5px; line-height: 1.3; color: var(--t-dim, #c9bda2); }

/* v1.9.17 - choix de la carte : procédurales / historiques */
.map-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin: 0 0 14px; }
.map-pick .mp-l { align-self: center; margin-right: 2px; }
.map-pick .mp-grp { display: flex; flex-direction: column; gap: 4px; }
.map-pick .mp-grp small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.map-pick .mp-grp { flex-direction: row; flex-wrap: wrap; align-items: center; }
.map-pick .mp-grp small { width: 100%; }
.map-pick .mp-b { height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.map-pick .mp-b[aria-pressed="true"] { background: var(--gold); color: #1d160a; border-color: var(--gold); }
.map-pick .mp-b:disabled { cursor: default; opacity: .75; }
.map-pick .mp-b:disabled[aria-pressed="true"] { opacity: 1; }
.map-pick .mp-note { align-self: center; }
/* v1.9.17 - bouton de l'Espion au-dessus des fenêtres (voir renderEspionFlottant) */
.spy-fab { position: fixed; left: 14px; bottom: 14px; z-index: 45; display: flex; flex-direction: column; gap: 6px; }
.spy-fab[hidden] { display: none; }
.spy-fab .spy-btn { box-shadow: 0 10px 26px -8px #000; }
/* v1.9.19 - pertes de diplomatie annoncées dans la fenêtre de bataille */
.modal .dip-loss { margin: 4px 0; color: #e8b7a8; font-size: 14.5px; }
/* v1.9.19 - reprise des pièces d'entretien */
.modal.deficit .pc-row { align-items: center; }
.modal.deficit .pc-row.quitte { opacity: .72; }
.modal.deficit .dcoins { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.modal.deficit .dcoin { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #8a6a22; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e2b448 45%, #9c7a2c); box-shadow: 0 2px 4px #0008; }
.modal.deficit .dcoin.on { background: #2a2620; border-style: dashed; opacity: .8; }
.modal.deficit .dcoin:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.modal.deficit .deficit-tot { margin-top: 10px; }
/* v1.9.19 - pile ouverte en bulles individuelles, menu des unités */
#radial .rbtn.pick { width: 58px; height: 58px; padding: 0; overflow: visible; }
#radial .rbtn.pick .rimg { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 15px; }
#radial .rbtn.pick .rimg img { width: 100%; height: 100%; object-fit: cover; }
#radial .rbtn.pick.spe, #radial .rbtn.pick.spe .rimg { border-radius: 10px; }
#radial .rbtn.pick span { position: absolute; top: 100%; margin-top: 2px; white-space: nowrap; background: rgba(20,19,23,.9); border-radius: 6px; padding: 0 5px; font-size: 10.5px; }
#radial .rbtn.pacify { border-color: #7fb0e8; }
#radial .rbtn.effect { border-color: #c79bff; }
/* v1.9.19 - carte historique : infobulles 20 % plus grandes, comme les pions */
#radial.grand .rbtn { width: 77px; height: 77px; } #radial.grand .rbtn b { font-size: 26px; } #radial.grand .rbtn span { font-size: 13px; }
#radial.grand .rbtn.close { width: 48px; height: 48px; }
#radial.grand .rbtn.pick { width: 70px; height: 70px; } #radial.grand .rbtn.pick .rimg { width: 60px; height: 60px; }
#radial.grand .rhint { top: -168px; font-size: 15px; }
.popover.grand { width: 348px; font-size: 1.12em; }

/* v1.9.24 - pause sans fenêtre : libellé sous le bouton pause / marche */
.pause-wrap { position: relative; display: inline-flex; }
.pause-lbl { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #e0c274; background: rgba(18,17,20,.92); border: 1px solid rgba(217,180,95,.5); border-radius: 6px; padding: 1px 7px; pointer-events: none; z-index: 30; }

/* v1.9.24 - relance au clic : dé immobile (déjà tiré) et dé à cliquer */
.die3d.still .cube { animation: none; }
.die3d.clic { cursor: pointer; border-radius: 12px; animation: deClic 1.1s ease-in-out infinite; }
.die3d.clic:hover .face { border-color: #e0c274; }
@keyframes deClic { 0%, 100% { filter: drop-shadow(0 0 0 rgba(224,194,116,0)); } 50% { filter: drop-shadow(0 0 10px rgba(224,194,116,.95)); } }
.reroll-msg { margin-top: 6px; font-size: 13px; font-weight: 700; color: #e0c274; text-align: center; }
.modal.battle.pending .duel { margin-bottom: 6px; }

/* v1.9.24 - dirigeant proche de la victoire : halo animé autour du portrait */
.opp.proche .portrait, .me.proche .pwrap .portrait { animation: halo 1.8s ease-in-out infinite; }
@keyframes halo { 0%, 100% { box-shadow: 0 0 6px 1px rgba(255,214,110,.55), 0 0 0 2px rgba(255,214,110,.7); } 50% { box-shadow: 0 0 22px 7px rgba(255,214,110,.95), 0 0 0 3px #ffd66e; } }
body.no-anim .opp.proche .portrait, body.no-anim .me.proche .pwrap .portrait { animation: none; box-shadow: 0 0 14px 4px rgba(255,214,110,.85), 0 0 0 3px #ffd66e; }
/* annonce entre deux tours */
.modal.proche-v { text-align: center; max-width: 420px; border-color: var(--pc); }
.modal.proche-v .pv-portrait { width: 132px; margin: 0 auto 10px; }
.modal.proche-v .pv-portrait .portrait { width: 132px; height: 140px; border-radius: 12px; border: 3px solid var(--pc); animation: halo 1.8s ease-in-out infinite; }
.modal.proche-v h2 { margin: 6px 0 8px; }
.modal.proche-v .pv-type { margin: 4px 0; font-size: 16px; }
.modal.proche-v .actions { justify-content: center; }

/* v1.9.24 - bouton carte / marché : en doré, au même endroit de l'écran que le marché soit ouvert ou
   réduit (coin bas gauche du marché, qui est toujours collé au bas du plateau). La pile du deck remonte
   pour lui laisser la place. Écrans étroits et paliers resserrés : le bouton reste dans le titre. */
.market h3 .mk-h3t .btn { white-space: nowrap; font-size: 12.5px; padding: 5px 10px; }
@media (min-width: 1151px) {
  .market:not(.tight):not(.row1) h3 .mk-h3t { position: absolute; left: 22px; bottom: calc(8px - var(--mkgap, 0px)); z-index: 2; }
  .market:not(.tight):not(.row1):not(.compact) .deckpile { padding-bottom: 34px; }
  .market.compact h3 { min-width: 150px; min-height: 30px; }
}
.market .mk-toggle.btn, html[data-theme] .market .mk-toggle.btn { background: linear-gradient(180deg, #f0d27a, #c69b3c); color: #2a1d05; border: 1px solid #8a6a24; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: 0 2px 8px -2px rgba(0,0,0,.6); }
.market .mk-toggle.btn:hover { background: linear-gradient(180deg, #f7dd8f, #d4a947); }

/* v1.9.24 - croix de fermeture en rouge, un peu plus grandes (créateur, 08/10/2026) */
.popover .x { color: #e0463c; font-size: 27px; font-weight: 700; line-height: 1; right: 6px; top: 2px; }
.popover .x:hover { color: #ff6a5e; }
#radial .rbtn.close { width: 46px; height: 46px; border-color: #b8322a; background: #3a1512; }
#radial .rbtn.close b { color: #ff5a4e; }
#radial .rbtn.close b svg { width: 22px; height: 22px; }
#radial .rbtn.close:hover { background: #5a1c17; }
.tuto-x { color: #e0463c !important; }
.tuto-x svg { width: 18px; height: 18px; }

/* v1.9.24 - légende des terrains en style « Carte ancienne » */
html[data-mapstyle="ancienne"] .legend .chip-P { background: #e6d8a0 !important; }
html[data-mapstyle="ancienne"] .legend .chip-F { background: #96ac6e !important; }
html[data-mapstyle="ancienne"] .legend .chip-M { background: #c8baa4 !important; }
html[data-mapstyle="ancienne"] .legend .chip-Ma { background: #9eb2a4 !important; }
/* v1.9.25 : bouton « ? » et règles des mini-jeux */
.mj-onglets { grid-template-columns: repeat(7, minmax(0, 1fr)) 30px; }
.mj-aide-b { font-family: var(--f-display); font-size: 15px; font-weight: 700; }
.mj-aide { display: grid; gap: 8px; padding: 6px 4px 4px; font-size: 13px; line-height: 1.45; color: var(--t-text, #f1e4c2); }
.mj-aide p { margin: 0; }
.mj-aide .btn { justify-self: start; }
/* v1.9.25 : Solitaire (Klondike), à la place de la Réussite de la Cour */
.rs-carte.rouge { color: #a3271d; } .rs-carte.noire { color: #1e1810; }
.rs-carte.dos { background: #2a2119 url(../assets/cardback.jpg) center / cover; border-color: #6b5530; }
.so-haut { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 6px; }
.so-haut .rs-pioche { width: 100%; }
.so-haut .rs-pioche.vide { background: transparent; border-style: dashed; color: var(--t-dim, #c9bda2); text-shadow: none; }
.so-place { aspect-ratio: 32 / 44; border-radius: 4px; }
.so-place .rs-carte { width: 100%; cursor: pointer; }
.so-fond { border: 1px dashed rgba(201,189,162,.45); display: grid; place-items: center; }
.so-vide { opacity: .45; color: var(--t-dim, #c9bda2); }
.so-cols { min-height: 150px; align-items: start; }
.so-col { min-height: 60px; border-radius: 4px; }
.so-col .rs-carte + .rs-carte { margin-top: -97.5%; }
.so-col .rs-carte.dos + .rs-carte { margin-top: -119.5%; }
.so-col .rs-carte.vue { cursor: pointer; }
.so-col .rs-carte b { font-size: 10px; }
.rs-carte.choisie { box-shadow: 0 0 0 2px #f1d488, 0 2px 6px rgba(0,0,0,.5); }
.so-col.cible, .so-fond.cible { box-shadow: inset 0 0 0 2px var(--t-acc, #d6ae52); background: rgba(214,174,82,.12); }
.so-col.cible .rs-carte:last-child { box-shadow: 0 0 0 2px var(--t-acc, #d6ae52); }
.so-finir { cursor: pointer; border-radius: 6px; padding: 3px 10px; border: 1px solid var(--t-acc2, #c8413a); background: var(--t-acc, #b8463c); color: var(--t-on-acc, #fff); font: inherit; }
/* v1.9.25 : bascule de langue FR / EN */
.lang-btn { text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: 12.5px; }
.setup-lang { position: absolute; top: 98px; right: 16px; z-index: 5; display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 999px; background: var(--t-surf2, rgba(22,21,24,.85)); border: 1px solid var(--t-btn-line, var(--line)); }
/* v1.9.27 : drapeaux à la place de FR / EN */
.flag { display: block; width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.lang-flag { display: grid; place-items: center; min-width: 40px; min-height: 32px; border-radius: 999px; opacity: .55; transition: opacity .15s, background .15s; }
.lang-flag.on { opacity: 1; background: rgba(255,255,255,.1); }
a.lang-flag:hover, a.lang-flag:focus-visible { opacity: 1; }
.lang-btn .flag { margin: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 620px) { .setup-music { left: 12px; right: 12px; max-width: calc(100vw - 24px); overflow: hidden; } .setup-music .music { max-width: 100%; } .setup-music .music input[type=range] { width: 64px; min-width: 0; } .setup-lang { top: 72px; right: auto; left: 12px; } .setup-lang .lang-flag { min-width: 34px; min-height: 30px; } }

/* v1.9.25 - Solitaire : glisser-déposer */
.so-cols .rs-carte.vue, .so-place .rs-carte { touch-action: none; cursor: grab; }
.so-fantome { position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none; display: flex; flex-direction: column; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.so-fantome .rs-carte { width: 100%; }
.so-fantome .rs-carte + .rs-carte { margin-top: -97.5%; }
.so-fantome .rs-carte b { font-size: 10px; }
.so-haut, .so-cols { user-select: none; -webkit-user-select: none; }

/* ==================== v1.9.28 : téléphone façon application ====================
   Demande du créateur (25/10/2026) : une lecture d'application sur mobile, quitte à passer par des
   boutons pour voir les détails. Sous 620 px : une colonne à hauteur d'écran, sans défilement de
   page. En-tête d'une ligne avec un menu, rangée de joueurs (une pastille par joueur, la fiche
   complète au toucher), carte sur toute la place restante, marché en carrousel, tapis compact. */
#menuBtn, .sheet-x { display: none; }
.modal.hero-fiche .fiche-st { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -4px 0 12px; font-size: 15px; }
.modal.hero-fiche .fiche-st > span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 620px) {
  html, body { height: 100%; }
  #game:not([hidden]) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

  /* en-tête : tour, phase en cours, menu */
  #game header.bar { flex: none; flex-wrap: nowrap; overflow: visible; min-height: 48px; padding: 4px 8px; gap: 8px; align-items: center; }
  #game header.bar > * { display: none; }
  #game header.bar > .round-chip { display: inline-flex; font-size: 14px; }
  #game header.bar > .phases { display: flex; order: 0; flex: 1 1 auto; margin: 0; min-width: 0; justify-content: flex-start; }
  #game header.bar .phases > * { display: none; }
  #game header.bar .phases > .phase.on { display: inline-flex; }
  #game header.bar .phases > .phase.on .t { display: inline; }
  #game header.bar .phases > .phase.on::before, #game header.bar .phases > .phase.on::after { display: none; }
  #game header.bar > #chatBtn:not([hidden]) { display: inline-flex; }
  #game header.bar > #menuBtn { display: inline-flex; margin-left: auto; min-width: 44px; min-height: 40px; justify-content: center; }
  #game header.bar > #menuBtn .ic { width: 22px; height: 22px; }
  #game header.bar > .pause-wrap:has(#pauseLbl:not([hidden])) { display: inline-flex; }
  /* menu ouvert : l'en-tête se déplie en panneau, une commande par case avec son nom */
  #game header.bar.menu-open { position: fixed; top: 0; left: 0; right: 0; z-index: 300; flex-wrap: wrap; align-content: flex-start;
    background: #1c1b1f; border-bottom: 1px solid var(--gold); box-shadow: 0 18px 40px -12px #000; padding: 4px 8px 12px; }
  #game header.bar.menu-open > #menuBtn { order: 0; }
  #game header.bar.menu-open > .btn:not([hidden]):not(#menuBtn):not(#chatBtn),
  #game header.bar.menu-open > .pause-wrap,
  #game header.bar.menu-open > .music,
  #game header.bar.menu-open > .hdr-speed { display: flex; order: 1; flex: 1 1 calc(50% - 8px); min-height: 46px; font-size: 15px;
    justify-content: flex-start; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #242329;
    white-space: normal; text-align: left; min-width: 0; }
  #game header.bar.menu-open > .btn .lbl { display: inline; }
  #game header.bar.menu-open > .icon-btn::after,
  #game header.bar.menu-open > .pause-wrap > .btn::after { content: attr(aria-label); font-size: 15px; line-height: 1.2; text-align: left; }
  #game header.bar.menu-open > .pause-wrap > .btn:not([hidden]) { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 0; font-size: 15px; }
  #game header.bar.menu-open > .pause-wrap:not(:has(.btn:not([hidden]))) { display: none; }
  #game header.bar.menu-open > .music { flex-basis: 100%; }
  #game header.bar.menu-open > .music input[type=range] { display: inline-block; width: 90px; }

  /* joueurs : une pastille par joueur, la fiche complète au toucher */
  #game aside.left { flex: none; display: flex; flex-direction: row; gap: 6px; padding: 6px 8px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  #game aside.left::-webkit-scrollbar { display: none; }
  #game aside.left .section-title { display: none; }
  #game aside.left .opp { flex: 1 1 0; min-width: 0; margin: 0; padding: 5px 6px; gap: 6px; display: flex; align-items: center; border-radius: 10px; min-height: 46px; }
  /* toutes les pastilles tiennent dans la largeur ; à 5 ou 6 joueurs, portrait et or l'un sous l'autre, sans le nom */
  #game aside.left:has(.opp:nth-of-type(5)) { gap: 4px; padding: 6px; }
  #game aside.left:has(.opp:nth-of-type(5)) .opp { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; border-left-width: 3px; }
  #game aside.left:has(.opp:nth-of-type(5)) .opp .nm { display: none; }
  #game aside.left:has(.opp:nth-of-type(5)) .opp .st { text-align: center; }
  #game aside.left .opp .portrait { width: 30px; height: 30px; flex: none; }
  #game aside.left .opp > div { min-width: 0; }
  #game aside.left .opp .nm { font-size: 13px; line-height: 1.15; }
  #game aside.left .opp .nm span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52px; }
  #game aside.left .opp .nm .pill, #game aside.left .opp .ld, #game aside.left .opp .rev,
  #game aside.left .opp .st > span:not(:first-child), #game aside.left .opp .thinking-row, #game aside.left .opp .botmark { display: none; }
  #game aside.left .opp .st { font-size: 12.5px; margin: 0; }
  #game aside.left .opp.thinking { box-shadow: 0 0 0 2px var(--pc) inset; }

  /* carte : toute la place qui reste */
  #game #board { flex: 1 1 auto; min-height: 0; height: auto; }
  #game .legend { display: none; }
  #game .board-tools { position: sticky; top: auto; bottom: 8px; left: calc(100vw - 104px); float: none; width: max-content; margin: -48px 0 0; z-index: 6; }
  #game .board-tools .btn { min-width: 40px; min-height: 40px; background: rgba(22,21,24,.9); }

  /* marché : les cinq cartes en entier, deux par ligne ; le panneau défile vers le bas s'il le faut.
     (v1.9.28 : plus de carrousel, les cartes voisines sortaient de l'écran) */
  #game .market { left: 0; padding: 10px 0 8px; max-height: none; overflow: visible; }
  #game .market h3 { padding: 0 10px; }
  #game .market .market-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 10px 10px; overflow: visible; align-items: start; }
  /* la carte entière doit tenir en hauteur : sa largeur suit la place disponible */
  #game .market:not(.compact) { position: fixed; top: var(--mk-top, 104px); height: var(--mk-h, 50vh); left: 0; right: 0; width: auto; bottom: auto; margin: 0;
    overflow-y: auto; overscroll-behavior: contain; background: rgba(18,17,20,.97); z-index: 30; }
  #game .market .market-inner > * { min-width: 0; }
  #game .market h3 { font-size: 12.5px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
  #game .market h3 .btn { font-size: 12.5px; min-height: 32px; padding: 4px 10px; }
  #game .market h3 .mk-t { display: none; }
  #board:has(> .market:not([hidden])) .board-tools { display: none; }
  #game .market .deckpile { display: none; }
  #game .market .ucard .art { height: auto; max-height: none; }
  #game .market .ucard .txt { font-size: 12.5px; line-height: 1.3; max-height: none; }
  #game .market .ucard .acts { flex-direction: column; gap: 5px; }
  #game .market .ucard .acts .btn { font-size: 13px; min-height: 38px; width: 100%; padding: 4px 6px; }
  #game .market.compact .market-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 2px 6px 6px; }

  /* chronique et mini-jeux : un panneau qui s'ouvre depuis le menu */
  #game aside.right { position: fixed; inset: 48px 0 0 0; z-index: 90; background: #1c1b1f; overflow: auto; padding: 10px 12px 20px; border: 0; border-top: 1px solid var(--gold); }
  #game.no-right aside.right { display: none; }
  #game aside.right .sheet-x { display: inline-flex; position: sticky; top: 0; align-self: flex-end; min-width: 40px; min-height: 40px; justify-content: center; z-index: 2; background: #242329; }

  /* tapis : or, objectifs et armée sur deux lignes, bouton de phase au bas de l'écran */
  #game .mat { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; overflow: auto; }
  #game .mat .me { grid-template-columns: 40px auto; gap: 8px; align-items: center; }
  #game .mat .me .pwrap, #game .mat .me .pwrap .portrait { width: 40px; height: 40px; }
  #game .mat .me .ribbon, #game .mat .me .line { display: none; }
  #game .mat .me .purse { font-size: 15px; } #game .mat .me .purse .coin { width: 22px; height: 22px; }
  #game .mat .me .purse .muted { display: block; font-size: 11.5px !important; line-height: 1.1; }
  #game .mat > div:nth-child(2) { display: contents !important; }
  #game .mat .me { grid-column: 1; grid-row: 1; }
  #game .mat .cta { grid-row: 3; }
  #game .mat .tracks { display: flex; gap: 14px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; grid-column: 2; grid-row: 1; }
  #game .mat .track { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; width: auto; }
  #game .mat .track .lbl { font-size: 0; width: auto; min-width: 0; } #game .mat .track .lbl .icn { margin: 0; height: 17px; width: auto; }
  #game .mat .track .boxes { display: none; }
  #game .mat .army { grid-column: 1 / -1; grid-row: 2; min-height: 0; height: auto; display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #game .mat .army:empty { display: none; }
  #game .mat .army .mini { flex: 0 0 auto; width: auto; max-width: 150px; display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 8px 3px 3px; }
  #game .mat .army .mini img { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
  #game .mat .army .mini .mn { font-size: 13px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #game .mat .army .mini .ms { font-size: 11px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #game .mat .army .mini .mini-kill { top: -4px; right: -4px; transform: scale(.8); }
  #game .mat .cta { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; padding: 6px 0 0; border: 0; box-shadow: none; background: none; max-width: none; }
  #game .mat .cta .hint { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.3; max-height: none; }
  #game .mat .cta .undo { font-size: 0; min-width: 48px; min-height: 48px; padding: 0; }
  #game .mat .cta .undo::before { content: '↶'; font-size: 22px; }
  #game .mat .cta .go { grid-column: 2; min-height: 48px; font-size: 15px; letter-spacing: .02em; padding: 6px 10px; white-space: normal; line-height: 1.15; }
  #game .mat .cta .go:only-child, #game .mat .cta > .hint + .go { grid-column: 1 / -1; }

  /* didacticiel : en haut, pour laisser voir le bouton de phase */
  #tutoBox { top: 52px; bottom: auto; max-height: 40vh; }
}
@media (max-width: 620px) and (max-height: 700px) {
  /* écrans bas : l'illustration rapetisse pour que la carte du marché tienne avec ses boutons */
  #game .market:not(.compact) .ucard .art { height: 84px; max-height: 84px; object-fit: cover; }
  #game .market:not(.compact) .ucard .txt { font-size: 12.5px; line-height: 1.3; }
}

/* v1.9.28 - tablettes et téléphones à l'horizontale (621 à 1279 px) : les fiches des joueurs passent
   à la ligne au lieu de sortir de l'écran */
@media (min-width: 621px) and (max-width: 1279px) {
  #game aside.left { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; overflow: visible; scroll-snap-type: none; }
  #game aside.left .section-title { grid-column: 1 / -1; }
  #game aside.left .opp { flex: none; min-width: 0; margin: 0; }
  #game aside.left .opp .st { gap: 2px 8px; flex-wrap: wrap; }
}
/* v1.9.28 - très petits écrans (320 px) : l'accueil ne déborde plus */
@media (max-width: 360px) {
  .setup-inner, .setup-form, #stepMode, .mode-grid, #catalog, .setup-foot { min-width: 0; max-width: 100%; }
  .mode-grid { grid-template-columns: 1fr; }
  .setup .cat-tabs { flex-wrap: wrap; }
}
/* v1.9.28 - téléphone tenu à l'horizontale : trop peu de hauteur pour jouer sans que rien ne dépasse,
   on demande de le tourner */
.tourner { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .tourner { display: flex; position: fixed; inset: 0; z-index: 10000; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: #121114; color: var(--bone, #efe6d2); text-align: center; padding: 24px; }
  .tourner b { font-family: var(--f-display); font-size: 22px; letter-spacing: .04em; }
  .tourner span { font-size: 15px; opacity: .8; }
}
/* v1.9.28 - bandeau de phase et messages : toujours dans la partie visible de la carte */
.fx-banner { left: var(--sx, 0px); right: auto; width: 100%; margin-top: var(--sy, 0px); }
.fx-toasts { left: calc(12px + var(--sx, 0px)); top: calc(12px + var(--sy, 0px)); }
/* v1.9.28 - réglages sur téléphone : la musique passe à la ligne au lieu de sortir de la fenêtre */
@media (max-width: 620px) {
  .set-audio, .set-audio .music { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .set-audio .music .mtitle { max-width: 100%; flex: 1 1 100%; }
  .set-audio .music input[type=range] { width: 80px; min-width: 0; }
}