/*! Corsaires ! — © 2026, Chrysopam — tous droits réservés */
:root {
  --fond: #0d1326; --parch: #efe2c0; --encre: #2b1d10; --or: #f2cf4a;
  --pix: 'Press Start 2P', 'Courier New', monospace;
  --txt: Verdana, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--fond); color: #e8e4d8; font-family: var(--txt); font-size: 13px; }
#app { display: flex; gap: 10px; padding: 10px; min-height: 100vh; }
#gauche { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#barre { display: flex; align-items: center; gap: 14px; background: #1a2340; padding: 6px 12px; border: 3px solid #2e3c66; font-family: var(--pix); font-size: 10px; flex-wrap: wrap; line-height: 1.6; }
#barre small { font-family: var(--txt); font-size: 11px; color: #9fb0e0; }
#b-titre { color: var(--or); }
#b-guerres { font-family: var(--txt); font-size: 11px; color: #9fb0e0; }
.spacer { flex: 1; }
#carte-wrap { position: relative; flex: 0 0 auto; }
#carte { max-width: 100%; max-height: calc(100vh - 180px); width: auto; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; display: block; border: 4px solid #2e3c66; box-shadow: 0 0 0 2px #0a0f20, 0 10px 30px rgba(0, 0, 0, .6); background: #1f6db3; cursor: var(--c-fleche); }
#tooltip { position: absolute; pointer-events: none; background: rgba(12, 16, 36, .95); color: #fff; border: 2px solid #6b7fb8; padding: 6px 8px; font-size: 12px; max-width: 270px; z-index: 5; line-height: 1.4; }
#journal { flex: 1; overflow: auto; background: #0f1730; border: 3px solid #2e3c66; padding: 8px 10px; font-size: 12px; line-height: 1.55; min-height: 90px; max-height: 240px; }
#journal .mois { color: #7f8fbf; font-family: var(--pix); font-size: 8px; margin-right: 8px; }
#journal .bien { color: #9fe08a; }
#journal .mal { color: #ff9a8a; }
#panneau { width: 350px; flex: 0 0 350px; background: linear-gradient(#6b4426, #4a2f1c); border: 4px solid #2a1a0e; padding: 10px; overflow: auto; box-shadow: inset 0 0 40px rgba(0, 0, 0, .4); max-height: calc(100vh - 20px); }
.bloc { background: var(--parch); color: var(--encre); padding: 8px 10px; margin-bottom: 8px; border: 3px solid #b89a63; box-shadow: 2px 2px 0 #2a1a0e; }
.titre-bloc { font-family: var(--pix); font-size: 9px; margin-bottom: 6px; color: #5e3a1c; }
.titre-bloc small { font-family: var(--txt); font-size: 11px; color: #6b4426; }
.identite { display: flex; gap: 10px; align-items: center; border-color: var(--c); }
.identite .portrait { image-rendering: pixelated; width: 72px; height: 72px; border: 3px solid var(--c); background: #1a2340; flex: 0 0 auto; }
.identite .nom { font-family: var(--pix); font-size: 10px; margin-bottom: 5px; line-height: 1.5; }
.identite .devise { font-style: italic; font-size: 11px; color: #5e3a1c; }
.chiffres { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--pix); font-size: 9px; justify-content: space-between; }
.navire label { font-size: 10px; color: #5e3a1c; display: block; margin-top: 4px; }
.barre { position: relative; height: 14px; background: #3b2a1a; border: 2px solid #2a1a0e; }
.barre .rempli { height: 100%; background: #6fbf5a; transition: width .3s; }
.rempli.coque { background: #c9843a; }
.rempli.moral { background: #d94141; }
.rempli.equipage { background: #3b78d8; }
.barre span { position: absolute; inset: 0; text-align: center; font-family: var(--pix); font-size: 7px; line-height: 10px; color: #fff; text-shadow: 1px 1px 0 #000; }
.cale, .mission { font-size: 11px; margin-top: 6px; }
.mission { background: #e6d29a; padding: 4px 6px; border-left: 3px solid #b98f1f; }
.btn { font-family: var(--pix); font-size: 9px; padding: 8px 10px; background: #e9d9a8; color: #2b1d10; border: 3px solid #6b4426; box-shadow: 3px 3px 0 #2a1a0e; cursor: var(--c-main); margin: 3px 2px; line-height: 1.5; text-align: left; }
.btn small { display: block; font-family: var(--txt); font-size: 10px; color: #6b4426; font-weight: normal; margin-top: 2px; }
.btn:hover:not([disabled]) { background: #fff2c8; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #2a1a0e; }
.btn:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #2a1a0e; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.primaire { background: var(--or); }
.btn.danger { background: #e07a6a; color: #fff; }
.btn.danger small { color: #ffeeea; }
.btn.petit { padding: 5px 7px; font-size: 8px; box-shadow: 2px 2px 0 #2a1a0e; }
.btn.large { width: 100%; text-align: center; margin: 6px 0 0; }
.btn.pouvoir { width: 100%; margin: 3px 0; }
.fin-tour { text-align: center; font-family: var(--pix); font-size: 9px; }
.rel { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; }
.rel-nom { width: 96px; font-weight: bold; }
.rel-barre { flex: 1; position: relative; height: 10px; background: #3b2a1a; border: 2px solid #2a1a0e; }
.rel-barre::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #e9d9a8; }
.rel-rempli { position: absolute; top: 0; bottom: 0; background: #9b9b9b; }
.rel-rempli.amie { background: #6fbf5a; }
.rel-rempli.hostile { background: #d94141; }
.rel-val { width: 34px; text-align: right; font-family: var(--pix); font-size: 8px; }
.lieu { font-size: 12px; margin-bottom: 4px; }
.lieu.mal { color: #8f2020; }
.muet { color: #7a6a50; font-size: 11px; }
.cache { display: none !important; }
#modal { position: fixed; inset: 0; background: rgba(5, 8, 20, .78); display: flex; align-items: center; justify-content: center; z-index: 50; }
#modal-box { background: var(--parch); color: var(--encre); border: 4px solid #6b4426; box-shadow: 0 0 0 3px #2a1a0e, 0 20px 60px rgba(0, 0, 0, .8); padding: 18px 20px; width: min(640px, 94vw); max-height: 92vh; overflow: auto; position: relative; font-size: 13px; line-height: 1.5; }
#modal-box.large { width: min(900px, 96vw); }
#modal-box h2 { font-family: var(--pix); font-size: 13px; margin: 0 0 12px; color: #5e3a1c; line-height: 1.6; padding-right: 30px; }
#modal-box h3 { font-family: var(--pix); font-size: 10px; margin: 14px 0 6px; color: #5e3a1c; }
#modal-box h4 { font-family: var(--pix); font-size: 9px; margin: 14px 0 6px; color: #5e3a1c; }
#modal-box p { margin: 6px 0; }
.fermer { position: absolute; top: 8px; right: 8px; background: #e07a6a; color: #fff; border: 2px solid #6b4426; font-family: var(--pix); font-size: 9px; padding: 4px 6px; cursor: var(--c-main); z-index: 2; }
.boutons { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.titre { text-align: center; }
.titre h1 { font-family: var(--pix); font-size: 28px; color: #8f2020; text-shadow: 3px 3px 0 #2a1a0e; margin: 6px 0 6px; letter-spacing: 2px; }
.titre .sous { font-family: var(--pix); font-size: 10px; color: #5e3a1c; margin-bottom: 14px; }
.titre .intro { max-width: 500px; margin: 10px auto; }
.titre .options { display: flex; justify-content: center; gap: 18px; margin: 12px 0; flex-wrap: wrap; }
.titre .options label { font-size: 12px; }
select, input { font-family: var(--txt); font-size: 13px; padding: 4px 6px; border: 2px solid #6b4426; background: #fff8e6; color: var(--encre); }
.titre .boutons { justify-content: center; }
#voile { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, #1a2340, #0d1326 70%); z-index: 60; display: flex; align-items: center; justify-content: center; }
.voile-box { text-align: center; color: #e8e4d8; padding: 30px 40px; border: 4px solid var(--c); background: rgba(10, 14, 30, .7); box-shadow: 0 0 60px rgba(0, 0, 0, .8); animation: pop .35s ease-out; }
.voile-box img { image-rendering: pixelated; width: 144px; height: 144px; border: 4px solid var(--c); background: #1a2340; }
.voile-titre { font-family: var(--pix); font-size: 14px; margin: 16px 0 8px; line-height: 1.6; }
.voile-titre b { color: var(--c); }
.voile-sous { font-family: var(--pix); font-size: 9px; color: #9fb0e0; margin-bottom: 8px; }
.voile-devise { font-style: italic; margin-bottom: 16px; color: #cfcbd6; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1a2340; color: #fff; border: 3px solid #6b7fb8; padding: 10px 16px; font-family: var(--pix); font-size: 9px; z-index: 70; box-shadow: 0 6px 20px rgba(0, 0, 0, .6); max-width: 90vw; line-height: 1.6; }
.port-tete { border-left: 6px solid var(--c); padding-left: 10px; margin-bottom: 10px; }
.port-tete h2 { margin-bottom: 4px; }
.port-info, .port-moi { font-size: 12px; color: #5e3a1c; }
.onglets { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 3px solid #6b4426; margin-bottom: 10px; }
.onglet { font-family: var(--pix); font-size: 8px; padding: 7px 9px; background: #d9c58e; border: 2px solid #6b4426; border-bottom: none; cursor: var(--c-main); color: #2b1d10; }
.onglet.actif { background: var(--or); }
.tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.tab th, .tab td { border-bottom: 1px solid #c9b26f; padding: 5px 6px; text-align: left; vertical-align: middle; }
.tab th { font-family: var(--pix); font-size: 8px; color: #5e3a1c; }
.tag { font-size: 10px; padding: 1px 5px; border: 1px solid; border-radius: 3px; margin-left: 4px; white-space: nowrap; }
.tag.bon { color: #2e7d32; border-color: #2e7d32; }
.tag.cher { color: #8f2020; border-color: #8f2020; }
.liste-actions { display: flex; flex-direction: column; gap: 6px; }
.port .deux-cols .liste-actions.defile { grid-template-columns: minmax(0, 1fr); max-height: 228px; overflow-y: auto; padding-right: 4px; margin-bottom: 6px; }
.port .deux-cols .liste-actions.defile.court { max-height: 112px; }
.ligne-action { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #e6d9b3; padding: 6px 8px; border: 2px solid #c9b26f; }
.ligne-action small { color: #5e3a1c; }
.ligne-action .btn { flex: 0 0 auto; }
.rumeurs li { margin: 3px 0; }
.combat h2 { text-align: center; padding-right: 0; }
#cb-canvas { display: block; width: 100%; max-width: 560px; margin: 0 auto; image-rendering: pixelated; border: 4px solid #2a1a0e; background: #1f6db3; }
.cb-scene { position: relative; }
.cb-cut { position: absolute; box-sizing: border-box; border: 4px solid #2a1a0e; overflow: hidden; opacity: 0; transition: opacity .16s ease-out; pointer-events: none; background: #1a1008; }
.cb-cut.on { opacity: 1; pointer-events: auto; cursor: var(--c-main); }
.cb-cut img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; }
.cb-stats { display: flex; gap: 12px; margin-top: 8px; }
.cb-side { flex: 1; background: #e6d9b3; padding: 6px 8px; border: 2px solid #c9b26f; }
.cb-nom { font-family: var(--pix); font-size: 9px; margin-bottom: 4px; }
.cb-ligne { font-size: 11px; margin-top: 2px; }
.cb-log { max-height: 110px; overflow: auto; background: #fff8e6; border: 2px solid #c9b26f; padding: 6px 8px; margin-top: 8px; font-size: 12px; }
.cb-log .bien { color: #2e7d32; }
.cb-log .mal { color: #8f2020; }
.cb-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; justify-content: center; }
.duel-tete { display: flex; justify-content: space-between; font-family: var(--pix); font-size: 9px; margin: 10px 0 6px; gap: 8px; flex-wrap: wrap; }
.duel-signe { margin: 1px 0 4px; padding: 2px 9px; background: rgba(255,255,255,.07); border-left: 3px solid #c9a227; border-radius: 0 5px 5px 0; font-size: 12.5px; line-height: 1.3; }
.duel-signe.bien { border-left-color: #6fbf5a; }
.btn.vabanque { border-color: #e0b13a; box-shadow: 0 0 0 2px rgba(224,177,58,.35); }
.btn.chien { border-color: #8f6b3a; }
.btn.baleine { border-color: #3f7d96; box-shadow: 0 0 0 2px rgba(63,125,150,.3); }
.bete-bord { display: flex; align-items: center; gap: 6px; }
.bete-bord .btn.petit { flex: 0 0 auto; }
.duel-choix { display: flex; gap: 6px; justify-content: center; }
.duel-choix .btn { flex: 1; text-align: center; }
.duel-flash { margin-top: 8px; padding: 10px; border: 3px solid; font-size: 13px; animation: pop .3s ease-out; }
.duel-flash.bien { border-color: #2e7d32; background: #dff0d8; }
.duel-flash.mal { border-color: #8f2020; background: #f5d6d0; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.secret { text-align: center; }
.sec-grille { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.sec-grille label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.fin { text-align: center; }
.fin-cols { display: flex; gap: 16px; justify-content: center; margin: 6px 0; }
.fin-col { position: relative; flex: 1; background: #e6d9b3; border: 3px solid var(--c); padding: 10px; text-align: left; }
.lignee-volet { margin-top: 4px; }
.lignee-volet > summary { cursor: var(--c-main); padding: 2px 8px; border: 2px solid #c9a86a; border-radius: 8px; background: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; color: #5a3a1a; list-style: none; }
.lignee-volet > summary::-webkit-details-marker { display: none; }
.lignee-volet > summary::before { content: '▸ '; }
.lignee-volet[open] > summary::before { content: '▾ '; }
.lignee-corps { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 34px; max-height: 40vh; overflow: auto;
  padding: 6px 10px; border: 3px solid #8a6a2a; border-radius: 10px; background: #fdf6e3; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.fin-col img { image-rendering: pixelated; width: clamp(64px, 11vh, 96px); height: clamp(64px, 11vh, 96px); display: block; margin: 0 auto 4px; border: 3px solid var(--c); background: #1a2340; }
.fin-col h3 { text-align: center; margin: 4px 0; }
.modes .onglet small { display: block; font-size: 10px; font-weight: 400; opacity: .75; letter-spacing: 0; }
.mode-note { margin: 5px 0 2px; padding: 6px 9px; border-left: 4px solid #8a6a2a; background: rgba(255,255,255,.06); font-size: 11.5px; line-height: 1.34; border-radius: 0 6px 6px 0; }
.mode-note.averti { border-left-color: #b0553a; }
.mode-note.famille { border-left-color: #5a8f4a; }
.fin-score { font-family: var(--pix); font-size: 20px; text-align: center; color: #8f2020; margin: 2px 0 4px; }
.fin .illu { height: clamp(56px, 11vh, 108px); }
.fin-col ul { padding-left: 18px; margin: 3px 0; font-size: 12px; line-height: 1.32; }
.fin .lignee { max-height: 17vh; overflow: auto; }
.fin-cols { align-items: start; }
.aide ul, .chronique ul, .resultat ul { padding-left: 20px; }
.chronique li, .resultat li { margin: 5px 0; }
@media (max-width: 1100px) {
  #app { flex-direction: column; }
  #panneau { width: auto; flex: none; max-height: none; }
  #carte { max-height: none; }
}
.audio-ctl { display: inline-flex; align-items: center; gap: 4px; }
.audio-ctl input[type=range] { width: 70px; accent-color: #f2cf4a; }
#bandeau { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(12, 16, 36, .92); color: #e8e4d8; border: 3px solid #9b5de5; padding: 8px 14px; font-family: var(--pix); font-size: 9px; z-index: 6; animation: pop .3s ease-out; }
#panneau.ia .btn:not(.large) { opacity: .5; pointer-events: none; }
.titre .options label.case { display: flex; align-items: center; gap: 6px; }
.journal-long { max-height: 60vh; overflow: auto; background: #fff8e6; border: 2px solid #c9b26f; padding: 6px 10px; font-size: 12px; line-height: 1.5; }
.journal-long .mois { color: #7f8fbf; font-family: var(--pix); font-size: 8px; margin-right: 8px; }
.journal-long .bien { color: #2e7d32; }
.journal-long .mal { color: #8f2020; }
.identite .nom small { font-family: var(--txt); font-size: 10px; color: #6b4426; }
.illu { display: block; width: 100%; height: clamp(150px, 28vh, 280px); object-fit: cover; object-position: center; border: 3px solid #6b4426; box-shadow: 2px 2px 0 #2a1a0e; margin: 0 0 10px; background: #1a2340; }
.titre .illu { height: clamp(140px, 24vh, 240px); }
.resultat .illu { height: clamp(110px, 20vh, 170px); }
img[data-hd] { image-rendering: auto !important; object-fit: cover; }
#cb-canvas { max-width: 100% !important; width: 100%; image-rendering: auto; }
.carte-cap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 250px; padding: 12px 10px 14px; background: #e6d9b3; border: 4px solid #6b4426; box-shadow: 3px 3px 0 #2a1a0e; cursor: var(--c-main); font-family: var(--txt); color: var(--encre); transition: transform .15s; }
.carte-cap:hover { transform: translateY(-3px); }
.carte-cap.choisie { border-color: var(--c); background: #fff3cf; box-shadow: 0 0 0 3px var(--c), 4px 4px 0 #2a1a0e; }
.carte-cap img { width: 140px; height: 140px; image-rendering: pixelated; border: 4px solid var(--c); background: #1a2340; }
.carte-cap.grande { width: 268px; }
.carte-cap.lointaine { width: 208px; padding: 9px 8px 11px; opacity: .92; align-self: center; }
.carte-cap.lointaine img { width: 104px; height: 104px; border-width: 3px; }
.carte-cap.lointaine b { font-size: 9px; }
.carte-cap.lointaine small, .carte-cap.lointaine i { font-size: 10px; }
.carte-cap b { font-family: var(--pix); font-size: 10px; color: var(--c); }
.carte-cap small { font-size: 11px; color: #5e3a1c; }
.carte-cap i { font-size: 11px; color: #6b4426; }
.carte-cap .badge { position: absolute; top: 6px; right: 6px; font-family: var(--pix); font-size: 7px; padding: 4px 6px; background: var(--c); color: #fff; }
.modes { display: flex; justify-content: center; gap: 4px; margin: 10px 0 4px; }
.modes .onglet { border-bottom: 2px solid #6b4426; font-size: 9px; padding: 9px 12px; }
.dialogue .replique { background: #fff8e6; border: 3px solid #c9b26f; padding: 10px 14px; margin: 8px 0 10px; box-shadow: 2px 2px 0 #b89a63; }
.dialogue .qui { font-family: var(--pix); font-size: 9px; color: #8f2020; margin-bottom: 6px; line-height: 1.5; }
.dialogue .texte { font-size: 14px; line-height: 1.6; }
.choix-dialogue { display: flex; flex-direction: column; gap: 2px; }
.choix-dialogue .btn { width: 100%; }
.nego-etat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 10px; font-size: 13px; }
.nego-etat > span { padding: 4px 11px; border-radius: 7px; color: #fbeccb; font-weight: 700; background: linear-gradient(#7d5433, #5a3a22);
  border: 2px solid #3b2414; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 #2a180c; }
.nego-etat > span:not(.muet) b { color: #ffe08a; }
.nego-etat > span.muet { padding: 0 4px; background: none; border: 0; box-shadow: none; color: #6b5a3e; font-weight: 400; font-style: italic; }
.nego-etat > span.muet b { color: #3b2414; font-weight: 700; }
.enigme-saisie { display: flex; gap: 6px; margin: 8px 0; }
.enigme-saisie input { flex: 1; font-size: 15px; padding: 8px; }
.dialogue p.bien { color: #2e7d32; }
.dialogue p.mal { color: #8f2020; }
.ligne-action.quete { background: #f3e3a8; border-color: #b98f1f; margin-bottom: 6px; }
.quetes-ici { margin-bottom: 8px; }
.quete-ligne { background: #fff8e6; border-left: 5px solid #b98f1f; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.quete-ligne.finie { border-color: #2e7d32; opacity: .85; }
.quete-ligne.echec, .quete-ligne.perdue { border-color: #8f2020; opacity: .7; }
.lieu + .btn small, .bloc .btn small { display: block; }
.famille .enfant { display: inline-block; margin: 1px 6px 1px 0; white-space: nowrap; }
.lignee { margin: 4px 0; padding-left: 20px; font-size: 12px; }
.lignee li { margin: 2px 0; }
.rang { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; }
.rang-nom { width: 150px; font-weight: bold; }
.titre-bloc .btn.petit { float: right; margin: -4px 0 0; font-size: 7px; padding: 3px 5px; }
.lignee li.bien { color: #2e7d32; }
.mission.alerte { background: #f1c7b1; border-left-color: #b03a1f; }
.equipage .officier { display: inline-block; margin: 1px 6px 1px 0; white-space: nowrap; }
.cale.muet { color: #7a6a55; }
#modal-box { max-height: 96vh; padding: 14px 18px; }
#modal-box { width: min(820px, 94vw); }
#modal-box.large { width: min(1440px, 94vw); }
.illu { height: clamp(90px, 24vh, 420px); margin-bottom: 8px; }
.resultat .illu { height: clamp(80px, 20vh, 320px); }
.dialogue .replique { margin: 6px 0 8px; padding: 8px 12px; }
.dialogue .texte { font-size: 13px; line-height: 1.55; }
.choix-dialogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 4px 6px; }
@media (min-width: 1040px) { .choix-dialogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .nego .choix-dialogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choix-dialogue .btn { margin: 0; }
.port-hero { position: relative; min-height: 64px; margin-bottom: 8px; background: #1a2340; }
.port-hero .illu { margin: 0; height: clamp(100px, 21vh, 220px); }
.port-hero .port-tete { position: absolute; left: 3px; right: 3px; bottom: 3px; margin: 0; padding: 22px 12px 6px; background: linear-gradient(rgba(20, 12, 4, 0), rgba(20, 12, 4, .9) 45%); }
.port-hero .port-tete h2 { color: #ffe3a0; text-shadow: 2px 2px 0 #000; margin-bottom: 2px; }
.port-hero .port-info, .port-hero .port-moi { color: #f3e6c4; font-size: 11px; }
.port .onglet-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; align-items: start; }
.port .onglet-corps > :not(.ligne-action) { grid-column: 1 / -1; }
.port .onglet-corps > p, .port .onglet-corps > h4 { margin: 2px 0; }
.port .liste-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.port .ligne-action { height: 100%; }
.port .rumeurs { margin: 2px 0; columns: 2; column-gap: 24px; }
.titre-hero { position: relative; }
.titre-hero .illu, .titre .titre-hero .illu { height: clamp(100px, 26vh, 360px); margin: 0 0 6px; }
.titre .intro { margin: 6px auto; font-size: 12px; }
.titre .options { margin: 8px 0; gap: 10px; }
.carte-cap { width: 215px; padding: 10px 8px 12px; }
.carte-cap img { width: 118px; height: 118px; }
.chronique.multi ul { columns: 2; column-gap: 28px; }
.chronique li { break-inside: avoid; }
.aide-cols { display: flex; gap: 14px; align-items: flex-start; }
.aide-nav { flex: 0 0 210px; display: flex; flex-direction: column; gap: 3px; }
.aide-nav .onglet { text-align: left; border-bottom: 2px solid #6b4426; line-height: 1.5; }
.aide-texte { flex: 1; min-width: 0; min-height: 300px; background: #fff8e6; border: 3px solid #c9b26f; padding: 4px 16px 10px; font-size: 13px; line-height: 1.6; }
@media (max-width: 860px) { .aide-cols { flex-direction: column; } .aide-nav { flex: none; flex-direction: row; flex-wrap: wrap; } }
.combat h2 { margin-bottom: 6px; }
#cb-canvas { width: auto !important; max-width: 100% !important; max-height: 46vh; }
.cb-stats { margin-top: 6px; }
.cb-log { max-height: 70px; margin-top: 6px; }
#panneau { display: flex; flex-direction: column; padding: 8px; }
.pan-tete { flex: 0 0 auto; padding: 6px 8px; margin-bottom: 6px; }
.pan-tete .portrait { width: 58px; height: 58px; }
.id-texte { flex: 1; min-width: 0; }
.id-texte .nom { margin-bottom: 6px; }
.id-texte .chiffres { font-size: 8px; gap: 4px 8px; justify-content: flex-start; }
.pan-onglets { display: flex; gap: 2px; flex: 0 0 auto; }
.pan-onglets .onglet { flex: 1 1 0; padding: 6px 2px; font-size: 7px; text-align: center; white-space: nowrap; }
.pan-corps { flex: 1 1 auto; min-height: 60px; overflow: auto; border-top: 3px solid #d9c58e; padding-top: 6px; }
.pan-corps .bloc:last-child { margin-bottom: 0; }
.pan-dock { flex: 0 0 auto; background: var(--parch); color: var(--encre); border: 3px solid #b89a63; box-shadow: 2px 2px 0 #2a1a0e; padding: 6px 8px; margin-top: 6px; }
.dock-lieu { font-size: 12px; margin-bottom: 5px; line-height: 1.4; }
.dock-lieu.mal { color: #8f2020; }
.dock-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.dock-actions .btn { margin: 0; flex: 1 1 auto; text-align: center; padding: 6px 8px; }
.dock-pouvoirs { display: flex; gap: 4px; margin-bottom: 5px; }
.dock-pouvoirs .btn.pouvoir { flex: 1 1 0; width: auto; margin: 0; padding: 5px 6px; font-size: 8px; }
.pan-dock .fin-tour { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; }
.pan-dock .fin-tour .btn { margin: 0; }
@media (min-width: 1101px) {
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100vh; min-height: 0; }
  #gauche { min-height: 0; }
  #barre { gap: 8px 12px; padding: 5px 10px; }
  #carte-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
  #carte { max-width: 100%; max-height: 100%; }
  #journal { flex: 0 0 auto; height: clamp(58px, 12vh, 120px); min-height: 0; max-height: none; }
  #panneau { height: calc(100vh - 20px); max-height: none; overflow: hidden; }
}
@media (max-width: 1100px) {
  .pan-corps { overflow: visible; }
}
@media (max-width: 860px) {
  .port .onglet-corps, .port .liste-actions { grid-template-columns: 1fr; }
}
.deux-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.deux-cols > div > h4:first-child, .deux-cols > div > p:first-child { margin-top: 0; }
.port .deux-cols .liste-actions { grid-template-columns: 1fr; }
.deux-cols .tab th, .deux-cols .tab td { padding: 4px 4px; }
@media (max-width: 860px) { .deux-cols { grid-template-columns: 1fr; } }
#barre .lib { white-space: nowrap; }
#b-guerres { flex: 1 1 0; min-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#barre .spacer { display: none; }
.dock-actions .btn.cible { flex: 1 1 calc(50% - 4px); max-width: 100%; font-size: 7px; padding: 5px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { #barre { gap: 6px 10px; } }
@media (max-width: 1080px) { #barre .lib { display: none; } }
@media (min-width: 1101px) { #barre { flex-wrap: nowrap; white-space: nowrap; } #barre > * { flex-shrink: 0; } #barre #b-guerres { flex-shrink: 1; } }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.boutons-ligne .btn { margin: 0; }
ul.rapport { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.jeu .illu { height: clamp(70px, 15vh, 200px); }
.jeu-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jeu-tete span { font-family: var(--pix); font-size: 9px; color: #5e3a1c; }
.mises { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; margin: 4px 0; }
.mises .btn { margin: 0; }
.table-jeu { display: flex; justify-content: space-around; gap: 16px; background: radial-gradient(#2e7d4f, #1b4d31); border: 4px solid #6b4426; padding: 10px; margin: 6px 0; color: #f6efd9; flex-wrap: wrap; }
.table-jeu small { font-family: var(--pix); font-size: 8px; display: block; margin-bottom: 6px; }
.carte-jeu { display: inline-block; min-width: 46px; padding: 12px 6px; margin: 2px; background: #fffdf5; color: #1a1a1a; border: 2px solid #2a1a0e; border-radius: 5px; font-family: var(--pix); font-size: 13px; text-align: center; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.carte-jeu.rouge { color: #c0271d; }
.carte-jeu.dos { background: repeating-linear-gradient(45deg, #7a1f1f, #7a1f1f 4px, #a33 4px, #a33 8px); color: transparent; }
.de { display: inline-grid; flex: 0 0 auto; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 34px; height: 34px; padding: 4px; margin: 0 2px;
  vertical-align: middle; background: linear-gradient(#fffef8, #f2ead3); border-radius: 7px; box-shadow: inset 0 0 0 1px #b1a181, 0 2px 3px rgba(0,0,0,.4); }
.de i { background: #17130d; border-radius: 50%; box-shadow: inset 0 -1px 0 rgba(255,255,255,.22); }
.de.mini { width: 22px; height: 22px; padding: 3px; gap: 1px; border-radius: 5px; box-shadow: inset 0 0 0 1px #b1a181, 0 1px 2px rgba(0,0,0,.35); }
.de.cache { opacity: .75; }
.table-jeu.roue { align-items: center; }
.roue-resultat { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #e8b923; display: flex; align-items: center; justify-content: center; font-family: var(--pix); font-size: 22px; background: #1a1a1a; }
.roue-resultat.rouge { background: #b3261e; }
.roue-resultat.vert { background: #1f7a3a; }
.paris { display: flex; flex-wrap: wrap; gap: 3px; max-width: 520px; align-items: center; }
.paris .btn { margin: 0; }
.numero-choix { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.actions-jeu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.actions-jeu .btn { margin: 0; }
.jeu-message { background: #fff8e6; border: 3px solid #c9b26f; padding: 6px 10px; margin-top: 6px; font-size: 13px; }
.jeu-message .bien { color: #2e7d32; } .jeu-message .mal { color: #8f2020; }
.famille-fen .illu { height: clamp(60px, 12vh, 170px); }
.onglets-mini { display: flex; gap: 3px; }
.onglets-mini .onglet { border-bottom: 2px solid #6b4426; }
.arbre { display: flex; flex-direction: column; gap: 6px; max-height: calc(96vh - 250px); overflow: auto; }
.arbre .gen { background: #fff8e6; border: 2px solid #c9b26f; padding: 5px 8px; }
.arbre .gen h4 { margin: 0 0 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { background: #efe2c0; border: 1px solid #c9b26f; padding: 2px 7px; font-size: 12px; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.fiches.deux { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.fiche { display: flex; gap: 8px; align-items: flex-start; background: #efe2c0; border: 2px solid #b89a63; padding: 5px 7px; font-size: 12px; line-height: 1.4; }
.fiche.vide { align-items: center; color: #5e3a1c; }
.fiche-img { flex: 0 0 52px; width: 52px; height: 52px; border: 2px solid #6b4426; background: #1a2340; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fiche-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.fiche-img.emoji { font-size: 30px; }
.fiche-statut { color: #8f2020; font-weight: bold; margin-top: 2px; }
.fiche-ligne { margin-top: 2px; }
.fiche-img .emoji-seul { font-size: 30px; }
:root {
  --pix: 'Alegreya Sans SC', 'Palatino Linotype', Georgia, serif;
  --txt: 'Alegreya Sans', 'Segoe UI', Verdana, sans-serif;
  --titre: 'Pirata One', 'Palatino Linotype', Georgia, serif;
  --bois: #6b4426; --bois-fonce: #3a2412; --dore: #c9973a; --parch-clair: #f7ecd2; --parch-fonce: #e3cf9f;
}
body { font-size: 14px; background: radial-gradient(ellipse at 50% 20%, #1c2750, #0b1022 75%); }
#barre { font-size: 14px; font-weight: 700; border-radius: 10px; border: 2px solid #3d4f86; background: linear-gradient(#212c52, #161f3d); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
#barre small { font-size: 13px; }
#carte { border-radius: 8px; border: 3px solid #3d4f86; }
#journal { border-radius: 10px; border: 2px solid #3d4f86; background: linear-gradient(#131c38, #0e1530); font-size: 13px; }
#journal .mois, .journal-long .mois { font-size: 12px; font-weight: 700; }
#panneau { border-radius: 12px; border: 3px solid var(--bois-fonce); background: linear-gradient(160deg, #7a4f2c, #4e3019 60%, #3f2715); box-shadow: inset 0 0 30px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.5); }
.bloc { border-radius: 9px; border: 2px solid #b8955a; background: linear-gradient(#f6ebd0, #e8d6aa); box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.titre-bloc { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.titre-bloc small { font-size: 12px; }
.identite .nom, .id-texte .nom { font-family: var(--titre); font-size: 22px; font-weight: 400; line-height: 1.1; }
.chiffres, .id-texte .chiffres { font-size: 13px; font-weight: 700; }
.barre { border-radius: 5px; border: 1px solid #2a1a0e; overflow: hidden; background: #3b2a1a; }
.barre span { font-size: 11px; font-weight: 700; line-height: 14px; }
.rel-val { font-size: 12px; font-weight: 700; }
.cale, .mission { font-size: 12.5px; }
.mission { border-radius: 4px; }
.btn { font-size: 14px; font-weight: 700; line-height: 1.25; padding: 7px 12px; border-radius: 7px; border: 2px solid #8a5a2b; color: #2b1d10;
  background: linear-gradient(#fbf0d2, #e5cd92); box-shadow: 0 2px 0 #5b3a1a, 0 3px 8px rgba(0,0,0,.28); transition: transform .08s, box-shadow .12s, background .12s; }
.btn small { font-family: var(--txt); font-size: 12px; font-weight: 500; }
.btn:hover:not([disabled]) { background: linear-gradient(#fff6dc, #efd9a3); transform: translateY(-1px); box-shadow: 0 3px 0 #5b3a1a, 0 0 12px rgba(242, 200, 90, .55); }
.btn:active:not([disabled]) { transform: translateY(1px); box-shadow: 0 1px 0 #5b3a1a; }
.btn.primaire { background: linear-gradient(#ffe38a, #e5ad35); border-color: #9a6a1e; }
.btn.primaire:hover:not([disabled]) { background: linear-gradient(#fff0b0, #efbd4c); }
.btn.danger { background: linear-gradient(#ec907e, #c2513f); border-color: #7a2a1e; color: #fff; }
.btn.danger:hover:not([disabled]) { background: linear-gradient(#f3a594, #cf6150); }
.btn.petit { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; box-shadow: 0 2px 0 #5b3a1a; }
.titre-bloc .btn.petit { font-size: 11.5px; padding: 2px 8px; margin-top: -2px; }
.fermer { font-family: var(--pix); font-size: 14px; font-weight: 800; border-radius: 50%; width: 30px; height: 30px; padding: 0; line-height: 26px; background: linear-gradient(#e98a78, #b8483a); border: 2px solid #6b2a1e; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.onglet { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 8px 8px 0 0; border: 2px solid #8a5a2b; border-bottom: none; background: linear-gradient(#efdfb4, #d8bf84); }
.onglet.actif { background: linear-gradient(#ffe7a0, #f0bf4a); }
.onglets { border-bottom: 2px solid #8a5a2b; }
.modes .onglet, .aide-nav .onglet, .onglets-mini .onglet { border-radius: 8px; border-bottom: 2px solid #8a5a2b; }
.pan-onglets .onglet { font-size: 12.5px; padding: 5px 2px; }
.dock-actions .btn.cible { font-size: 12px; padding: 4px 6px; }
.dock-actions .btn.cible, html.bois .dock-actions .btn.cible { white-space: normal; text-overflow: clip; line-height: 1.12; overflow-wrap: anywhere; text-align: center; justify-content: center; }
.dock-pouvoirs .btn.pouvoir { font-size: 13px; padding: 4px 6px; }
.dock-pouvoirs .btn.pouvoir, html.bois .dock-pouvoirs .btn.pouvoir { flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; overflow: hidden; gap: 1px; }
.dock-pouvoirs .btn.pouvoir .pouvoir-nom { display: block; line-height: 1.15; overflow-wrap: anywhere; }
.dock-pouvoirs .btn.pouvoir small, html.bois .dock-pouvoirs .btn.pouvoir small { display: block; margin: 0; font-size: 10.5px; line-height: 1.1; white-space: nowrap; }
.dock-pouvoirs { justify-content: center; gap: 12px; }
.pouvoir-case { position: relative; display: inline-block; flex: 0 0 auto; }
.dock-pouvoirs .btn.pouvoir.tuile, html.bois .dock-pouvoirs .btn.pouvoir.tuile { width: 52px; height: 52px; min-width: 0; padding: 0; margin: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; }
.pouvoir-ico { display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.pouvoir-ico img.emo { width: 30px; height: 30px; margin: 0; }
.pouvoir-case.verrou .pouvoir-ico { filter: grayscale(1) brightness(.85); opacity: .55; }
.pouvoir-case.attente .pouvoir-ico { filter: grayscale(.6); opacity: .8; }
.dock-pouvoirs .pouvoir-case .btn.pouvoir.tuile.verrou, .dock-pouvoirs .pouvoir-case.verrou .btn { opacity: 1; filter: none; }
.pouvoir-case.pret .btn { animation: pouvoir-pret 1.4s ease-in-out infinite alternate; }
@keyframes pouvoir-pret { from { filter: drop-shadow(0 0 0 rgba(255,210,63,0)); } to { filter: drop-shadow(0 0 7px rgba(255,210,63,.95)); } }
.tuile-verrou { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: #3a2412; border: 1px solid #c9a86a; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tuile-verrou img.emo { width: 13px; height: 13px; margin: 0; }
.tuile-n { position: absolute; right: -6px; top: -6px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: #8f2020; color: #fff; border: 1px solid #f3e5c0; font: 700 11px/17px var(--txt); text-align: center; text-shadow: none; }
.bulle-pouvoir { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 240px; z-index: 40; padding: 8px 10px; border-radius: 9px; background: #fff8e6; border: 2px solid #c9a86a; box-shadow: 0 6px 16px rgba(0,0,0,.45); color: #3a2412; font: 400 12.5px/1.35 var(--txt); text-align: left; text-shadow: none; white-space: normal; pointer-events: none; }
.bulle-pouvoir b { color: #8f2020; } .bulle-pouvoir i { color: #6b4a2a; font-size: 11.5px; }
.pouvoir-case:hover .bulle-pouvoir, .pouvoir-case:focus-within .bulle-pouvoir { display: block; }
.pouvoir-case:first-child .bulle-pouvoir { left: 0; transform: none; }
.pouvoir-case:last-child .bulle-pouvoir { left: auto; right: 0; transform: none; }
.pan-dock { border-radius: 9px; border: 2px solid #b8955a; background: linear-gradient(#f6ebd0, #e8d6aa); }
.pan-dock .fin-tour { font-size: 13px; font-weight: 700; }
.fin-tour { font-size: 13px; }
.tag, .chip { border-radius: 10px; }
.ligne-action { border-radius: 8px; border: 1px solid #c9ae72; background: linear-gradient(#f3e5c0, #e8d6aa); }
.tab th { font-size: 13px; font-weight: 800; }
#modal-box { border-radius: 12px; border: 3px solid #8a5a2b; font-size: 14px;
  background: radial-gradient(ellipse at 50% 0%, #fbf3dd, #eddcb4 65%, #e1ca97); box-shadow: 0 0 0 2px var(--bois-fonce), 0 24px 70px rgba(0,0,0,.8); }
#modal-box h2 { font-family: var(--titre); font-size: 28px; font-weight: 400; line-height: 1.1; color: #5a2d12; margin-bottom: 8px; }
#modal-box h3 { font-size: 17px; font-weight: 800; }
#modal-box h4 { font-size: 15px; font-weight: 800; margin: 10px 0 5px; color: #6b3a18; }
.illu { border-radius: 8px; border: 2px solid #8a5a2b; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.dialogue .qui { font-size: 15px; font-weight: 800; }
.dialogue .texte { font-size: 15px; }
.dialogue .replique { border-radius: 10px; border: 2px solid #c9ae72; background: #fffaf0; }
.dialogue .texte, .dialogue .qui { max-width: 92ch; margin-left: auto; margin-right: auto; }
.cb-nom, .duel-tete, .jeu-tete span, .table-jeu small { font-size: 13px; font-weight: 700; }
.fin-score { font-family: var(--titre); font-size: 26px; }
.voile-box { border-radius: 16px; }
.voile-titre { font-family: var(--titre); font-size: 34px; font-weight: 400; line-height: 1.15; }
.voile-sous { font-size: 14px; font-weight: 700; }
#toast { font-family: var(--pix); font-size: 14px; font-weight: 700; border-radius: 10px; }
#bandeau { font-family: var(--pix); font-size: 14px; font-weight: 700; border-radius: 10px; }
.carte-cap { border-radius: 12px; border: 3px solid #8a5a2b; background: linear-gradient(#f6ebd0, #e8d6aa); }
.carte-cap b { font-family: var(--titre); font-size: 22px; font-weight: 400; }
.carte-cap img, .fin-col img, .voile-box img, .identite .portrait, .pan-tete .portrait { border-radius: 8px; }
.carte-cap .badge { font-size: 12px; font-weight: 800; border-radius: 8px; }
.fiche, .fiche-img { border-radius: 8px; }
.fin-col { border-radius: 10px; }
.port-hero { position: relative; min-height: 0; margin-bottom: 6px; background: none; }
.port-hero .illu { margin: 0; height: clamp(90px, 25vh, 380px); }
.port .port-tete { position: static; margin: 0 0 6px; padding: 5px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.15)); border: 1px solid #c9ae72; border-left: 6px solid var(--c); border-radius: 8px; }
.port .port-tete h2 { color: #5a2d12; text-shadow: none; margin: 0; }
.port .port-info, .port .port-moi { color: #5e3a1c; font-size: 13px; }
.port .port-moi { font-weight: 700; }
.titre-hero .illu { height: clamp(100px, 26vh, 360px); margin: 0 0 4px; }
.titre-entete { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin: 2px 0 4px; }
.titre-entete h1, .titre .titre-entete h1 { position: static; font-family: var(--titre); font-size: clamp(34px, 4.2vw, 50px); font-weight: 400; color: #8f2020; letter-spacing: 1px; margin: 0; text-shadow: 2px 2px 0 #f3d17a, 3px 3px 0 #3a2412; }
.titre .sous { font-size: 17px; font-weight: 700; margin: 0; }
.aide-nav { gap: 2px; }
.aide-nav .onglet { font-size: 12.5px; padding: 3px 9px; line-height: 1.25; border-radius: 6px; }
.aide-texte { max-height: calc(96vh - 150px); overflow: auto; }
.aide-nav { max-height: calc(96vh - 150px); overflow-y: auto; }
.modes .onglet { font-size: 14px; padding: 6px 14px; }
.titre .options label { font-size: 14px; }
.bat-intro { margin: 0 0 3px !important; font-size: 12.5px; }
.batiments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; }
.bat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom droite" "effet droite"; align-items: center; column-gap: 6px; padding: 3px 7px; border-radius: 8px; border: 1px solid #c9ae72; background: linear-gradient(#f3e5c0, #e8d6aa); line-height: 1.25; min-height: 42px; }
.bat.fait { background: linear-gradient(#e6efd2, #d3e2b8); border-color: #9bb772; }
.bat.en-cours { border-color: #c9973a; box-shadow: inset 0 0 0 1px #c9973a; }
.bat-nom { grid-area: nom; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-nom small { font-size: 11px; }
.bat-effet { grid-area: effet; font-size: 11.5px; color: #5e3a1c; }
.bat-droite { grid-area: droite; }
.bat-droite .btn { margin: 0; white-space: nowrap; font-size: 12px; padding: 3px 7px; }
.cite-impot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0; }
.cite-impot .btn { margin: 0; }
.cite-impot .grogne { font-size: 12.5px; margin-left: 4px; }
.grogne.mal { color: #8f2020; font-weight: 700; }
.btn.mini { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; margin: 0 0 0 3px; box-shadow: 0 1px 0 #5b3a1a; }
.fiche-corps { flex: 1; min-width: 0; }
.fiche-btns { float: right; display: flex; gap: 2px; margin: 0 0 2px 4px; }
.fiche-btns .btn.mini { margin: 0; }
.portrait-mini { float: left; width: 64px; height: 64px; margin: 2px 12px 4px 0; border-radius: 8px; border: 2px solid #6b4426; overflow: hidden; background: #1a2340; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.portrait-mini img { width: 100%; height: 100%; object-fit: cover; }
.dialogue .qui-desc { max-width: 92ch; margin: -2px auto 6px; font-size: 12.5px; font-style: italic; color: #6b5a44; line-height: 1.35; }
.carnet { color: #3f5f7a; font-style: italic; }
.lecture { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-style: normal; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.lecture.franc { background: #dcecd2; color: #2f5a22; border: 1px solid #8fb07a; }
.lecture.douteux { background: #f1dcc8; color: #7a3a14; border: 1px solid #c9926a; }
.lecture.incertain { background: #efe6cf; color: #5a4a2a; border: 1px solid #b8a27a; }
.lecture small { font-size: 11px; font-weight: 600; opacity: .8; }
.dernier-echange { display: block; font-size: 14px; color: #5a3a1a; }
.duel-postures .btn small, html.bois .choix-dialogue.duel-postures .btn small, .duel-choix .btn small, html.bois .duel-choix .btn small {
  display: inline-block; flex: 0 0 auto; width: auto; margin: 3px 0 0; padding: 1px 8px; border-radius: 6px;
  background: rgba(255, 246, 222, .92); border: 1px solid rgba(90, 58, 26, .45);
  color: #2a1606 !important; text-shadow: none !important; font-weight: 800; letter-spacing: .01em; }
html.bois .choix-dialogue.duel-postures .btn[disabled] small { background: rgba(255, 246, 222, .55); }
.duel-postures .btn, html.bois .duel-postures .btn, .duel-choix .btn, html.bois .duel-choix .btn { position: relative; overflow: visible; }
.duel-postures .btn small, html.bois .choix-dialogue.duel-postures .btn small, .duel-choix .btn small, html.bois .duel-choix .btn small {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 20; margin: 0;
  padding: 4px 10px; border-radius: 7px; background: #fffdf6; border: 1px solid #c9a86a; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  color: #2a1606 !important; text-shadow: none !important; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.duel-postures .btn:hover small, .duel-postures .btn:focus-visible small, .duel-choix .btn:hover small, .duel-choix .btn:focus-visible small { display: block; }
.lecture-jauge { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 2px 9px; border-radius: 10px; vertical-align: 1px; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #efe6cf; border: 1px solid #b8a27a; color: #4a3a1a; }
.lecture-jauge.franc { background: #dcecd2; border-color: #8fb07a; color: #2f5a22; }
.lecture-jauge.douteux { background: #f1dcc8; border-color: #c9926a; color: #7a3a14; }
.lj-piste { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; opacity: .9; }
.lj-rail { position: relative; display: inline-block; width: 84px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #b8432e, #d9a441 50%, #4f9a3c); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.lj-zone { position: absolute; top: -3px; bottom: -3px; border-radius: 6px; background: rgba(255,255,255,.55); border: 2px solid #2a1606; box-shadow: 0 0 5px rgba(255,255,255,.8); }
.garde-picto { display: inline-block; vertical-align: middle; margin-right: 7px; }
.garde-picto img { width: 34px; height: 34px; border-radius: 7px; border: 1px solid #6b4426; display: block; }
.arene-visage { display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 6px; border: 1px solid #6b4426; background: #1a2340; font-size: 16px; line-height: 26px; text-align: center; }
.arene-visage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garde-dit { font-size: 12.5px; font-style: normal; font-weight: 700; color: #6b4426; white-space: nowrap; }
.duel-fen .portrait-mini, .arene-fin .portrait-mini { width: 88px; height: 88px; }
.arene-fin .texte p { margin: 0 0 6px; }
.duel-fen .replique, .arene-fin .replique { display: flow-root; }
.duel-fen .replique > .qui, .duel-fen .replique > .qui-desc, .duel-fen .replique > .texte { margin-left: 0; margin-right: 0; max-width: none; }
.duel-postures, html.bois .duel-postures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.duel-postures .btn, html.bois .duel-postures .btn, .duel-choix .btn, html.bois .duel-choix .btn { min-height: 0; padding: 2px 10px; line-height: 1.15; }
html.bois .duel-postures .btn, html.bois .duel-choix .btn { border-width: 8px !important; }
.duel-postures .btn small, html.bois .choix-dialogue.duel-postures .btn small, .duel-choix .btn small, html.bois .duel-choix .btn small { font-size: 14px; font-weight: 700; margin-top: 1px; }
.duel-choc { position: absolute; z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 5%; background: radial-gradient(ellipse at center, rgba(20,12,4,.6), rgba(20,12,4,.2) 65%, rgba(20,12,4,0)); transition: opacity .45s; }
.duel-choc.fin { opacity: 0; }
.choc-tuile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.choc-img img { display: block; width: clamp(64px, 10vw, 150px); height: auto; aspect-ratio: 1; border-radius: 12px; border: 3px solid #f3e5c0; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.choc-img { font-size: 56px; line-height: 1; }
.choc-nom { color: #fff; text-shadow: 0 2px 3px #000, 0 0 6px #000; font: 600 14px/1.2 var(--txt); text-align: center; }
.choc-nom b { font-size: 17px; }
.choc-tuile.gauche { animation: choc-g .45s cubic-bezier(.2,1.4,.5,1) both; }
.choc-tuile.droite { animation: choc-d .45s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes choc-g { from { transform: translateX(-170%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes choc-d { from { transform: translateX(170%) rotate(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.choc-eclat { font-size: clamp(40px, 7vw, 92px); color: #ffd23f; text-shadow: 0 0 18px #fff3b0, 0 0 4px #000; animation: choc-eclat .6s .35s ease-out both; }
@keyframes choc-eclat { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 45% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
.choc-tuile.vainqueur .choc-img img { animation: choc-gagne .45s .75s ease-out both; }
@keyframes choc-gagne { to { transform: scale(1.14); border-color: #ffd23f; box-shadow: 0 0 26px #ffd23f; } }
.choc-tuile.vaincu .choc-img img { animation: choc-perd .55s .75s ease-out both; }
@keyframes choc-perd { 0% { transform: none; } 25% { transform: translateX(-7px) rotate(-5deg); } 50% { transform: translateX(7px) rotate(5deg); } 100% { transform: translateY(8px) rotate(-7deg); filter: grayscale(.85) brightness(.65); } }
.choc-verdict { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 400 clamp(20px, 2.8vw, 36px)/1 var(--titre); color: #ffd23f; text-shadow: 3px 3px 0 #3a2412, 0 0 8px #000; animation: choc-verdict .4s .8s ease-out both; }
.duel-choc.perdu .choc-verdict { color: #ffb0a4; }
@keyframes choc-verdict { from { transform: translate(-50%, 18px) scale(.6); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.eglise-fen .illu { height: clamp(80px, 19vh, 280px); }
.eglise-fen .rang-nom { width: 190px; }
.bloc .mission small { font-size: 11px; }
.port .liste-actions .ligne-action { line-height: 1.35; padding: 5px 8px; }
.port .liste-actions .ligne-action.quete { margin-bottom: 0; }
.aide-nav .onglet { padding: 2px 9px; line-height: 1.2; }
.jeu[data-table] .illu { height: clamp(56px, 11vh, 110px); margin-bottom: 4px; }
.jeu-tete h2 { margin-bottom: 2px !important; }
#jeu-chiffres { font-size: 13px; }
#jeu-chiffres .bien { color: #2e7d32; } #jeu-chiffres .mal { color: #8f2020; }
kbd { display: inline-block; font-family: var(--txt); font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; margin-left: 3px; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); background: rgba(255,255,255,.55); color: #3a2412; vertical-align: 1px; }
.btn.danger kbd { background: rgba(255,255,255,.25); color: #fff; }
.mises { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; font-weight: 700; margin: 2px 0 4px; }
.mise-somme { min-width: 118px; font-size: 14px; }
.mise-somme b { font-size: 17px; color: #7a3d0a; }
.mises .btn.petit { padding: 3px 9px; margin: 0; font-size: 12px; }
.mises small { font-weight: 400; }
.jeton { width: 38px; height: 38px; border-radius: 50%; border: 3px dashed #fff; font-family: var(--pix); font-size: 12px; font-weight: 800; color: #fff; cursor: var(--c-main); box-shadow: 0 0 0 2px #2a1a0e, 0 3px 4px rgba(0,0,0,.4); text-shadow: 0 1px 1px #000; background: #7a7a7a; transition: transform .1s; padding: 0; }
.jeton:hover:not([disabled]) { transform: translateY(-2px); }
.jeton.choisi { box-shadow: 0 0 0 2px #2a1a0e, 0 0 0 5px #ffd23f, 0 3px 6px rgba(0,0,0,.5); transform: translateY(-2px); }
.jeton[disabled] { opacity: .55; cursor: var(--c-fleche); }
.j10 { background: #8c8c8c; } .j25 { background: #2e8b57; } .j50 { background: #2f6fb3; } .j100 { background: #1b1b1b; } .j250 { background: #7b3fa0; } .j500 { background: #c0392b; } .j1000 { background: #c9973a; }
.tapis { position: relative; display: flex; align-items: center; justify-content: space-around; gap: 14px; flex-wrap: wrap; margin: 4px 0; padding: 10px 14px; border-radius: 14px; border: 5px solid #5a3a1a; color: #f6efd9;
  background: radial-gradient(ellipse at 50% 30%, #2f8a57, #1c5a38 70%, #154428); box-shadow: inset 0 0 30px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.35); min-height: 150px; }
.tapis small { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; text-shadow: 0 1px 2px #000; }
.cartes { display: flex; gap: 6px; min-height: 92px; align-items: center; }
.carte { position: relative; display: inline-block; width: 62px; height: 88px; border-radius: 7px; background: linear-gradient(#fffef8, #f1e9d4); border: 1px solid #8a7a5a; box-shadow: 0 3px 6px rgba(0,0,0,.45); color: #1a1a1a; font-family: Georgia, serif; font-weight: 700; }
.carte.rouge { color: #c0271d; }
.carte .coin { position: absolute; top: 4px; left: 6px; font-size: 14px; line-height: 1; text-align: center; }
.carte .coin.bas { top: auto; left: auto; bottom: 4px; right: 6px; transform: rotate(180deg); }
.carte .centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.carte.dos { background: repeating-linear-gradient(45deg, #7a1f1f 0 5px, #9e2b2b 5px 10px); border: 3px solid #f1e9d4; }
.carte.dos.petite { width: 22px; margin-right: -12px; }
.carte.fantome { opacity: .18; box-shadow: none; }
.carte.arrive { animation: carteArrive .28s ease-out; }
.carte.retourne { animation: carteRetourne .35s ease-out; }
@keyframes carteArrive { from { transform: translate(-60px, -40px) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes carteRetourne { 0% { transform: scaleX(0.05); } 100% { transform: scaleX(1); } }
.mains { display: flex; gap: 18px; }
.main { padding: 4px 8px; border-radius: 10px; border: 2px solid transparent; }
.main.active { border-color: #ffd23f; background: rgba(255,255,255,.08); }
.main.res-bien small b { color: #aef0b0; } .main.res-mal small b { color: #ffb4a8; }
.sabot { position: absolute; right: 10px; top: 8px; font-size: 12px; opacity: .75; }
.jeu-message { border-radius: 8px; font-size: 14px; }
.jeu-message.bien { border-color: #6fbf73; background: #eef9e8; }
.jeu-message.mal { border-color: #d98a7a; background: #fcefe9; }
.actions-jeu { gap: 6px; }
.actions-jeu .btn small { display: block; }
.tapis.roulette { justify-content: flex-start; flex-wrap: nowrap; gap: 12px; padding: 8px 10px; }
#roue-canvas { width: 196px; height: 196px; flex: 0 0 196px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.table-roue { flex: 1; min-width: 0; }
.grille-roue { position: relative; display: grid; grid-template-columns: 30px repeat(12, minmax(0, 1fr)) 40px; grid-auto-rows: 30px; gap: 2px; user-select: none; }
.grille-roue .zero { grid-row: span 3; }
.dehors-roue { display: flex; gap: 2px; margin: 2px 42px 0 32px; }
.dehors-roue .case { flex: 1; height: 26px; }
.case { position: relative; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; color: #fff; font-family: Georgia, serif; font-weight: 700; font-size: 13px; background: transparent; cursor: var(--c-main); padding: 0; }
.case.rouge { background: #a8231b; } .case.noir { background: #1b1b1b; } .case.vert { background: #1f7a3a; }
.case.colonne, .case.douzaine { background: rgba(0,0,0,.18); font-size: 11px; }
.case.simple { font-size: 16px; }
.case:hover:not([disabled]) { outline: 2px solid #ffd23f; z-index: 1; }
.case.gagnante { box-shadow: inset 0 0 0 3px #ffd23f; animation: gagne 1s ease-in-out 3; }
.case.vise { outline: 2px solid #ffd23f; outline-offset: -1px; filter: brightness(1.45); z-index: 1; }
@keyframes gagne { 50% { filter: brightness(1.6); } }
.jeton-pose { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; border-radius: 50%; border: 2px dashed #fff; font-style: normal; font-size: 9px; line-height: 16px; text-align: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.6); z-index: 2; }
.jeton-combo { right: auto; top: auto; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #2a1a0e, 0 2px 4px rgba(0,0,0,.6); pointer-events: none; z-index: 3; }
.roue-infos { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.roue-infos .indice { flex: 1; min-width: 0; font-size: 11px; opacity: .72; text-align: center; }
.histo { display: flex; gap: 2px; }
.bille-histo { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 20px; text-align: center; color: #fff; }
.bille-histo.rouge { background: #a8231b; } .bille-histo.noir { background: #1b1b1b; } .bille-histo.vert { background: #1f7a3a; }
.num-rouge { color: #b3261e; } .num-noir { color: #1b1b1b; } .num-vert { color: #1f7a3a; }
.tapis.des { justify-content: space-between; }
.portrait-adv { float: left; width: 88px; height: 88px; margin: 0 8px 0 0; border-radius: 8px; border: 2px solid #c9973a; overflow: hidden; background: #1a2340; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.portrait-adv img { width: 100%; height: 100%; object-fit: cover; }
.joueur-des:first-child { text-align: left; }
.joueur-des { text-align: center; }
.joueur-des > div { display: flex; gap: 5px; justify-content: center; min-height: 54px; align-items: center; flex-wrap: wrap; }
.tapis .de { width: 50px; height: 50px; flex: 0 0 auto; padding: 7px; gap: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px #b1a181, 0 3px 5px rgba(0,0,0,.45); margin: 0; }
.tapis .de.masque { background: linear-gradient(#6b4426, #3a2412); box-shadow: inset 0 0 0 2px #c9973a, 0 3px 5px rgba(0,0,0,.45); }
.etoiles { color: #ffd23f; letter-spacing: 1px; } .etoiles .vide { color: rgba(255,255,255,.28); }
.tapis .de.compte { box-shadow: 0 0 0 3px #ffd23f, 0 3px 6px rgba(0,0,0,.5); }
.tapis .de.roule { animation: deRoule .55s ease-out; }
@keyframes deRoule { 0% { transform: translateY(-18px) rotate(-40deg); } 60% { transform: translateY(3px) rotate(15deg); } 100% { transform: none; } }
.gobelet { font-size: 40px; }
.historique-des { list-style: none; margin: 0; padding: 6px 10px; min-width: 150px; background: rgba(0,0,0,.22); border-radius: 8px; font-size: 13px; }
.historique-des li { margin: 1px 0; } .historique-des li.j { color: #ffe9a8; }
.annonce { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.annonce .btn.petit { padding: 1px 8px; margin: 0; }
.marchand-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.marchand-cols > div > .nego-ligne:first-child { margin-top: 0; }
.marchand-cols .liste-actions { margin-bottom: 6px; }
.douane-ligne { margin: 4px 0 2px; font-size: 13px; line-height: 1.35; background: #e6d9b3; border: 2px solid #c9b26f; padding: 5px 7px; }
.douane-ligne .btn.petit { margin: 0 0 0 4px; padding: 1px 8px; font-size: 12px; }
.douane-ligne small { opacity: .8; }
.fiche.ancetre { align-items: flex-start; }
.fiche.ancetre .fiche-ligne { font-size: 12px; line-height: 1.4; }
.fiche.ancetre .fiche-img img { filter: sepia(.35) saturate(.85); }
#modal.accueil { background: rgba(5, 8, 20, .78) url('../illustrations/accueil_fond.webp') center / cover no-repeat; background-blend-mode: multiply; }
#modal-box.boite-accueil { width: min(1600px, 96vw); padding: 0 0 clamp(14px, 2.6vh, 28px); }
.titre { text-align: left; }
.titre-hero { position: relative; margin: 0 0 clamp(12px, 2.2vh, 24px); }
.boite-accueil .titre-hero .illu, .titre .titre-hero .illu { width: 100%; height: auto;
  aspect-ratio: 4 / 1; max-height: 62vh; margin: 0; border: 0; border-radius: 9px 9px 0 0; box-shadow: none; }
.titre-hero::before { content: ''; position: absolute; inset: 0; border-radius: 9px 9px 0 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 34% 70% at 0 0, rgba(12, 8, 3, .62), rgba(12, 8, 3, 0)); }
.titre-pose { position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 26px 16px; z-index: 1;
  background: linear-gradient(rgba(12, 8, 3, 0), rgba(12, 8, 3, .82) 62%); pointer-events: none; }
.titre-pose h1 { position: static; margin: 0; font-family: var(--titre); font-weight: 400; letter-spacing: 1px;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.12; color: #ffd24a;
  text-shadow: 3px 4px 0 #2a1a0e, -1px -1px 0 #2a1a0e; }
.titre-pose .sous { display: block; margin-top: 2px; font-family: var(--pix); font-size: clamp(9px, 1vw, 13px);
  color: #f0dcae; text-shadow: 2px 2px 0 #2a1a0e; letter-spacing: 1px; }
.titre .titre-entete { display: none; }
.titre-pose .demo-bandeau { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 2px solid #ffd24a; border-radius: 999px;
  font-family: var(--pix); font-size: clamp(9px, .95vw, 12px); color: #ffd24a; background: rgba(12, 8, 3, .6); letter-spacing: 1px; }
.demo-fin { max-width: 640px; margin: 0 auto; }
.demo-fin p { line-height: 1.4; }
.demo-fin .visage-port { float: left; margin: 0 10px 4px 0; }
.demo-fin ul { display: inline-block; text-align: left; margin: 4px auto 8px; padding-left: 20px; line-height: 1.45; }
.demo-fin h3 { margin: 10px 0 2px; }
.demo-fin .boutons { flex-wrap: wrap; gap: 8px; }
.titre-modes { position: absolute; top: clamp(10px, 2.2vh, 20px); left: clamp(12px, 1.6vw, 24px); z-index: 2;
  display: flex; gap: clamp(10px, 1.2vw, 18px); }
.medaillon { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; margin: 0;
  background: none; border: 0; cursor: var(--c-main); }
.medaillon-img { display: flex; align-items: center; justify-content: center; width: clamp(68px, 13.5vh, 112px);
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #f3e5c0; border: 3px solid #c9973a;
  box-shadow: 0 0 0 2px #2a1a0e, 0 5px 12px rgba(0, 0, 0, .55); font-size: clamp(36px, 7vh, 58px);
  transition: transform .15s, opacity .15s, filter .15s, box-shadow .15s; }
.medaillon-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); image-rendering: auto; }
.medaillon-img.mode-saga img { filter: brightness(1.45) contrast(1.15) saturate(1.1); }
.medaillon-nom { font-family: var(--titre); font-size: clamp(17px, 3vh, 24px); line-height: 1; color: #ffe8bd;
  text-shadow: 2px 2px 0 #2a1a0e, -1px -1px 0 #2a1a0e, 1px -1px 0 #2a1a0e, -1px 1px 0 #2a1a0e; }
.medaillon:not(.actif) .medaillon-img { transform: scale(.84); opacity: .78; filter: saturate(.6); }
.medaillon:not(.actif) .medaillon-nom { opacity: .8; }
.medaillon:hover .medaillon-img { opacity: 1; filter: none; }
.medaillon.actif .medaillon-img { border-color: #ffd24a;
  box-shadow: 0 0 0 2px #2a1a0e, 0 0 18px 5px rgba(255, 210, 74, .6), 0 5px 12px rgba(0, 0, 0, .5); }
.medaillon.actif .medaillon-nom { color: #ffd24a; }
.titre-bas { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, .78fr);
  padding: 0 clamp(18px, 2.2vw, 34px); align-items: stretch; }
.titre-bas .colonne { min-width: 0; padding: 0 clamp(16px, 2vw, 30px); }
.titre-bas .colonne:first-child { padding-left: 0; }
.titre-bas .colonne:last-child { padding-right: 0; }
.titre-bas .colonne + .colonne { border-left: 2px solid rgba(139, 105, 58, .25); }
.fiche-titre { font-family: var(--titre); font-size: clamp(28px, 4.6vh, 38px); line-height: 1; color: #8f2020; margin: 0 0 5px; }
.fiche-titre small { font-family: var(--txt); font-size: clamp(14px, 2.3vh, 17px); font-weight: 700; color: #8a6a3a;
  margin-left: 10px; letter-spacing: .02em; }
.fiche-court { margin: 0 0 6px; font-size: clamp(14px, 2.4vh, 17px); font-weight: 700; line-height: 1.35; color: #5e3a1c; }
.fiche-mode { display: grid; }
.accueil-fiche { grid-area: 1 / 1; min-width: 0; }
.accueil-fiche.cachee { visibility: hidden; }
.fiche-long { margin: 0; font-size: clamp(14px, 2.3vh, 16px); line-height: 1.45; color: #6b4426; }
.reglages { display: grid; gap: clamp(10px, 2vh, 18px); margin: 0; }
.reglage { display: grid; gap: 4px; justify-items: start; }
.reglage-nom { font-family: var(--txt); font-size: clamp(13px, 2.1vh, 15px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9a7a48; }
.reglettes { display: inline-flex; max-width: 100%; border: 2px solid #c9ae72; border-radius: 999px; overflow: hidden;
  background: #f7ecd0; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; }
.reglette { font-family: var(--txt); font-size: clamp(14px, 2.4vh, 17px); font-weight: 700; white-space: nowrap; cursor: var(--c-main);
  padding: clamp(6px, 1.1vh, 9px) clamp(12px, 1.3vw, 18px); border: 0; border-radius: 0; background: transparent; color: #6b4426; }
.reglette + .reglette { border-left: 1px solid #dcc58f; }
.reglette:hover { background: #fff3cf; }
.reglette.actif { background: #8f2020; color: #ffe8bd; }
.boutons-accueil { display: grid; gap: 8px; margin: 0 0 clamp(8px, 1.6vh, 14px); }
.colonne-partir { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 14px); }
.tuile-accueil { position: relative; display: block; width: 100%; padding: 0; margin: 0; overflow: hidden; cursor: var(--c-main);
  border: 3px solid #c9973a; border-radius: 10px; background: linear-gradient(160deg, #3b2a18, #1d140b);
  box-shadow: 0 0 0 2px #2a1a0e, 0 5px 12px rgba(0, 0, 0, .35); transition: transform .12s, box-shadow .12s; }
.titre .tuile-accueil .illu { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; box-shadow: none;
  object-fit: cover; object-position: center; transition: transform .25s, filter .15s; }
.tuile-mer { flex: 1 1 auto; min-height: clamp(96px, 17vh, 190px); }
.tuile-reprendre { flex: 0 0 auto; height: clamp(58px, 10.5vh, 96px); border-color: #a07a44; }
.tuile-nom { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vh, 28px) 14px clamp(6px, 1.2vh, 10px);
  text-align: left; font-family: var(--titre); font-size: clamp(22px, 4vh, 34px); line-height: 1; letter-spacing: .5px; color: #ffd24a;
  text-shadow: 2px 3px 0 #2a1a0e, -1px -1px 0 #2a1a0e; background: linear-gradient(rgba(12, 8, 3, 0), rgba(12, 8, 3, .82) 58%); }
.tuile-reprendre .tuile-nom { font-size: clamp(17px, 2.9vh, 24px); color: #f0dcae; padding-top: clamp(12px, 2vh, 18px); }
.tuile-accueil:hover, .tuile-accueil:focus-visible { transform: translateY(-2px); border-color: #ffd24a; outline: none;
  box-shadow: 0 0 0 2px #2a1a0e, 0 0 16px 4px rgba(255, 210, 74, .55), 0 7px 14px rgba(0, 0, 0, .4); }
.tuile-accueil:hover .illu { transform: scale(1.04); filter: brightness(1.08); }
.colonne-partir .liens-accueil { justify-content: space-between; }
.lien-icone { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-right: 5px; vertical-align: -.35em; }
.lien-icone img { width: 100%; height: 100%; object-fit: contain; }
.btn.grand { font-size: clamp(17px, 3vh, 23px); padding: clamp(14px, 2.6vh, 22px) 18px; }
.liens-accueil { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lien { background: none; border: 0; padding: 2px 0; cursor: var(--c-main); font-family: var(--txt); font-size: clamp(14px, 2.3vh, 16px);
  font-weight: 700; color: #7a5a33; text-decoration: underline; text-underline-offset: 3px; }
.lien:hover { color: #8f2020; }
.lien.danger { color: #9b3020; }
@media (max-width: 960px) {
  .titre-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .colonne-partir { grid-column: 1 / -1; border-left: 0 !important; border-top: 2px solid rgba(139, 105, 58, .25); padding: 12px 0 0 !important;
    flex-flow: row wrap; }
  .tuile-mer { flex: 2 1 260px; } .tuile-reprendre { flex: 1 1 200px; height: auto; min-height: clamp(96px, 17vh, 190px); }
  .colonne-partir .liens-accueil { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 760px) { .titre-bas { grid-template-columns: 1fr; } .titre-bas .colonne + .colonne { border-left: 0; padding-left: 0; } }
#modal-box.boite-ancetres { width: min(720px, 94vw); }
.ceux-davant h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.ceux-davant h2 small { display: block; font-family: var(--txt); font-size: 14px; font-weight: 700;
  color: #7a5a33; margin-top: 3px; }
.ceux-davant .gen h4 { display: none; }
.ceux-davant .fiches { grid-template-columns: 1fr; gap: 10px; }
.ceux-davant .fiche.ancetre { align-items: center; gap: 16px; padding: 12px 16px; }
.ceux-davant .fiche-img { flex: 0 0 112px; width: 112px; height: 112px; }
.ceux-davant .fiche.ancetre b { font-family: var(--titre); font-weight: 400; font-size: 23px; line-height: 1.1;
  color: #7a2418; }
.ceux-davant .fiche.ancetre > div > small { font-size: 13px; color: #7a5a33; }
.ceux-davant .fiche.ancetre .fiche-ligne { font-size: 15.5px; line-height: 1.6; margin-top: 5px; }
.ecusson-grand { width: 54px; height: 54px; flex: 0 0 auto; }
.ecusson-onglet { width: 22px; height: 22px; vertical-align: -6px; margin-right: 1px; }
.ecusson-bouton { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }
.ecusson-repli { font-size: 17px; }
@media (max-height: 700px) {
  .ceux-davant .fiche-img { flex-basis: 92px; width: 92px; height: 92px; }
  .ceux-davant .fiche.ancetre { padding: 9px 13px; }
  .ceux-davant .fiche.ancetre .fiche-ligne { font-size: 14px; line-height: 1.5; }
  .ecusson-grand { width: 42px; height: 42px; }
}
.cours { font-weight: 800; letter-spacing: -1px; cursor: help; }
.cours.haut { color: #1f7a3a; }
.cours.bas { color: #9b3020; }
.cours.plat { color: #b39a63; }
.cours.pale { opacity: .55; }
.marchand-cols .tab { table-layout: auto; }
.marchand-cols .tab td:last-child { white-space: nowrap; text-align: right; width: 1%; }
.marchand-cols .tab td:last-child .btn.petit { padding: 3px 8px; font-size: 11.5px; margin-left: 4px; }
.marchand-cols .tab th, .marchand-cols .tab td { padding: 3px 5px; }
.marchand-cols .tab th { line-height: 1.2; }
.epilogue .illu { height: clamp(70px, 16vh, 240px); }
.epilogue h2 { margin: 6px 0 4px; text-align: center; }
.epilogue-corps { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.epilogue-texte p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; text-align: justify; }
.epilogue-texte p:last-child { font-style: italic; opacity: .85; }
.epilogue-restes { border-left: 3px solid #c9a86a; padding-left: 12px; }
.epilogue-restes h4 { margin: 0 0 5px; font-size: 14px; }
.epilogue-restes ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.epilogue-restes li { margin: 0 0 4px; line-height: 1.3; }
.epilogue-restes small { opacity: .75; }
.regles-jeu { position: relative; margin: 1px 0 3px; }
.regles-jeu > summary { display: inline-block; cursor: var(--c-main); padding: 2px 10px; border: 2px solid #c9a86a; border-radius: 8px;
  background: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; color: #5a3a1a; list-style: none; }
.regles-jeu > summary::-webkit-details-marker { display: none; }
.regles-jeu > summary::before { content: '▸ '; }
.regles-jeu[open] > summary { background: #f6e9c8; }
.regles-jeu[open] > summary::before { content: '▾ '; }
.regles-corps { position: absolute; z-index: 6; top: 100%; left: 0; width: min(640px, 100%); max-height: 46vh; overflow: auto;
  margin-top: 3px; padding: 6px 12px; border: 3px solid #8a6a2a; border-radius: 10px; background: #fdf6e3; font-size: 13px; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.regles-corps p { margin: 5px 0; }
.tapis.moulin { justify-content: center; gap: 28px; flex-wrap: nowrap; }
.moulin-plateau { width: 232px; height: 232px; flex: 0 0 232px; }
.moulin-plateau path { fill: none; stroke: #e6d2a0; stroke-width: 0.07; stroke-linecap: round; stroke-linejoin: round; }
.moulin-plateau .mp { cursor: var(--c-fleche); transition: r .12s, filter .12s; }
.moulin-plateau .mp.vide { fill: #1b4a31; stroke: #e6d2a0; stroke-width: 0.05; }
.moulin-plateau .mp.moi { fill: #f4e7c6; stroke: #6b4426; stroke-width: 0.075; }
.moulin-plateau .mp.lui { fill: #241b13; stroke: #a5822f; stroke-width: 0.075; }
.moulin-plateau .mp.clic { cursor: var(--c-main); }
.moulin-plateau .mp.clic:hover { filter: brightness(1.45); }
.moulin-plateau .mp.cible { stroke: #ffd23f; stroke-width: 0.085; }
.moulin-plateau .mp.choisi { stroke: #ffd23f; stroke-width: 0.12; }
.moulin-plateau .mt { pointer-events: none; fill: none; stroke: #e0579f; }
.moulin-plateau .mt-arrivee { stroke-width: 0.075; filter: drop-shadow(0 0 2px rgba(224, 87, 159, .85)); }
.moulin-plateau .mt-trait { stroke-width: 0.1; stroke-linecap: round; opacity: .5; }
.moulin-plateau .mt-depart { stroke-width: 0.05; stroke-dasharray: 0.09 0.07; opacity: .85; }
.moulin-plateau .mt-prise { stroke-width: 0.055; stroke-dasharray: 0.11 0.08; }
.moulin-cote { min-width: 168px; }
.joueur-moulin { margin-bottom: 8px; }
.pions-reste { font-size: 15px; letter-spacing: 2px; line-height: 1.1; }
.pions-reste.moi { color: #f4e7c6; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pions-reste.lui { color: #4a3a28; text-shadow: 0 0 2px #d8c48a, 0 0 4px #d8c48a; }
.tapis.pharaon { justify-content: flex-start; flex-wrap: nowrap; gap: 16px; padding: 8px 12px; }
.taille-pharaon { display: flex; gap: 12px; flex: 0 0 auto; text-align: center; }
.taille-pharaon .rang-cartes { min-width: 72px; }
.taille-pharaon .cartes { min-height: 84px; justify-content: center; }
.taille-pharaon .perd small { color: #ffc0b4; } .taille-pharaon .gagne small { color: #b6efbb; }
.table-pharaon { flex: 1; min-width: 0; }
.grille-pharaon { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.case.rang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 44px; background: rgba(0,0,0,.22); font-size: 15px; }
.case.rang .reste { font-size: 9px; line-height: 1; letter-spacing: 1px; color: #ffe9a8; text-shadow: 0 1px 1px #000; }
.case.rang.morte { opacity: .35; }
.case.rang.perdante { background: #a8231b; }
.case.rang.gagnante { background: #1f7a3a; }
.jeton-pose.cuivre { border-style: solid; border-color: #f0c070; background: #8a5a20; letter-spacing: -1px; }
.au-cuivre { color: #f0c070; font-weight: 700; }
.derniere-taille { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; }
.derniere-taille small { display: inline; margin: 0; }
.derniere-taille .btn.petit { padding: 2px 8px; margin: 0; font-size: 12px; }
.versus { font-size: 30px; }
.regate-intro .illu, .regate-fin .illu { height: clamp(80px, 19vh, 280px); }
.regate-intro .illu, .regate-fin .illu { object-position: center 60%; }
.regles-regate { margin: 4px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.regate { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto; gap: 8px; }
.regate-scene { position: relative; border-radius: 10px; overflow: hidden; border: 3px solid #5a3a1a; background: #1b3d5c; line-height: 0; align-self: start; }
#regate-canvas { width: 100%; height: auto; aspect-ratio: 360 / 196; image-rendering: pixelated; display: block; }
#regate-hud { position: absolute; inset: 0; pointer-events: none; line-height: 1.2; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; font-family: var(--pix); }
.hud-g, .hud-d { position: absolute; top: 8px; font-size: 13px; background: rgba(10,20,35,.35); padding: 4px 8px; border-radius: 8px; }
.hud-g { left: 8px; } .hud-d { right: 8px; text-align: right; }
.hud-g b, .hud-d b { font-size: 22px; }
.fleche-cible { display: inline-block; font-size: 18px; margin-left: 6px; color: #ffd23f; }
.hud-risee { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; background: rgba(15,40,70,.6); padding: 3px 10px; border-radius: 8px; }
.hud-risee.avant { opacity: .8; font-size: 13px; }
.hud-message { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; background: rgba(90,58,26,.85); padding: 4px 12px; border-radius: 8px; white-space: nowrap; }
.hud-message.conseil { background: rgba(20,30,50,.7); font-size: 13px; }
.regate-compte { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-family: var(--titre); font-size: 70px; color: #ffd23f; text-shadow: 3px 3px 0 #3a2412; }
.regate-compte.go { font-size: 54px; }
.hud-louvoyer { color: #ffd23f; font-size: 11px; }
.abandon-court { display: none; }
.regate-nom { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 6px 2px 4px; border-radius: 6px; background: rgba(20,14,8,.55); color: #fff; text-shadow: none; }
.regate-nom i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; border: 1px solid rgba(255,255,255,.7); vertical-align: 0; }
.tuto-bulle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 68%; background: rgba(255,248,230,.96); color: #3a2412; text-shadow: none; font-family: inherit; font-size: 15px; line-height: 1.35; text-align: center; padding: 10px 14px; border: 3px solid #c9ae72; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.tuto-bulle b { color: #8f2020; }
.tuto-bulle small { display: block; margin-top: 6px; font-size: 11px; color: #6b4a2a; }
.tuto-fleche { position: absolute; font-size: 34px; line-height: 1; color: #ffd23f; text-shadow: 0 0 4px #000, 2px 2px 0 #3a2412; animation: tuto-bat .55s ease-in-out infinite alternate; }
.tuto-fleche.haut { transform: translateX(-50%); } .tuto-fleche.bas { transform: translate(-50%, -100%); }
.tuto-fleche.droite { --dx: 6px; --dy: 0px; } .tuto-fleche.haut { --dx: 0px; --dy: -6px; } .tuto-fleche.bas { --dx: 0px; --dy: 6px; }
@keyframes tuto-bat { from { translate: 0 0; } to { translate: var(--dx, 0) var(--dy, -6px); } }
.regate-commandes .btn.tuto-cible { position: relative; animation: tuto-luit .5s ease-in-out infinite alternate; }
.regate-commandes .btn.tuto-cible::after { content: '⬇'; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: 26px; color: #ffd23f; text-shadow: 0 0 4px #000, 2px 2px 0 #3a2412; pointer-events: none; animation: tuto-bat .55s ease-in-out infinite alternate; }
@keyframes tuto-luit { to { filter: brightness(1.3) drop-shadow(0 0 8px #ffd23f); } }
.regate-cote { display: flex; flex-direction: column; gap: 6px; }
#regate-carte { width: 220px; height: 236px; border-radius: 8px; border: 3px solid #5a3a1a; }
#regate-classement { margin: 0; padding: 4px 8px 4px 26px; background: #fff8e6; border: 2px solid #c9ae72; border-radius: 8px; font-size: 13px; }
#regate-classement li { margin: 1px 0; } #regate-classement li.moi { font-weight: 800; color: #8f2020; }
#regate-classement small { float: right; color: #6b4a2a; font-weight: 400; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; border: 1px solid #2a1a0e; }
.regate-commandes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.regate-commandes .btn { margin: 0; user-select: none; touch-action: none; }
.regate-ecoute { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.regate-ecoute .jauge { position: relative; width: 150px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #8f2020, #e8d6aa 50%, #2f6fb3); border: 1px solid #5a3a1a; }
#regate-ecoute, #regate-ideal { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; }
#regate-ecoute { background: #2a1a0e; z-index: 2; } #regate-ideal { background: #ffd23f; box-shadow: 0 0 4px #ffd23f; opacity: .85; }
.regate-resultats { margin: 0; padding-left: 0; list-style: none; font-size: 14px; }
.regate-resultats li { display: flex; gap: 6px; padding: 3px 6px; border-bottom: 1px dashed #c9ae72; }
.regate-resultats li span { margin-left: auto; } .regate-resultats li.moi { font-weight: 800; color: #8f2020; }
.duel-fen .illu { height: clamp(70px, 17vh, 260px); }
.duel-score { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin: 2px 0 8px; padding: 4px 10px; background: #efe2c0; border-radius: 8px; }
.duel-postures { grid-template-columns: repeat(3, 1fr); }
.quetes-fen .illu { height: clamp(56px, 11vh, 110px); }
.quetes-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.quetes-cols h4:first-child { margin-top: 0; }
.quetes-fen .quete-ligne { margin: 4px 0; padding: 6px 10px; }
.quetes-fen .illu { height: clamp(38px, 8vh, 110px); }
.querelle { background: #f6eefc; border-left: 5px solid #9b5de5; border-radius: 6px; padding: 6px 10px; margin: 0 0 6px; font-size: 13px; }
.jauge-agr { height: 8px; border-radius: 4px; background: #e2d6ee; margin: 4px 0 2px; overflow: hidden; }
.jauge-agr span { display: block; height: 100%; background: linear-gradient(90deg, #7fb069, #e8b923 50%, #b3261e); }
.rivale-fiche { background: #f6eefc; border-left: 5px solid #6a3fa0; border-radius: 6px; padding: 6px 10px; margin: 0 0 6px; font-size: 13px; }
.querelle .rivale-fiche { background: none; border: 0; border-radius: 0; padding: 5px 0 0; margin: 4px 0 0; border-top: 1px solid #d9c8ee; }
.rivale-fiche > div { margin-top: 3px; }
.rivale-fiche .pacte { background: #efe3fb; border: 1px solid #c3a8e0; border-radius: 4px; padding: 4px 8px; }
.rivale-fiche .pacte > div { margin-top: 1px; }
.minute { background: #fbf4e4; border: 1px solid #d8c49a; border-radius: 4px; padding: 5px 9px; margin: 6px 0; }
.minute.vide { text-align: center; color: #8a7a5a; font-style: italic; }
.minute .clause { padding: 2px 0; font-size: 13px; line-height: 1.35; }
.minute .clause + .clause { border-top: 1px dotted #d8c49a; }
.minute .clause.rayee { text-decoration: line-through; opacity: .55; }
.rivale-fiche .ligne-action { margin-top: 4px; padding: 3px 8px; background: #efe3fb; border-color: #c3a8e0; }
.pensee { clear: both; display: flex; align-items: flex-start; gap: 16px; margin: 10px 0 0; font-size: 13px; }
.pensee-bulle { position: relative; flex: 1; min-width: 0; margin-top: 2px; padding: 7px 13px 8px; line-height: 1.4; font-style: italic;
  background: #fffdf5; border: 1px dashed #b08a3e; border-radius: 16px; }
.pensee-bulle small { font-style: normal; }
.pensee-bulle::before, .pensee-bulle::after { content: ''; position: absolute; border-radius: 50%; background: #fffdf5; border: 1px dashed #b08a3e; }
.pensee-bulle::before { left: -11px; top: 15px; width: 8px; height: 8px; }
.pensee-bulle::after { left: -18px; top: 25px; width: 5px; height: 5px; }
.avis { clear: both; display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 13px; }
.avis-visage { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid #b08a3e; background: #14203a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.avis-visage img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transform-origin: 50% 28%; }
.avis-bulle { position: relative; flex: 1; min-width: 0; margin-top: 4px; padding: 7px 30px 8px 12px; line-height: 1.4;
  background: #eef3fb; border: 1px solid #b7c8e6; border-radius: 10px; }
.avis-bulle::before { content: ''; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; background: inherit;
  border-left: 1px solid #b7c8e6; border-bottom: 1px solid #b7c8e6; transform: rotate(45deg); }
.avis-x { position: absolute; top: 2px; right: 4px; padding: 2px 6px; border: 0; background: none; font-size: 17px; line-height: 1; color: #5d6d8c; }
.avis-x:hover, .avis-x:focus-visible { color: #b3261e; }
.avis.mal .avis-bulle { background: #fcecec; border-color: #e2b3ae; }
.avis.mal .avis-bulle::before { border-color: #e2b3ae; }
.avis.mal .avis-visage { border-color: #b3261e; }
.officier-fiche { display: flex; gap: 12px; align-items: flex-start; }
.officier-fiche .portrait-mini { flex: 0 0 auto; margin: 2px 0 0; }
img.emo { height: 1.15em; width: auto; vertical-align: -0.22em; }
.etiq { display: inline-block; border: 2px solid #c9b26f; background: #f3e7c4; color: #4a3318; border-radius: 3px; padding: 1px 6px; margin: 2px 3px 2px 0; font-size: 11px; white-space: nowrap; }
.etiq.bon { border-color: #7fb069; background: #e6f2dc; color: #2f5320; }
.etiq.mal { border-color: #b3261e; background: #fbe4e2; color: #6d1b16; }
.etiq-puces { display: inline-flex; gap: 2px; margin: 0 6px; vertical-align: middle; }
.etiq-p { display: inline-block; border: 1px solid #c9b26f; background: #f3e7c4; border-radius: 3px; padding: 0 2px; font-size: 11px; line-height: 15px; cursor: help; }
.etiq-p.bon { border-color: #7fb069; background: #e6f2dc; }
.etiq-p.mal { border-color: #b3261e; background: #fbe4e2; }
.voie-m { font-size: 11px; cursor: help; }
.voie-m.clos, .voie-m.att { opacity: .7; }
.voie-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 8px 0 0; text-align: left; }
.voie-c { background: #fff8e6; border: 1px solid #c9b26f; border-radius: 6px; padding: 5px 8px; }
.voie-c b { display: block; margin-bottom: 2px; }
.voie-c small { display: block; font-size: 11.5px; line-height: 1.35; }
.voie-c small.mal { margin-top: 3px; }
.arene-cols h4 { margin: 2px 0 4px; }
.arene-echelle { padding-left: 20px; margin: 4px 0; }
.arene-echelle li { margin: 2px 0; }
.arene-echelle li.ici { font-weight: 700; }
.oracle-dit { font-style: italic; background: #f3e7c4; border-left: 4px solid #8e6bbf; padding: 6px 10px; border-radius: 0 6px 6px 0; }
.oracle-liste { margin: 6px 0; padding-left: 20px; }
.oracle-liste li { margin: 2px 0; }
.regate-ecoute .jauge-pousse { background: linear-gradient(90deg, #2f6fb3, #e8d6aa 50%, #8f2020); }
.hud-gite { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); background: rgba(143,32,32,.85); color: #fff; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.chip.quete-finie { border-color: #7fae7f; background: #e4f0dc; }
.chip.quete-echec, .chip.quete-perdue { border-color: #c98f8f; background: #f3dede; }
.illu[data-nom="querelle_affront"] { object-position: center 20%; }
.illu[data-nom="bal_amants"] { object-position: center 40%; }
.illu[data-nom="tournoi_escrime"] { object-position: center 35%; }
.illu[data-nom="traversee_diable"] { object-position: center 70%; }
.illu[data-nom="marche_siecle"] { object-position: center 40%; }
.illu[data-nom="fils_esteban"] { object-position: center 5%; }
.illu[data-nom="malediction"] { object-position: center 35%; }
.illu[data-nom="innocent_pirate"] { object-position: center 15%; }
.illu[data-nom="lettres_volees"] { object-position: center 38%; }
.illu[data-nom="ambassade"] { object-position: center 35%; }
.quete-ligne.rumeur { border-left-color: #5a9fd6; background: #eef6fc; }
.chip.quete-close { border-color: #b9b2a0; background: #efebe0; color: #6b6250; }
.actions-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.actions-grille .ligne-action { margin: 3px 0; }
.recrues-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recrues-ligne p { margin: 0; } .recrues-ligne .boutons { margin: 0; flex-shrink: 0; }
.port.dense .port-hero .illu { height: clamp(56px, 10vh, 100px); }
.port.serre .port-hero .illu { height: clamp(44px, 12vh, 200px); }
@media (max-height: 700px) { .titre-hero .illu, .titre .titre-hero .illu { height: auto; max-height: 56vh; } }
.port.serre .quetes-ici { margin-bottom: 4px; }
.port.serre .quetes-ici .ligne-action { padding: 3px 8px; }
.illu[data-nom="informateur"] { object-position: center 42%; }
.illu[data-nom="cache_contrebandiers"] { object-position: center 65%; }
.illu[data-nom="rancon_noble"] { object-position: center 35%; }
.illu[data-nom="flotte_morgan"] { object-position: center 55%; }
.illu[data-nom="seisme_port_royal"] { object-position: center 45%; }
.illu[data-nom="succession_espagne"] { object-position: center 70%; }
.illu[data-nom="medecin_etranger"] { object-position: center 35%; }
.illu[data-nom="pelerinage"] { object-position: center 70%; }
.cotes-ligne { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; margin: 2px 0 4px; }
.cotes-ligne small { color: #7a5a36; }
.btn.pouvoir.verrou { opacity: .7; filter: grayscale(.6); }
.quete-ligne.pouvoir-acquis { border-left-color: #2e7d32; background: #eef6e8; }
.quete-ligne.pouvoir-verrou { border-left-color: #9a8a70; background: #f6f1e6; }
.confirm .chances { background: #fff8e6; border-left: 4px solid #b98f1f; padding: 6px 10px; margin: 8px 0; }
.sauvegardes .ligne-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sauvegardes .boutons-ligne { display: flex; gap: 6px; flex-shrink: 0; }
.quete-ligne.serment { border-left-color: #8a5a2b; background: #fbf1dc; }
.chronique-page { display: block; }
.chronique-corps { display: flex; gap: 14px; align-items: flex-start; }
.chronique-illu .illu { height: clamp(54px, 10vh, 104px); margin: 0 0 6px; }
.chronique-portrait { flex: 0 0 96px; }
.chronique-portrait img, .chronique-portrait .emoji { width: 96px; height: 96px; border-radius: 8px; border: 2px solid #8a5a2b; display: block; font-size: 56px; text-align: center; line-height: 96px; }
.chronique-texte { flex: 1; min-width: 0; }
.chronique-texte ul { margin: 3px 0 4px; padding-left: 18px; }
.chronique-texte li { margin: 0; line-height: 1.34; }
.chronique-nom { font-weight: 800; font-size: 16px; color: #5a2d12; }
.chronique-epitaphe { font-style: italic; color: #6b3a18; margin: 2px 0 4px; }
.chronique-serment { margin: 4px 0; }
.chronique-ironie { font-style: italic; color: #7a5a36; margin: 4px 0; }
.chronique-fin { color: #7a5a36; }
.livre-fen .onglets-mini { margin-bottom: 8px; }
.aide-verrou { font-size: 15px; margin-top: 30px; }
.options .case { display: inline-flex; align-items: center; gap: 6px; }
.registre-fen .illu { height: clamp(56px, 10vh, 100px); }
.cap-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px 8px; }
.cap-fiche { background: #fff8e6; border-left: 5px solid var(--c); border-radius: 6px; padding: 4px 8px; font-size: 12px; line-height: 1.28; }
.cap-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-fiche.mort { opacity: .6; filter: grayscale(.5); }
.cap-fiche.captif { background: #f3ece0; }
.cap-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cap-tete b { font-size: 14px; color: #3a1f0e; }
.cap-tete small { color: #7a5a36; text-align: right; }
.cap-ligne { margin-top: 1px; }
.cap-ligne .bien { color: #2e7d32; font-weight: 700; }
.cap-ligne .mal { color: #a52a1a; font-weight: 700; }
.illu[data-nom="registre_capitaines"] { object-position: center 42%; }
.illu[data-nom="convoi_disperse"] { object-position: center 62%; }
.resultat.dense .illu { height: clamp(64px, 11vh, 96px); }
.resultat.dense li { margin: 0; }
.resultat.dense ul { margin: 4px 0; }
.barre-menu { position: relative; display: inline-flex; }
#menu-deroulant {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 250px;
  background: var(--parch); color: var(--encre); border: 3px solid var(--bois);
  border-radius: 10px; box-shadow: 0 0 0 2px #2a1a0e, 0 12px 34px rgba(0, 0, 0, .65);
  padding: 7px; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--txt); font-size: 14px; font-weight: 400; text-align: left;
}
#menu-deroulant::before {
  content: ''; position: absolute; top: -9px; right: var(--fleche, 16px); width: 14px; height: 14px;
  background: var(--parch); border-left: 3px solid var(--bois); border-top: 3px solid var(--bois);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.lien-menu {
  display: block; width: 100%; text-align: left; cursor: var(--c-main);
  background: none; border: 0; border-radius: 7px; padding: 9px 12px;
  font-family: inherit; font-size: 15px; color: var(--encre); line-height: 1.3;
}
.lien-menu:hover, .lien-menu:focus-visible { background: var(--parch-fonce); outline: none; }
.menu-sep { height: 2px; background: #d8c391; margin: 5px 4px; border-radius: 1px; }
.menu-reglage { display: flex; align-items: center; gap: 8px; padding: 5px 10px 7px; }
.menu-reglage input[type=range] { flex: 1; min-width: 0; accent-color: var(--or); }
#modal-box.boite-capitaines { width: min(1680px, 96vw); }
.registre-fen .cap-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.registre-fen > p.muet { max-width: 108ch; }
#barre > #b-mois, #barre > #b-vent, #barre > #b-joueur, #barre > #b-guerres {
  flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#barre > #b-guerres { flex-shrink: 8; }
#barre > .btn, #barre > .barre-menu, #barre > #b-icone { flex-shrink: 0; }
#b-icone { display: block; height: 32px; width: auto; margin: -4px 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.liste-actions { gap: 4px; }
.port .liste-actions { gap: 4px 8px; }
.ligne-action, .port .liste-actions .ligne-action { padding: 3px 8px; line-height: 1.25; }
.ligne-action small { line-height: 1.25; }
.port .port-tete { padding: 3px 12px; margin: 0 0 4px; }
.onglets { margin-bottom: 6px; }
.port .onglet-corps { gap: 4px 10px; }
.port .onglet-corps p { margin: 3px 0; line-height: 1.35; }
#modal-box h4 { margin: 7px 0 3px; }
#modal-box h4 small { font-size: 12px; font-weight: 400; }
#modal-box p { margin: 4px 0; }
.dialogue .replique { margin: 4px 0 6px; padding: 6px 12px; }
.port .tab td .btn.petit { padding: 1px 7px; line-height: 1.3; margin-top: 0; margin-bottom: 0; }
.port .tab th, .port .tab td { padding-top: 2px; padding-bottom: 2px; }
.ligne-coque .btn.petit { margin: 0 0 0 8px; vertical-align: middle; }
.aide-texte p, .livre-fen p, .chronique-page p { margin: 6px 0; }
.muet { font-size: 13px; color: #5f4b31; }
.ligne-action small, .port .liste-actions .ligne-action small { font-size: 13px; }
.tab, .deux-cols .tab { font-size: 13px; }
.dialogue .texte small { font-size: 14px; color: #4f3d27; }
.a-savoir {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-left: 7px; border-radius: 50%; vertical-align: 2px; cursor: help; user-select: none;
  background: #e3cf9f; color: #6b3a18; box-shadow: inset 0 0 0 1.5px #a07a44;
  font: italic 700 12px/1 Georgia, 'Palatino Linotype', serif; letter-spacing: 0; text-transform: none;
}
.a-savoir:hover, .a-savoir:focus { background: #c9973a; color: #fff8e6; outline: none; }
.cie-puces { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; }
.cie-puce { font-size: 13px; padding: 1px 7px; border: 1px solid #c9a86a; border-radius: 10px; background: #fff8e6; cursor: help; white-space: nowrap; }
.cie-puce.mal { border-color: #b3473a; }
.cie-puce.bien { border-color: #4f8a3c; }
.boite-vab .vab-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.boite-vab .vab-tete h2 { margin: 0 0 4px; }
.vab-scene { position: relative; width: min(100%, calc((100vh - 270px) * 2)); aspect-ratio: 2 / 1; margin: 0 auto 6px; border: 3px solid #6b4426; border-radius: 8px; overflow: hidden; background: #1a1008; box-shadow: 2px 2px 0 #2a1a0e; }
.vab-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#vab-objets { position: absolute; inset: 0; }
.vab-obj { position: absolute; transition: filter .2s, transform .2s; }
.vab-sprite { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.vab-pastille { display: none; }
.vab-obj.sans-img .vab-pastille { display: flex; align-items: center; justify-content: center; min-height: 3.2em; padding: 4px 6px; text-align: center; font-size: 13px; line-height: 1.2; background: rgba(255, 248, 230, .92); border: 2px dashed #8a5a2b; border-radius: 10px; color: #3a2414; }
.vab-obj.cliquable { cursor: var(--c-main); }
.vab-obj.cliquable:hover { filter: drop-shadow(0 0 6px #ffd76a); transform: translateY(-2px); }
.vab-obj.choisi { filter: drop-shadow(0 0 7px #ffd76a) drop-shadow(0 0 2px #fff); }
.vab-etiquette { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); white-space: nowrap; font-size: 13px; background: rgba(42, 26, 14, .82); color: #fff8e6; padding: 1px 8px; border-radius: 9px; pointer-events: none; }
.vab-vol { pointer-events: none; transition: transform .55s cubic-bezier(.3, .7, .4, 1), opacity .55s; }
.vab-pop { animation: vab-pop .45s ease-out; }
@keyframes vab-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vab-chaudron { position: absolute; pointer-events: none; }
.vab-chaudron .vab-etiquette { top: auto; bottom: 0; transform: translate(-50%, 0); }
.vab-vapeur { position: absolute; bottom: 60%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .5); filter: blur(3px); animation: vab-vapeur 2.4s ease-in infinite; }
.vab-vapeur:nth-child(1) { left: 22%; } .vab-vapeur:nth-child(2) { left: 45%; animation-delay: .6s; }
.vab-vapeur:nth-child(3) { left: 62%; animation-delay: 1.2s; } .vab-vapeur:nth-child(4) { left: 35%; animation-delay: 1.8s; }
@keyframes vab-vapeur { from { transform: translateY(0) scale(.6); opacity: .8; } to { transform: translateY(-130%) scale(1.4); opacity: 0; } }
.vab-panneau { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; align-items: start; }
.vab-panneau.vab-cuisine { grid-template-columns: 1fr auto; align-items: center; }
.vab-signes { margin: 2px 0 4px; padding-left: 18px; font-size: 13px; }
.vab-examens { display: flex; flex-wrap: wrap; gap: 4px; }
.vab-remedes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 2px 0 4px; }
.vab-remede { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #c9a86a; border-radius: 8px; background: #fff8e6; padding: 2px; line-height: 1.1; }
.vab-remede.cliquable { cursor: var(--c-main); }
.vab-remede.cliquable:hover { background: #ffeec2; }
.vab-remede.epuise { opacity: .45; }
.vab-remede .vab-obj { position: relative; width: 44px; }
.vab-remede .vab-obj.sans-img .vab-pastille { min-height: 0; border: 0; background: none; font-size: 22px; padding: 0; }
.vab-remede small { font-size: 13px; }
.vab-boutons { justify-content: center; }
.vab-carnet { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; margin-top: 4px; }
.vab-lien { font-size: 13px; font-weight: 700; color: #6b4426; text-decoration: underline dotted; }
.vab-livret { background: #fffaf0; border: 2px solid #c9ae72; border-radius: 10px; padding: 8px 14px 6px; font-size: 13px; line-height: 1.4; }
.vab-livret-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; font-size: 15px; }
.vab-livret p { margin: 4px 0; }
.vab-livret ul { margin: 4px 0; padding-left: 18px; }
.vab-livret-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.vab-livret-table th { text-align: left; color: #6b4426; border-bottom: 1px solid #c9ae72; padding: 2px 6px; }
.vab-livret-table td { border-bottom: 1px dotted #d8c79a; padding: 3px 6px; vertical-align: top; }
@media (max-width: 760px) { .vab-panneau { grid-template-columns: 1fr; } .vab-remedes { grid-template-columns: repeat(3, 1fr); } }
#modal-box h2 .a-savoir { vertical-align: 5px; }
:root { --c-fleche: url(curseurs/fleche.png) 1 1, auto; --c-main: url(curseurs/main.png) 6 1, pointer;
  --c-barre: url(curseurs/barre.png) 16 16, pointer; --c-sabres: url(curseurs/sabres.png) 16 13, crosshair;
  --c-sablier: url(curseurs/sablier.png) 8 9, progress; }
html, body { cursor: var(--c-fleche); }
button, summary, a[href], [data-action] { cursor: var(--c-main); }
button[disabled] { cursor: var(--c-fleche); }
.btn[disabled] { cursor: not-allowed; }
#carte[data-curseur="main"] { cursor: var(--c-main); }
#carte[data-curseur="barre"] { cursor: var(--c-barre); }
#carte[data-curseur="sabres"] { cursor: var(--c-sabres); }
#carte[data-curseur="sablier"] { cursor: var(--c-sablier); }
.affaires .titre-bloc .a-savoir { vertical-align: 1px; }
.aff-ligne { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 2px 0; border-bottom: 1px dotted #c9ae78; cursor: help; }
.aff-ligne:last-child { border-bottom: 0; }
.aff-ligne > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aff-ligne > span small { color: #6b4426; }
.aff-ligne > b { flex: 0 0 auto; }
.affaires .bien { color: #2e7d32; }
.affaires .mal { color: #8f2020; }
.aff-net { font-size: 20px; font-weight: 800; line-height: 1.1; }
.aff-net small { font-size: 12px; font-weight: 400; color: #6b4426; }
.aff-detail { font-size: 11.5px; color: #6b4426; margin-top: 2px; }
.affaires .cie-puces { margin: 0 0 4px; gap: 4px; }
.affaires .cie-puce { font-size: 12px; padding: 1px 5px; }
.pan-onglets.serres { gap: 1px; }
.pan-onglets.serres .onglet { font-size: 11px; padding: 5px 0; letter-spacing: 0; }
.pan-onglets.serres .ecusson-onglet { width: 18px; height: 18px; vertical-align: -4px; }
.aide .droits { margin: 6px 0 0; font-size: 13px; color: #7a6040; text-align: right; }
.port .en-vignettes, .port .liste-actions.en-vignettes, .port .deux-cols .liste-actions.en-vignettes.defile {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: none;
}
.port .en-vignettes > .ligne-action:not(.vignette) { grid-column: 1 / -1; }
.port .en-vignettes .ligne-action.vignette {
  position: relative; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 6px;
  padding: 9px 10px 8px; text-align: center; line-height: 1.25;
}
.vignette .vig-corps { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vignette .vig-icone { font-size: 30px; line-height: 1.15; }
.vignette .vig-icone img.emo { width: 32px; height: 32px; }
.vignette .vig-nom { font-weight: 700; color: #3b2612; }
.vignette .vig-chiffres { font-size: 13px; color: #5e3a1c; }
.vignette .vig-motif { font-size: 13px; color: #8f2020; }
.vignette > .btn { align-self: center; margin: 0; }
.vignette > .boutons-ligne { display: flex; justify-content: center; gap: 6px; }
.vignette .vig-i {
  position: absolute; top: 6px; right: 7px; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: #e3cf9f; color: #6b3a18; box-shadow: inset 0 0 0 1.5px #a07a44;
  font: italic 700 11px/1 Georgia, 'Palatino Linotype', serif;
}
.vignette[data-aide] { cursor: help; }
.vignette[data-aide] .btn { cursor: pointer; }
.vignette[data-aide] .btn[disabled] { cursor: not-allowed; }
.vignette[data-aide]:hover .vig-i, .vignette[data-aide]:focus-within .vig-i { background: #c9973a; color: #fff8e6; }
.vignette[data-aide]:hover::after, .vignette[data-aide]:focus-within::after {
  content: attr(data-aide); position: absolute; left: -6px; right: -6px; bottom: calc(100% + 7px); z-index: 30;
  padding: 8px 11px; background: #fbf1d6; color: #3b2612; border: 2px solid #a07a44; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); font-size: 14px; font-weight: 400; line-height: 1.35; text-align: left;
  pointer-events: none; white-space: normal;
}
#carte { touch-action: none; -webkit-tap-highlight-color: transparent; }
body.tactile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.tactile input, body.tactile textarea { -webkit-user-select: text; user-select: text; }
body.tactile .vignette[data-aide]:hover::after, body.tactile .vignette[data-aide]:focus-within::after { content: none; }
.bulle-tactile {
  position: fixed; z-index: 1000; padding: 9px 12px; background: #fbf1d6; color: #3b2612; border: 2px solid #a07a44;
  border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.4; pointer-events: none;
}
body.tactile .btn, body.tactile .onglet { min-height: 34px; }
@media (max-width: 700px) {
  #app { padding: 6px; gap: 6px; }
  #modal-box, #modal-box.large { width: 98vw; padding: 8px 9px; }
  #modal-box .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #modal-box .onglets::-webkit-scrollbar { display: none; }
  #modal-box .onglets .onglet { flex: 0 0 auto; }
  .port .onglet-corps table.tab, .deux-cols table.tab { display: block; overflow-x: auto; }
  .port .en-vignettes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .deux-cols { grid-template-columns: minmax(0, 1fr); }
  .recrues-ligne { flex-wrap: wrap; } .recrues-ligne p { flex: 1 1 100%; } .recrues-ligne .boutons { flex-shrink: 1; flex-wrap: wrap; }
  .port .rumeurs { columns: 1; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  #app { flex-direction: row; height: 100vh; min-height: 0; padding: 4px; gap: 6px; }
  #gauche { min-height: 0; gap: 4px; }
  #barre { padding: 3px 8px; flex-wrap: nowrap; white-space: nowrap; }
  #carte-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
  #carte { max-width: 100%; max-height: 100%; }
  #journal { flex: 0 0 auto; height: clamp(46px, 11vh, 110px); min-height: 0; max-height: none; font-size: 12px; padding: 3px 8px; }
  #panneau { width: 290px; flex: 0 0 290px; height: calc(100vh - 8px); max-height: none; overflow: auto; }
  #panneau .pan-corps { overflow-y: auto; }
  #modal-box, #modal-box.large { width: 98vw; max-height: 98vh; padding: 6px 9px; }
  #modal-box .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #modal-box .onglets .onglet { flex: 0 0 auto; }
}
.btn.coupe { position: relative; opacity: .7; }
.btn.coupe::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: calc(50% - 2px); height: 4px; border-radius: 2px;
  background: #d6493a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); transform: rotate(-28deg); pointer-events: none;
}
.btn.coupe:hover { opacity: .9; }
.btn.partiel { position: relative; opacity: .85; }
.btn.partiel::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 3px; border-radius: 2px;
  background: #ffd24a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); pointer-events: none;
}
.attente { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ecusson-attente {
  width: 112px; height: 112px; image-rendering: pixelated;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .65));
  animation: attente-souffle 2.6s ease-in-out infinite;
}
.attente-titre { font-family: var(--pix); font-size: 12px; color: var(--or); letter-spacing: .04em; text-align: center; }
.attente-barre { width: 190px; height: 4px; background: rgba(242, 207, 74, .18); border-radius: 2px; overflow: hidden; }
.attente-barre span { display: block; width: 38%; height: 100%; background: var(--or); border-radius: 2px; animation: attente-glisse 1.15s ease-in-out infinite; }
@keyframes attente-souffle {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.07); }
}
@keyframes attente-glisse {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(270%); }
}
@media (prefers-reduced-motion: reduce) {
  .ecusson-attente, .attente-barre span { animation: none; }
}
.illu-neuve { animation: illu-fondu .38s ease-out both; }
@keyframes illu-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .illu-neuve { animation: none; } }
.port .en-vignettes .ligne-action.vignette {
  border: 2px solid #b8955a; border-radius: 10px;
  background: linear-gradient(#fbf3dd, #ecd9ae 72%, #e2c996);
  box-shadow: 0 2px 0 rgba(90, 52, 20, .3), 0 5px 14px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .1s, box-shadow .14s, border-color .14s;
}
.port .en-vignettes .ligne-action.vignette:hover {
  transform: translateY(-2px); border-color: var(--dore);
  box-shadow: 0 3px 0 rgba(90, 52, 20, .3), 0 7px 18px rgba(0, 0, 0, .3), 0 0 14px rgba(242, 200, 90, .45),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}
.vignette .vig-icone {
  width: 50px; height: 50px; margin: 1px auto 3px; display: flex; align-items: center; justify-content: center;
  font-size: 25px; line-height: 1; border-radius: 50%; border: 2px solid #8a5a2b;
  background: radial-gradient(circle at 50% 28%, #fdf6e3, #e0c592 68%, #c2a066);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, .8), inset 0 -4px 7px rgba(90, 52, 20, .28), 0 2px 5px rgba(0, 0, 0, .3);
}
.vignette .vig-icone img.emo { width: 27px; height: 27px; }
.vignette .vig-nom { font-family: var(--pix); font-size: 14.5px; letter-spacing: .015em; color: #4a2c10; }
@media (prefers-reduced-motion: reduce) { .port .en-vignettes .ligne-action.vignette { transition: none; } }
.port .en-vignettes > .ligne-action.vignette:only-child {
  grid-column: 1 / -1; justify-self: center; width: min(100%, 320px);
}
img.emo { height: 1.45em; vertical-align: -0.3em; }
.onglet img.emo, .onglets .onglet img.emo { height: 1.75em; vertical-align: -0.45em; margin-right: 1px; }
.ligne-action img.emo, .liste-actions img.emo { height: 1.6em; vertical-align: -0.35em; }
.vignette .vig-icone img.emo { width: 34px; height: 34px; }
.vignette .vig-icone { width: 56px; height: 56px; font-size: 27px; }
.credits-liste { list-style: none; margin: 4px 0 10px; padding: 0; font-size: 13.5px; }
.credits-liste li { padding: 3px 0; border-bottom: 1px dotted #c9ae72; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.credits-liste a { color: #5e3a1c; }
.cr-auteur { font-weight: 700; color: #3b2612; }
.cr-licence { font-size: 11.5px; opacity: .75; margin-left: auto; white-space: nowrap; }
.credits-libres { font-size: 12.5px; line-height: 1.8; color: #5e3a1c; }
.cr-sec { white-space: nowrap; }
.aide-texte h4 { margin: 14px 0 4px; }
.chapitre { gap: 10px; animation: chapitre-vient .5s ease-out both; max-width: min(560px, 86vw); }
.chapitre-illu { line-height: 0; }
.chapitre-illu .illu { width: min(300px, 60vw); max-height: 42vh; height: auto; object-fit: contain; border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); animation: none; margin: 0; }
.chapitre-illu .illu[src*="ecusson"] { width: 128px; border-radius: 0; box-shadow: none; }
.credits-illu { line-height: 0; margin-bottom: 10px; }
.credits-illu .illu { width: 100%; max-height: 190px; height: auto; object-fit: cover; border-radius: 8px; margin: 0; }
.chapitre-num { font-family: var(--pix); font-size: 11px; letter-spacing: .22em; color: var(--or); opacity: .85; text-transform: uppercase; }
.chapitre-titre { font-family: var(--titre); font-weight: 400; font-size: 42px; letter-spacing: 1px;
  color: #ffe9b0; text-shadow: 2px 2px 0 #1a0f06, 0 0 22px rgba(242, 207, 74, .25); text-align: center; line-height: 1.1; }
.chapitre-ligne { font-size: 15px; font-style: italic; color: #e9d9b4; text-align: center; max-width: 34em; line-height: 1.45; }
@keyframes chapitre-vient { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chapitre { animation: none; } }
.visage-port {
  float: left; width: 46px; height: 46px; margin: 1px 10px 2px 0;
  border-radius: 50%; overflow: hidden; border: 2px solid #b08a3e; background: #14203a;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.visage-port img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); transform-origin: 50% 26%; }
.ligne-action > div:has(> .visage-port), .recrues-ligne p, .nego-ligne, .douane-ligne { display: flow-root; }
html.mobile .visage-port { width: 40px; height: 40px; margin-right: 8px; }
.menu-version { text-align: center; font-size: 11px; color: #8a7355; padding: 2px 0 4px; }
.menu-version b { font-weight: 700; color: #6b5637; }
.lien-version { background: none; border: 0; padding: 0; font: inherit; color: #8a7355;
  text-decoration: underline; cursor: var(--c-main); }
.lien-version:hover { color: #5e3a1c; }
#garde { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: #0a0d18; cursor: var(--c-main); }
#garde.cache { display: none; }
#garde img { max-width: 94vw; max-height: 86vh; image-rendering: pixelated;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .75); }
.garde-appel { font-family: var(--pix); font-size: 13px; letter-spacing: .08em; color: #c9ab74;
  animation: garde-respire 2.4s ease-in-out infinite; }
@keyframes garde-respire { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-height: 520px) { #garde img { max-height: 78vh; } .garde-appel { font-size: 11px; } }
@media (min-aspect-ratio: 5/4) {
  #garde { background: #0a0d18 url(../illustrations/affiche_large.webp) center 88% / cover no-repeat; }
  #garde > img { display: none; }
  .garde-appel { position: absolute; left: 0; right: 0; bottom: 2.6vh; text-align: center; }
}
.au-comptoir { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 2px; padding: 8px 12px; background: rgba(120, 82, 40, .09);
  border-left: 4px solid #b4894a; border-radius: 0 8px 8px 0; font-size: 13px; }
.au-comptoir .mot { flex: 1 1 100%; font-style: italic; line-height: 1.45; }
.au-comptoir .visage-port { flex: 0 0 auto; }
.au-comptoir .qui { flex: 1 1 auto; align-self: center; }
.talents .talent { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 2px 0; font-size: 13px; }
.talents .talent-nom { white-space: nowrap; }
.talents .talent-barre { height: 9px; border: 1px solid #8a6a38; border-radius: 5px; background: rgba(60, 40, 18, .25);
  overflow: hidden; }
.talents .talent-barre i { display: block; height: 100%; background: linear-gradient(90deg, #b8812f, #f0c35a); }
.talents .talent-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.talents .talent-val small { opacity: .75; }
.dialogue .replique.avec-portrait { display: flow-root; }
.dialogue .replique.avec-portrait > .portrait-mini { width: 84px; height: 84px; margin: 0 14px 4px 0; }
.dialogue .replique.avec-portrait > .qui, .dialogue .replique.avec-portrait > .texte { margin-left: 0; margin-right: 0; max-width: none; }
.duel-postures .btn small, .duel-choix .btn small,
html.bois .choix-dialogue.duel-postures .btn small, html.bois .duel-choix .btn small,
html.bois.mobile .choix-dialogue.duel-postures .btn small, html.bois.mobile .duel-choix .btn small {
  display: inline-block !important; position: static !important; transform: none !important; flex: 0 0 auto !important;
  width: auto !important; margin: 0 0 0 8px !important; padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; color: #fff3d6 !important; text-shadow: 1px 1px 0 rgba(20, 10, 2, .9) !important;
  font-size: 13.5px !important; font-weight: 600 !important; white-space: nowrap; pointer-events: none; }
.courrier-visage { display: inline-block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin: -4px 6px -4px 0; border: 2px solid #c9a86a; background: #1a2340; }
.courrier-visage img { width: 100%; height: 100%; object-fit: cover; }
.courrier-visage .emoji-seul { font-size: 18px; line-height: 26px; display: block; text-align: center; }
.choix-dialogue:has(.courrier-carte) { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; }
.choix-dialogue .btn:has(.courrier-carte), html.bois .choix-dialogue .btn:has(.courrier-carte) { flex-direction: column !important; align-items: center !important; justify-content: flex-start; text-align: center !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.courrier-carte { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.courrier-carte .courrier-visage { width: 58px; height: 58px; margin: 0; border-width: 3px; }
.courrier-carte .courrier-visage .emoji-seul { font-size: 30px; line-height: 52px; }
.courrier-carte .cc-nom { font-size: 13.5px; line-height: 1.15; }
.courrier-carte .cc-role { font-size: 11.5px; font-weight: 600; opacity: .85; }
.choix-dialogue .btn:has(.courrier-carte) > small { flex: 0 0 auto !important; margin-top: 3px !important; text-align: center; font-size: 11px !important; }
html.mobile .choix-dialogue:has(.courrier-carte) { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; }
html.mobile .courrier-carte .courrier-visage { width: 44px; height: 44px; }
#succes-bandeau { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -140%); z-index: 260; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; max-width: min(92vw, 460px); background: #1a1712; color: #f3e6c8; border: 2px solid #8a6a3a; border-radius: 40px; box-shadow: 0 8px 26px rgba(0, 0, 0, .65); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; }
#succes-bandeau.montre { transform: translate(-50%, 0); }
#succes-bandeau img { width: 64px; height: 64px; flex: none; border-radius: 50%; image-rendering: auto; }
#succes-bandeau div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#succes-bandeau small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c9a45c; }
#succes-bandeau b { font-size: 17px; }
#succes-bandeau span { font-size: 13px; opacity: .85; }
#succes-bandeau.succes-argent { border-color: #aeb6c2; }
#succes-bandeau.succes-or { border-color: #e2b43c; box-shadow: 0 0 0 2px rgba(226, 180, 60, .25), 0 8px 26px rgba(0, 0, 0, .65); }
html.mobile #succes-bandeau img { width: 48px; height: 48px; }
html.mobile #succes-bandeau b { font-size: 15px; }
.succes-carnet h2 { margin-bottom: 4px; }
.succes-jauge { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .35); overflow: hidden; margin: 6px 0 14px; }
.succes-jauge i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a3a, #e2b43c); }
.succes-famille { margin: 16px 0 8px; font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.succes-famille small { opacity: .7; font-weight: normal; }
.succes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.succes-tuile { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 34px; border: 2px solid rgba(138, 106, 58, .5); background: rgba(0, 0, 0, .18); min-width: 0; }
.succes-tuile img { width: 56px; height: 56px; flex: none; border-radius: 50%; }
.succes-tuile div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.succes-tuile b { font-size: 14px; }
.succes-tuile small { font-size: 12px; opacity: .8; }
.succes-tuile.verrou { opacity: .62; }
.succes-tuile.cache-s img { filter: blur(3px); }
.succes-tuile.obtenu.etage-argent { border-color: #aeb6c2; }
.succes-tuile.obtenu.etage-or { border-color: #e2b43c; background: rgba(226, 180, 60, .10); }
html.mobile .succes-tuile img { width: 44px; height: 44px; }
.dialogue.pacte-scene > .illu { height: clamp(90px, 17vh, 170px); object-position: 50% 22% !important; }
@media (min-width: 1040px) { .dialogue.pacte-scene .choix-dialogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dialogue.pacte-scene .minute { margin: 6px 0; }
#terre { position: fixed; inset: 0; z-index: 280; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 16px; background: rgba(6, 10, 20, 0); cursor: pointer; transition: background .5s; }
#terre.ouverte { background: rgba(6, 10, 20, .88); }
#terre.partie { opacity: 0; transition: opacity .45s; }
#terre .terre-cri { font-family: var(--titre, serif); font-size: clamp(26px, 5vw, 54px); color: #f3e6c8; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, .8); letter-spacing: .02em; opacity: 0; transform: translateY(-30px) rotate(-2deg); }
#terre.ouverte .terre-cri { animation: terre-cri .6s cubic-bezier(.2, 1.4, .4, 1) .15s forwards; }
@keyframes terre-cri { 0% { opacity: 0; transform: translateY(-30px) rotate(-2deg); } 70% { opacity: 1; transform: translateY(4px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
#terre .terre-vue { width: min(96vw, 1500px); overflow: hidden; border: 3px solid #8a6a3a; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); opacity: 0; transform: translateX(6%); transition: opacity .8s .45s, transform 1.4s .45s cubic-bezier(.2, .8, .3, 1); }
#terre.ouverte .terre-vue { opacity: 1; transform: none; }
#terre .terre-vue .illu { display: block; width: 100%; height: auto !important; aspect-ratio: 3 / 1; object-fit: cover; margin: 0; border: 0; box-shadow: none; animation: terre-zoom 6s ease-out forwards; }
@keyframes terre-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
#terre .terre-nom { text-align: center; color: #f3e6c8; opacity: 0; transition: opacity .8s 1.3s; max-width: min(92vw, 900px); }
#terre.ouverte .terre-nom { opacity: 1; }
#terre .terre-nom b { display: block; font-family: var(--titre, serif); font-size: clamp(24px, 4vw, 44px); color: #e2b43c; text-shadow: 0 2px 0 #000; }
#terre .terre-nom span { font-size: clamp(14px, 1.6vw, 18px); font-style: italic; opacity: .9; }
html.mobile #terre { gap: 6px; padding: 8px; }
html.mobile #terre .terre-vue { width: min(96vw, calc((100vh - 120px) * 3)); }
.dialogue.recit > h2 { margin: 4px 0 2px; }
.dialogue.recit .replique { margin: 2px 0 6px; padding: 6px 14px; }
.dialogue.recit .qui { margin-bottom: 2px; }
.dialogue.recit .texte { line-height: 1.5; }
.dialogue.recit .texte br + br { display: none; }
.dialogue.recit > h2 { font-size: 20px; }
@media (min-width: 1040px) { .dialogue.recit .choix-dialogue { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
html.bois .vab-gravite, .vab-gravite { background: rgba(201, 164, 90, .18); border-left: 3px solid #8a5a2b; padding: 4px 10px; border-radius: 4px; }
@media (min-width: 1101px), (max-width: 1100px) and (orientation: landscape) {
  html:not(.mobile) #carte-wrap { flex: 0 0 auto; container-type: inline-size; }
  html:not(.mobile) #carte { width: 100cqw; height: min(100vh - 250px, 100cqw * 704 / 1152); max-width: none; max-height: none; }
  html:not(.mobile) #journal { flex: 1 1 auto; height: auto; min-height: 110px; max-height: none; }
}
.rivale-bloc .titre-bloc .portrait-mini { display: inline-block; width: 30px; height: 30px; border-radius: 50%; margin: 0 4px 0 0; vertical-align: middle; float: none; }
.rivale-bloc .titre-bloc .portrait-mini { display: inline-block; float: none; position: relative; vertical-align: middle; }
.rivale-bloc .titre-bloc .portrait-mini img { position: absolute; width: 170%; height: 170%; max-width: none; left: -38%; top: -27%; object-fit: cover; }   
.rivale-bloc .rivale-etat { margin-top: 3px; line-height: 1.3; }
.rivale-bloc .rivale-mouv small { font-weight: 700; }
.rivale-bloc .rivale-mouv.mal small { color: #9b2226; }
.rivale-bloc .rivale-mouv.bien small { color: #2e6b2c; }
.rivale-bloc .rivale-rancune { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; }
.rivale-bloc .rivale-barre { display: block; width: 100%; height: 10px; margin: 3px 0 2px; flex: none; }
.rivale-bloc .rivale-barre::after { display: none; }
.parole-gouv { margin: 0 0 6px; padding: 4px 10px; border-left: 3px solid #b8892d; font-style: italic; }
.parole-gouv b { font-style: normal; }
.bosco-murmure { display: inline-block; margin-top: 4px; font-style: italic; opacity: .9; }
.carnet-combat { margin-top: 5px; font-size: .9em; padding: 3px 6px; border-left: 3px solid #8a6a3a; background: rgba(140, 100, 50, .08); }
.lien-carnet { text-align: right; margin: 0 0 4px; }
.carnet-escrime td:not(:first-child), .carnet-escrime th:not(:first-child) { text-align: center; }
.tendre-route { margin: 2px 0 8px; padding: 4px 8px; border-left: 3px solid #b8892d; font-size: .92em; }
.tendre-route b { color: #8a2c1d; }
.tendre-route s { opacity: .55; }
.tendre-envies { font-size: .85em; margin: -.2em 0 .5em; opacity: .9; }
.tendre-bateau { position: absolute; display: block; z-index: 3; width: 34px; line-height: 0; transform: translate(-50%, -80%); pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); }
.tendre-bateau.glisse { transition: left 1.8s ease-in-out, top 1.8s ease-in-out; }
.tendre-bateau img { width: 100%; height: auto; display: block; }
html.mobile .tendre-bateau { width: 24px; }
.demo-nouvelles { margin: 14px auto 6px; max-width: 620px; text-align: center; }
.demo-courriel { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 4px; }
.demo-courriel input { flex: 1 1 220px; max-width: 320px; padding: 7px 10px; font: inherit; border: 2px solid #8a6a3a; border-radius: 4px; background: #fff8e6; color: #2a1a0e; }
.demo-retour { min-height: 1.2em; margin: 4px 0 0; font-style: italic; }
.coffre-carte { margin: 8px auto; max-width: 520px; text-align: center; }
.coffre-code { font-size: 1.35em; letter-spacing: .08em; margin-bottom: 6px; }
.coffre-lien { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.coffre-lien input, .coffre-ligne input { flex: 1 1 200px; max-width: 340px; padding: 5px 8px; font: inherit; font-size: .9em; border: 2px solid #8a6a3a; border-radius: 4px; background: #fff8e6; color: #2a1a0e; }
.coffre-ligne input { max-width: 150px; text-transform: uppercase; }
.coffre-accueil { margin-top: 10px; padding: 8px 12px; background: rgba(26, 17, 6, .85); color: #ffe9a8; border: 2px solid #b08a3e; border-radius: 6px; display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.titre-modes[hidden] { display: none !important; }
.duel-hommes { text-align: center; margin-top: 4px; }
.duel-lien { background: none; border: 0; padding: 2px 6px; font: inherit; font-size: .9em; color: inherit; opacity: .8; text-decoration: underline dotted; cursor: pointer; }
.duel-lien:hover, .duel-lien:focus-visible { opacity: 1; text-decoration-style: solid; }