:root {
  --texte: #dcd3c1;
  --doux: #8d8371;
  --bordure: #372f25;
  --accent: #b8923f;
  --accent-clair: #e0bd6e;
  --sang: #a8322a;
}

html, body { height: 100%; margin: 0; overflow: hidden; background: #0a0908; color: var(--texte); font-family: "Spectral", Georgia, serif; }
[hidden] { display: none !important; }
canvas { display: block; }
body.en-jeu, body.en-jeu canvas { cursor: none; }

h1 { margin: 0; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
p { margin: 2px 0 0; }
.doux { color: var(--doux); font-size: 15px; font-style: italic; }

.hud { position: fixed; z-index: 2; top: 14px; left: 14px; min-width: 240px; padding: 10px 16px; pointer-events: none; background: #0f0d0bd9; box-shadow: inset 0 0 0 1px var(--bordure); }
.hud h1 { font-size: 16px; }
.vie { position: relative; height: 20px; margin: 8px 0 6px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--bordure); }
.vie i { display: block; height: 100%; background: linear-gradient(90deg, #6e1410, var(--sang)); transition: width .15s; }
.vie span { position: absolute; inset: 0; font-size: 13px; line-height: 20px; text-align: center; font-variant-numeric: lining-nums; }

.invite, .toast { position: fixed; z-index: 2; left: 50%; margin: 0; padding: 8px 20px; pointer-events: none; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--accent); transform: translateX(-50%); }
.invite { bottom: 150px; }
.toast { z-index: 7; top: 20px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; }

.viseur { position: fixed; z-index: 3; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; }
.viseur svg, .viseur .icone-arme { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 2px #000); }
.viseur.point::after { content: ""; position: absolute; top: 13px; left: 13px; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 4px #000; }
.viseur.pret { transform: scale(1.15); }

.degat { position: fixed; z-index: 2; margin: 0; color: #fff; font-family: "Cinzel", Georgia, serif; font-size: 20px; font-weight: 700; pointer-events: none; text-shadow: 0 0 3px #000, 0 1px 2px #000; animation: monte .8s ease-out forwards; }
.degat.critique { color: var(--accent-clair); font-size: 28px; }
.degat.subi { color: #ff6a5a; }
.degat.bloque { color: #9fc6e8; }
.degat.soin { color: #8fe08a; }
@keyframes monte { to { opacity: 0; transform: translateY(-46px); } }

.butin { position: fixed; z-index: 4; bottom: 124px; left: 50%; display: flex; gap: 8px; padding: 12px; pointer-events: none; background: #0f0d0bee; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 30px #000; transform: translateX(-50%); animation: butin .3s ease-out; }
.butin h2 { position: absolute; top: -26px; left: 0; margin: 0; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; }
.lot { --couleur: #888; width: 118px; padding: 8px 6px; text-align: center; background: linear-gradient(0deg, color-mix(in srgb, var(--couleur) 30%, transparent), transparent 70%), #151311; box-shadow: inset 0 0 0 1px var(--couleur); animation: lot .35s ease-out backwards; }
.lot svg, .lot .icone-arme { display: block; width: 58px; height: 58px; margin: 0 auto 4px; filter: drop-shadow(0 2px 2px #000); }
.lot strong { display: block; font-size: 14px; line-height: 1.15; }
.lot span { display: block; color: var(--couleur); font-size: 12px; font-style: italic; }
.lot span.alerte { color: #ff8a7a; }
@keyframes butin { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes lot { from { opacity: 0; transform: scale(.6); } }

.bas { position: fixed; z-index: 6; bottom: 10px; left: 50%; display: grid; gap: 4px; transform: translateX(-50%); }
.endurance { height: 8px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--bordure); }
.endurance i { display: block; height: 100%; background: linear-gradient(90deg, #5f7f2e, #b5c94a); }
.endurance.vide i { background: var(--sang); }
.barre-rapide { display: grid; grid-template-columns: repeat(9, 52px); gap: 3px; padding: 3px; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--bordure); }
.case-barre { --couleur: var(--bordure); position: relative; width: 52px; height: 52px; padding: 5px; cursor: inherit; background: #151311; border: 0; box-shadow: inset 0 0 0 1px var(--couleur); }
.case-barre svg, .case-barre .icone-arme { display: block; width: 100%; height: 100%; }
.case-barre.vide-stock svg, .case-barre.vide-stock .icone-arme { filter: grayscale(1) brightness(.45); }
.case-barre b { position: absolute; right: 3px; bottom: 1px; font-size: 13px; text-shadow: 0 0 3px #000, 0 1px 2px #000; font-variant-numeric: lining-nums; }
.case-barre small { position: absolute; top: 1px; left: 4px; color: var(--doux); font-size: 11px; }
.case-barre.utilise { filter: brightness(1.8); }
.ecran-inventaire .case-barre:hover { box-shadow: inset 0 0 0 1px var(--accent-clair); }

.ecran { position: fixed; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; overflow: auto; text-align: center; background: #0a0908ee; }
.ecran h1 { font-size: 30px; }


.touches button.attente { color: var(--accent-clair); border-color: var(--accent); }

.ecran-boutons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.ecran-boutons.colonne { flex-direction: column; }
button, .ecran-boutons a { padding: 9px 18px; color: var(--texte); font: inherit; text-decoration: none; cursor: pointer; background: transparent; border: 1px solid var(--bordure); }
button:hover, .ecran-boutons a:hover { border-color: var(--accent); }

.ecran-inventaire { justify-content: flex-start; padding-top: 34px; padding-bottom: 100px; }
.sac { display: grid; grid-template-columns: repeat(auto-fill, 74px); justify-content: center; gap: 5px; width: min(700px, 100%); }
.case-sac { --couleur: var(--bordure); position: relative; width: 74px; height: 74px; padding: 8px; cursor: pointer; background: #151311; border: 0; box-shadow: inset 0 0 0 1px var(--bordure), inset 0 -2px 0 var(--couleur); }
.case-sac svg, .case-sac .icone-arme { display: block; width: 100%; height: 100%; }
.case-sac b { position: absolute; right: 5px; bottom: 3px; font-size: 14px; text-shadow: 0 0 3px #000, 0 1px 2px #000; font-variant-numeric: lining-nums; }
.case-sac.choisi { box-shadow: inset 0 0 0 2px var(--accent-clair), 0 0 14px #b8923f88; }
.detail { min-height: 44px; max-width: 620px; color: var(--doux); font-style: italic; }

@media (max-width: 860px) {
  .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Raid */
.chrono { position: fixed; z-index: 2; top: 14px; left: 50%; margin: 0; padding: 6px 18px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 24px; font-variant-numeric: lining-nums; pointer-events: none; background: #0f0d0bd9; box-shadow: inset 0 0 0 1px var(--bordure); transform: translateX(-50%); }
.chrono.urgent { color: #ff6a5a; box-shadow: inset 0 0 0 1px var(--sang); }
.alerte-vague { position: fixed; z-index: 2; top: 62px; left: 50%; margin: 0; color: var(--doux); font-size: 15px; font-style: italic; pointer-events: none; transform: translateX(-50%); }
.carte { position: fixed; z-index: 2; top: 14px; right: 14px; width: 190px; height: 190px; pointer-events: none; background: #0f0d0bd9; box-shadow: inset 0 0 0 1px var(--bordure); }
.extraction { position: fixed; z-index: 3; bottom: 150px; left: 50%; width: 280px; padding: 8px 14px; text-align: center; pointer-events: none; background: #0f0d0be6; box-shadow: inset 0 0 0 1px #6fce7a; transform: translateX(-50%); }
.extraction div { height: 8px; margin-top: 5px; background: #000; }
.extraction i { display: block; height: 100%; background: #6fce7a; }
.poids { position: fixed; z-index: 2; bottom: 14px; left: 14px; padding: 6px 12px; font-size: 14px; pointer-events: none; background: #0f0d0bd9; box-shadow: inset 0 0 0 1px var(--bordure); font-variant-numeric: lining-nums; }
.poids.lourd { color: #ff8a7a; box-shadow: inset 0 0 0 1px var(--sang); }
.effets { position: fixed; z-index: 2; bottom: 60px; left: 14px; color: var(--accent-clair); font-size: 14px; pointer-events: none; }

.pouvoirs { display: flex; gap: 3px; justify-content: center; }
.case-pouvoir { position: relative; width: 52px; height: 52px; padding: 5px; overflow: hidden; background: #151311; box-shadow: inset 0 0 0 1px var(--accent); }
.case-pouvoir svg, .case-pouvoir .icone-arme { display: block; width: 100%; height: 100%; }
.case-pouvoir small { position: absolute; top: 1px; left: 4px; color: var(--accent-clair); font-size: 11px; text-shadow: 0 0 3px #000; }
.case-pouvoir i { position: absolute; left: 0; right: 0; bottom: 0; background: #000b; }

.prepa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; width: min(1040px, 100%); text-align: left; }
.prepa h2 { margin: 0 0 6px; color: var(--accent); font-family: "Cinzel", Georgia, serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.prepa section { margin-bottom: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 14px; }
.choix button svg, .choix button .icone-arme { width: 26px; height: 26px; }
.choix button b { color: var(--accent-clair); font-variant-numeric: lining-nums; }
.ecran.prepa-ecran { justify-content: flex-start; }
.resume { font-size: 15px; font-variant-numeric: lining-nums; }
.resume.lourd { color: #ff8a7a; }
#boutonEntrer { padding: 12px 34px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 16px; font-weight: 700; background: linear-gradient(180deg, #4d1612, #2a0c09); border-color: var(--accent); }

.fouille { position: fixed; z-index: 4; top: 50%; right: 18px; width: 330px; max-height: 76vh; padding: 12px 14px; overflow: auto; background: #0f0d0bf2; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 30px #000; transform: translateY(-50%); }
.fouille h2 { margin: 0 0 8px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 15px; text-transform: uppercase; }
.fouille h3 { margin: 10px 0 5px; color: var(--doux); font-size: 13px; font-weight: 400; font-style: italic; }
.ligne-objet { --couleur: var(--bordure); display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 4px; padding: 5px 8px; text-align: left; background: #151311; border: 0; box-shadow: inset 2px 0 0 var(--couleur), inset 0 0 0 1px var(--bordure); }
.ligne-objet:hover { box-shadow: inset 2px 0 0 var(--couleur), inset 0 0 0 1px var(--accent-clair); }
.ligne-objet svg, .ligne-objet .icone-arme { flex: none; width: 36px; height: 36px; }
.ligne-objet strong { display: block; font-size: 14px; line-height: 1.15; }
.ligne-objet span { display: block; color: var(--doux); font-size: 12px; font-variant-numeric: lining-nums; }
.fouille .actions { display: flex; gap: 6px; margin-top: 6px; }
.fouille .actions button { flex: 1; }
.alerte-sac { min-height: 18px; color: #ff8a7a; font-size: 13px; }

.bilan { display: grid; gap: 4px; width: min(420px, 100%); font-variant-numeric: lining-nums; }
.bilan div { display: flex; justify-content: space-between; padding: 5px 12px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.objets-bilan { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 560px; }
.objets-bilan svg, .objets-bilan .icone-arme { width: 44px; height: 44px; padding: 3px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }

@media (max-width: 860px) {
  .prepa { grid-template-columns: minmax(0, 1fr); }
  .carte { width: 120px; height: 120px; }
}

/* Camp */
.camp { position: fixed; z-index: 5; inset: 0; display: flex; flex-direction: column; overflow: auto; background: radial-gradient(ellipse 900px 400px at 50% -80px, #2a1f14, transparent 70%), #0a0908; }
.camp-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 22px; border-bottom: 1px solid var(--bordure); }
.camp-haut h1 { font-size: 18px; }
.onglets { display: flex; flex-wrap: wrap; gap: 2px; }
.onglets button { padding: 8px 12px; color: var(--doux); font-family: "Cinzel", Georgia, serif; font-size: 13px; background: none; border: 0; border-bottom: 1px solid transparent; }
.onglets button:hover { color: var(--texte); }
.onglets button.actif { color: var(--accent-clair); border-bottom-color: var(--accent); }
.joueur-camp { display: flex; align-items: center; gap: 16px; margin-left: auto; font-variant-numeric: lining-nums; }
.joueur-camp .barre-xp { width: 130px; height: 6px; margin-top: 3px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--bordure); }
.joueur-camp .barre-xp i { display: block; height: 100%; background: linear-gradient(90deg, #6d5420, var(--accent-clair)); }
.joueur-camp strong { color: var(--accent-clair); }
.contenu-camp { width: min(1060px, 100%); margin: 0 auto; padding: 18px 22px 60px; box-sizing: border-box; }
.contenu-camp h2 { margin: 0 0 8px; color: var(--accent); font-family: "Cinzel", Georgia, serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.contenu-camp section { margin-bottom: 18px; }
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#boutonEntrer { margin-top: 8px; }

.grille-cases, .grille-raid { display: grid; grid-template-columns: repeat(auto-fill, 62px); gap: 4px; }
.case { --couleur: var(--bordure); position: relative; width: 62px; height: 62px; padding: 7px; box-sizing: border-box; color: var(--texte); cursor: pointer; background: #151311; border: 0; box-shadow: inset 0 0 0 1px var(--bordure), inset 0 -2px 0 var(--couleur); }
.case:hover { box-shadow: inset 0 0 0 1px var(--accent-clair), inset 0 -2px 0 var(--couleur); }
.case svg, .case .icone-arme { display: block; width: 100%; height: 100%; }
.case b { position: absolute; right: 4px; bottom: 2px; font-size: 13px; text-shadow: 0 0 3px #000, 0 1px 2px #000; font-variant-numeric: lining-nums; }
.case.vide { cursor: default; background: #0a0908; box-shadow: inset 0 0 0 1px #2a2520; }

.infobulle { position: fixed; z-index: 20; top: 0; left: 0; width: 240px; padding: 9px 12px; pointer-events: none; background: #0f0d0bf5; box-shadow: inset 0 0 0 1px var(--accent), 0 6px 20px #000; }
.infobulle strong, .infobulle em, .infobulle span { display: block; }
.infobulle strong { font-size: 16px; }
.infobulle em { color: var(--doux); font-size: 13px; }
.infobulle span { margin-top: 4px; font-size: 14px; line-height: 1.25; }
.infobulle .effet { color: #8fe08a; }
.infobulle .mesures { color: var(--doux); font-size: 13px; font-variant-numeric: lining-nums; }

.attributs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.attributs li { display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.attributs div { flex: 1; }
.attributs strong, .attributs span { display: block; }
.attributs span { color: var(--doux); font-size: 13px; }
.attributs button { width: 32px; height: 32px; padding: 0; color: var(--accent-clair); }
.liste-stats { margin: 0; padding: 0; list-style: none; }
.liste-stats li { display: flex; justify-content: space-between; padding: 6px 2px; color: var(--doux); border-bottom: 1px solid var(--bordure); }
.liste-stats strong { color: var(--texte); font-variant-numeric: lining-nums; }

.liste-sorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 6px; }
.sort { --couleur: var(--bordure); display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure), inset 2px 0 0 var(--couleur); }
.sort > svg, .sort > .icone-arme { flex: none; width: 48px; height: 48px; }
.sort > div { flex: 1; min-width: 0; }
.sort strong, .sort span { display: block; }
.sort strong b { color: var(--accent-clair); font-weight: 400; }
.sort > div > span { color: var(--doux); font-size: 14px; line-height: 1.25; }
.sort.verrouille > svg, .sort.verrouille > .icone-arme { filter: grayscale(1) brightness(.5); }
.cout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cout span { display: flex; align-items: center; gap: 3px; font-size: 13px; font-variant-numeric: lining-nums; }
.cout span.manque { color: #ff8a7a; }
.cout svg, .cout .icone-arme { width: 22px; height: 22px; }
.cout span small { color: var(--doux); font-size: 12px; }
button:disabled { cursor: default; opacity: .4; }

.liste-caisses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.carte-caisse { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; background: #151311; }
.carte-caisse svg, .carte-caisse .icone-arme { width: 64px; height: 64px; }
.carte-caisse strong { font-family: "Cinzel", Georgia, serif; font-size: 14px; }
.carte-caisse span { color: var(--doux); font-size: 14px; }
.carte-caisse em { color: var(--accent); font-size: 13px; }
.carte-caisse.choisi { border-color: var(--accent-clair); box-shadow: 0 0 12px #b8923f77; }
.echange-places { display: flex; gap: 4px; margin-bottom: 8px; }
.resultat { display: flex; flex-wrap: wrap; gap: 6px; min-height: 66px; }
.revele { animation: lot .4s ease-out backwards; }
.article { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 6px; font-size: 13px; font-variant-numeric: lining-nums; }
.article svg, .article .icone-arme { width: 46px; height: 46px; }
.article.cher { opacity: .45; }
.article .nom-article { font-style: normal; font-size: 11px; line-height: 1.2; text-align: center; color: var(--texte-doux, #c9b99a); }
.marchand-liste { display: flex; flex-wrap: wrap; gap: 4px; }

.fouille { right: 12px; width: 372px; }
.fouille h2 small { color: var(--doux); font-family: "Spectral", Georgia, serif; font-size: 13px; text-transform: none; font-variant-numeric: lining-nums; }
.fouille .aide { font-size: 13px; }
.grille-raid { margin-bottom: 8px; }
.case-pouvoir b { position: absolute; right: 3px; bottom: 1px; z-index: 1; font-size: 12px; text-shadow: 0 0 3px #000; }

@media (max-width: 860px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .liste-sorts { grid-template-columns: minmax(0, 1fr); }
  .liste-caisses { grid-template-columns: minmax(0, 1fr); }
}

/* Ouverture de caisse */
.fenetre-roulette { position: relative; overflow: hidden; padding: 10px 0; background: #080706; box-shadow: inset 0 0 0 1px var(--bordure), inset 0 0 50px #000; }
.fenetre-roulette::before, .fenetre-roulette::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 15%; pointer-events: none; }
.fenetre-roulette::before { left: 0; background: linear-gradient(90deg, #080706, transparent); }
.fenetre-roulette::after { right: 0; background: linear-gradient(-90deg, #080706, transparent); }
.fenetre-roulette .repere { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent-clair); box-shadow: 0 0 10px var(--accent); }
.bande-roulette { display: flex; gap: 8px; width: max-content; will-change: transform; }
.carte-roulette { --couleur: #888; flex: none; box-sizing: border-box; width: 150px; padding: 10px 6px; text-align: center; background: linear-gradient(0deg, color-mix(in srgb, var(--couleur) 34%, transparent), transparent 60%), #151311; box-shadow: inset 0 0 0 1px var(--bordure), inset 0 -3px 0 var(--couleur); }
.carte-roulette svg, .carte-roulette .icone-arme { display: block; width: 72px; height: 72px; margin: 0 auto 6px; filter: drop-shadow(0 2px 2px #000); }
.carte-roulette span { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.resultat-caisse { --couleur: var(--accent); display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; padding: 8px; box-shadow: inset 0 0 0 1px var(--couleur), 0 0 24px color-mix(in srgb, var(--couleur) 40%, transparent); animation: lot .35s ease-out; }
.resultat-caisse svg, .resultat-caisse .icone-arme { width: 56px; height: 56px; }
.resultat-caisse strong, .resultat-caisse span { display: block; }
.resultat-caisse span { color: var(--couleur); font-size: 14px; }
.actions-caisse { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 18px; }
button.principal { padding: 12px 30px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-weight: 700; background: linear-gradient(180deg, #4d1612, #2a0c09); border-color: var(--accent); }
.contenu-caisse { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 4px; }
.possible { --couleur: var(--bordure); padding: 6px 4px 4px; text-align: center; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure), inset 0 -2px 0 var(--couleur); }
.possible svg, .possible .icone-arme { display: block; width: 48px; height: 48px; margin: 0 auto 2px; }
.possible span { color: var(--doux); font-size: 12px; font-variant-numeric: lining-nums; }

/* Classes */
.classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.grille-cases > p { grid-column: 1 / -1; }
.classe { display: block; padding: 8px 8px 12px; color: var(--texte); font: inherit; text-align: center; background: #151311; border: 0; box-shadow: inset 0 0 0 1px var(--bordure); }
.classe:hover, .classe:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-clair); }
.classe.choisi { box-shadow: inset 0 0 0 2px var(--accent-clair), 0 0 14px #b8923f77; }
.classe strong { display: block; margin-top: 4px; font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.classe em { display: block; color: var(--accent); font-size: 13px; line-height: 1.2; }
.classe.verrouille strong { color: var(--doux); }
.classe.verrouille em { color: var(--doux); }
.portrait { position: relative; display: block; aspect-ratio: 11 / 14; background: radial-gradient(ellipse at 50% 70%, #3a2c1c, #0c0a08 70%); }
.portrait img { display: block; width: 100%; height: 100%; }
.classe.verrouille .portrait img { filter: grayscale(1) brightness(.38); }
.cadenas { position: absolute; inset: 0; width: 44px; height: 44px; margin: auto; filter: drop-shadow(0 2px 4px #000); }
.cadenas-petit { flex: none; width: 30px; height: 30px; }

/* Verrous */
.portrait-caisse { position: relative; display: block; width: 64px; height: 64px; }
.carte-caisse.verrouille .portrait-caisse > svg:first-child, .carte-caisse.verrouille .portrait-caisse > .icone-arme:first-child { filter: grayscale(1) brightness(.4); }
.carte-caisse.verrouille strong { color: var(--doux); }
.carte-caisse.verrouille em { color: var(--doux); }
.article.verrouille > svg, .article.verrouille > .icone-arme { filter: grayscale(1) brightness(.5); }
.article span svg, .article span .icone-arme { display: block; width: 18px; height: 18px; }
.choix button svg, .choix button .icone-arme { flex: none; }

/* Base */
.groupe-base { margin: 16px 0 6px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.groupe-base small { color: var(--doux); font-family: "Spectral", Georgia, serif; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.sort.fait { box-shadow: inset 0 0 0 1px var(--accent), inset 2px 0 0 var(--accent-clair); }
.sort.fait em { color: var(--accent-clair); font-size: 14px; }
.alerte { color: #ff8a7a; }

/* Fenêtre d'options */
.ecran.modal-fond { z-index: 6; padding: 20px; overflow: hidden; text-align: left; background: #0a0908c4; backdrop-filter: blur(3px); }
.modal { display: flex; flex-direction: column; width: min(780px, 100%); max-height: calc(100dvh - 40px); background: #12100e; box-shadow: inset 0 0 0 1px var(--bordure), 0 24px 70px #000; }
.modal-haut, .modal-bas { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; }
.modal-haut { border-bottom: 1px solid var(--bordure); }
.modal-bas { border-top: 1px solid var(--bordure); }
.ecran .modal h1 { font-size: 20px; }
.modal h2 { margin: 18px 0 8px; }
.modal h2:first-child { margin-top: 0; }
.modal-corps { flex: 1; min-height: 0; padding: 16px 20px; overflow-y: auto; }
.bouton-croix { width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1; }
.reglages-son { display: grid; gap: 8px; }
.reglage { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.reglage input { width: 100%; margin: 0; accent-color: var(--accent); }
.reglage b { font-weight: 400; font-variant-numeric: lining-nums; text-align: right; }
/* Une case à cocher : la case, puis son explication sur toute la largeur restante. */
.reglage.reglage-case { grid-template-columns: 130px 18px minmax(0, 1fr); cursor: pointer; }
.reglage.reglage-case input { width: 18px; height: 18px; }
.reglage.reglage-case b { color: var(--doux, #b9ad97); font-size: 13px; text-align: left; }
.groupes-touches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
.groupe-touches.large { grid-column: 1 / -1; }
.groupe-touches h3 { margin: 0 0 6px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 13px; }
.touches { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.touches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 3px 3px 10px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.touches span { min-width: 0; font-size: 14px; }
.touches button { flex: none; width: 104px; padding: 5px 8px; font-size: 14px; }
.groupe-touches.large .touches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.groupe-touches.large .touches button { width: 72px; }
.credits { margin: 16px 0 0; font-size: 13px; }
@media (max-width: 620px) {
  .groupes-touches { grid-template-columns: minmax(0, 1fr); }
  .groupe-touches.large .touches { grid-template-columns: minmax(0, 1fr); }
  .reglage { grid-template-columns: minmax(0, 1fr) 48px; }
  .reglage span { grid-column: 1 / -1; }
}

/* Base en 3D */
.camp.dans-base { overflow: hidden; pointer-events: none; background: none; }
.camp:not(.dans-base) .camp-haut { display: none; }
.camp.dans-base .camp-haut { padding: 10px 12px; pointer-events: none; background: none; border: 0; }
.camp.dans-base .contenu-camp { position: relative; flex: 1; min-height: 0; width: 100%; padding: 0; }
.hud-base { width: fit-content; margin: 12px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: auto; }
.hud-base p { margin: 0; padding: 6px 12px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--bordure); }
.hud-base button { background: #0f0d0be6; }
.hud-base button.actif { color: var(--accent-clair); border-color: var(--accent); }
.panneau-liste { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(500px, 100%); padding: 14px 16px; overflow-y: auto; pointer-events: auto; background: #0f0d0bf2; box-shadow: inset 1px 0 0 var(--bordure), -12px 0 30px #0008; }
.panneau-liste .liste-sorts { grid-template-columns: minmax(0, 1fr); }
#etatZone.zone-sure { color: #9fc6e8; }
#etatZone.zone-ville { color: #8fdc98; }
#etatZone.zone-pvp { color: #ff8a7a; box-shadow: inset 0 0 0 1px #c23a2e; }
#etatAgressif { color: #fff; background: #8a1f17e6; box-shadow: inset 0 0 0 1px #ff6a55; }
.premiers-pas { position: fixed; z-index: 5; top: 58px; left: 50%; box-sizing: border-box; width: min(380px, calc(100% - 32px)); padding: 8px 14px; pointer-events: none; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px #000a; transform: translateX(-50%); }
.premiers-pas small { display: block; color: var(--doux); font-size: 12px; }
.premiers-pas strong { display: block; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.premiers-pas span { display: block; color: var(--texte); font-size: 13px; }
.premiers-pas em { color: var(--accent-clair); font-style: normal; }
/* Le service de la Milice en cours, à droite sous la liste des joueurs. */
.suivi-milice { position: fixed; z-index: 5; top: 240px; right: 14px; box-sizing: border-box; width: min(270px, calc(100% - 28px)); padding: 8px 12px; pointer-events: none; background: #0f0d0be6; box-shadow: inset 0 0 0 1px #8f7bd6, 0 8px 24px #000a; }
.suivi-milice small { display: block; color: #b9a8ff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.suivi-milice b { display: block; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; }
.suivi-milice span, .suivi-milice em { display: block; color: var(--texte); font-size: 13px; font-style: normal; }
.suivi-milice em.danger { color: #ff8a7a; }
/* La fenêtre de la Milice et de l'amende. */
.replique-justice { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.replique-justice b { color: var(--accent-clair); }
.jalons-milice { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.jalons-milice span { color: var(--doux); font-size: 14px; }
.jalons-milice i { width: 16px; height: 16px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px #8f7bd6; }
.jalons-milice i.fait { background: #8f7bd6; box-shadow: 0 0 10px #8f7bd6aa; }
.jalons-milice b { color: var(--accent-clair); font-size: 14px; }
.quete-milice { margin: 10px 0; padding: 10px 14px; background: #ffffff08; box-shadow: inset 0 0 0 1px var(--bordure); }
.quete-milice.active { box-shadow: inset 0 0 0 1px #8f7bd6; }
.quete-milice h3 { margin: 0; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.quete-milice p { margin: 4px 0 0; font-size: 15px; }
.progres-milice { display: block; margin-top: 6px; color: #b9a8ff; font-size: 14px; }
.actions-milice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.etiquette.fleau button { color: #fff; background: #8a1f17e6; box-shadow: inset 0 0 0 1px #ff6a55; }
/* Sur un écran étroit, la carte et la liste des joueurs prennent le haut : les objectifs descendent au-dessus de la barre. */
@media (max-width: 1100px) { .suivi-milice { top: auto; right: 12px; bottom: 190px; } }
@media (max-width: 1100px) { .premiers-pas { top: auto; right: 12px; bottom: 86px; left: auto; transform: none; width: min(320px, calc(100% - 24px)); } }
.chantier { position: fixed; z-index: 6; bottom: 28px; left: 50%; box-sizing: border-box; width: min(420px, calc(100% - 32px)); padding: 10px 14px; text-align: center; pointer-events: none; background: #0f0d0bf0; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px #000a; transform: translateX(-50%); }
.chantier strong { display: block; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 16px; }
.chantier span { color: var(--doux); font-size: 14px; }
.chantier .cout { justify-content: center; }
.chantier .cout span { color: var(--texte); }
.chantier .cout span.manque { color: #ff8a7a; }
.chantier em { display: block; margin-top: 4px; font-size: 14px; }
.chantier em.pret { color: #8fdc98; }
.chantier em.manque, .chantier em.verrou { color: #ff8a7a; }
.chantier em.fait { color: var(--accent-clair); }
.barre-chantier { height: 6px; margin-top: 6px; background: #000; box-shadow: inset 0 0 0 1px var(--bordure); }
.barre-chantier i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); }

/* Effets de combat */
.vignette, .flash { position: fixed; z-index: 1; inset: 0; pointer-events: none; opacity: 0; }
.vignette { background: radial-gradient(ellipse at center, transparent 45%, #7a0f0acc 100%); transition: opacity .3s; }
.flash { background: radial-gradient(ellipse at center, transparent 30%, #c2241a 100%); }
.vie-boss { position: fixed; z-index: 2; top: 88px; left: 50%; width: min(460px, 60vw); text-align: center; pointer-events: none; transform: translateX(-50%); }
.vie-boss span { color: #ff8a7a; font-family: "Cinzel", Georgia, serif; font-size: 14px; text-shadow: 0 1px 3px #000; }
.vie-boss div { height: 10px; margin-top: 3px; background: #0f0d0be6; box-shadow: inset 0 0 0 1px #6e1410; }
.vie-boss i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #7a120d, #d9483b); }

/* Bonus de raid */
.aubaines { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; width: min(700px, 100%); justify-content: center; }
.aubaine { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; color: var(--texte); background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.aubaine:hover, .aubaine:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-clair), 0 0 22px #b8923f66; transform: translateY(-3px); }
.aubaine svg, .aubaine .icone-arme { width: 62px; height: 62px; }
.aubaine small { position: absolute; top: 6px; left: 9px; color: var(--doux); font-size: 13px; }
.aubaine strong { font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.aubaine span { color: var(--doux); font-size: 14px; line-height: 1.25; }
@media (max-width: 620px) { .aubaines { grid-template-columns: minmax(0, 1fr); } }

/* Équipement */
.equipement { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.emplacement { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.emplacement small { color: var(--doux); font-size: 12px; }

/* Viseur sur la grille d'un caveau */
.viseur.ouvrable, .viseur.verrouille { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.viseur span { position: absolute; top: 46px; left: 50%; padding: 2px 8px; font-size: 13px; white-space: nowrap; background: #0f0d0be6; transform: translateX(-50%); }
.viseur.ouvrable span { color: #8fdc98; box-shadow: inset 0 0 0 1px #4f9c6b; }
.viseur.verrouille span { color: #ff8a7a; box-shadow: inset 0 0 0 1px #8a2a22; }
.viseur.verrouille svg, .viseur.verrouille .icone-arme { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 6px #d9483b); }
.viseur.ouvrable svg, .viseur.ouvrable .icone-arme { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 6px #6fce7a); }

/* Modes et défis */
body.en-jeu, body.en-jeu * { user-select: none; }
#choixDefis button { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 230px; text-align: left; }
#choixDefis small { flex-basis: 100%; color: var(--doux); font-size: 12px; line-height: 1.2; }
#choixDefis b { color: var(--accent-clair); font-weight: 400; }
#resumeDefis { margin-left: 6px; color: var(--accent-clair); font-family: "Spectral", Georgia, serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
#choixDepart { margin-top: 8px; }

/* Cartes de mode et de lieu */
.cartes-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.carte-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; color: var(--texte); background: #151311; }
.carte-mode svg, .carte-mode .icone-arme { width: 64px; height: 64px; }
.carte-mode strong { font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.carte-mode.choisi { border-color: var(--accent-clair); box-shadow: 0 0 12px #b8923f77; }

/* Ville */
.etiquettes { position: fixed; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.etiquette { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.etiquette button { padding: 1px 8px; color: var(--texte); font-size: 13px; pointer-events: auto; background: #0f0d0bcc; border: 0; box-shadow: inset 0 0 0 1px var(--bordure); }
.etiquette button:hover { box-shadow: inset 0 0 0 1px var(--accent-clair); }
.etiquette.soi button { color: var(--accent-clair); pointer-events: none; }
.bulle { max-width: 220px; margin: 0; padding: 4px 10px; color: #1a1612; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; background: #f3ead6; box-shadow: 0 2px 6px #0009; }
.choix-ville { max-width: 860px; margin: 40px auto 0; padding: 18px 20px; pointer-events: auto; background: #0f0d0bf2; box-shadow: inset 0 0 0 1px var(--bordure); }
.pseudo-ville { display: flex; align-items: center; gap: 10px; }
.pseudo-ville input, .chat input { box-sizing: border-box; padding: 7px 10px; color: var(--texte); font: inherit; background: #151311; border: 1px solid var(--bordure); }
.pseudo-ville input:focus, .chat input:focus { outline: none; border-color: var(--accent); }
.panneau-social, .chat, .panneau-groupe, .invitation-groupe { position: fixed; pointer-events: auto; background: #0f0d0be8; box-shadow: inset 0 0 0 1px var(--bordure); }
.panneau-social { top: 90px; right: 12px; box-sizing: border-box; width: 264px; max-height: calc(100dvh - 380px); padding: 8px; overflow-y: auto; }
.onglets-sociaux { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
/* Les fenêtres réglables : barre pour déplacer, coin pour redimensionner, réduire, cacher. */
.panneau-reglable { display: flex; flex-direction: column; resize: both; overflow: auto; min-width: 200px; min-height: 34px; }
.barre-panneau { position: sticky; z-index: 1; top: -8px; display: flex; align-items: center; gap: 4px; margin: -2px -2px 4px; padding: 2px 4px; cursor: move; user-select: none; background: #1d1915; box-shadow: inset 0 -1px 0 var(--bordure); }
.barre-panneau span { flex: 1; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 13px; }
.barre-panneau button { min-width: 26px; padding: 0 6px; font-size: 14px; line-height: 20px; }
.panneau-reglable.reduit { resize: none; height: auto !important; min-height: 0; }
.panneau-reglable.reduit > :not(.barre-panneau) { display: none; }
.cache-panneau { display: none !important; }
.chat.panneau-reglable .journal-chat { flex: 1; min-height: 60px; height: auto; }
.chat.panneau-reglable { height: 210px; }
.dock-panneaux { position: fixed; z-index: 6; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.dock-panneaux button { background: #0f0d0be8; }
/* Le menu Échap : trois colonnes sur un écran d'ordinateur, une seule sur un écran étroit. */
.menu-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; width: min(1100px, 94vw); align-items: start; }
.menu-section { display: flex; flex-direction: column; gap: 8px; max-height: 72vh; padding: 14px 16px; overflow-y: auto; background: #0f0d0bd9; box-shadow: inset 0 0 0 1px var(--bordure); }
.menu-section h2 { margin: 0 0 4px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 18px; }
.menu-section p { margin: 0; color: var(--doux); }
.menu-section .ecran-boutons { margin: 0; }
#texteCodeServeur strong { color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 22px; letter-spacing: 3px; }
.menu-section form { display: flex; gap: 6px; }
.menu-section form input { flex: 1; min-width: 0; }
#champCode { text-transform: uppercase; letter-spacing: 2px; text-align: center; }
#menuAmis { margin: 0; padding: 0; }
.marche { margin-top: 12px; }
.marche .annonces { display: grid; gap: 4px; margin: 8px 0; max-height: 260px; overflow-y: auto; }
.marche .annonce { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 6px; background: #0f0d0b99; box-shadow: inset 0 0 0 1px var(--bordure); }
.marche .annonce svg, .marche .annonce .icone-arme { width: 26px; height: 26px; }
.marche .annonce small { display: block; color: var(--doux); font-size: 12px; }
.marche .annonce em { color: var(--accent-clair); font-style: normal; }
.vente-marche { display: flex; flex-wrap: wrap; gap: 6px; }
.vente-marche input { width: 90px; }
.classement strong { display: block; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; }
.classement ol { margin: 4px 0 0; padding-left: 22px; }
.classement ol li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.classement em { color: var(--accent-clair); font-style: normal; }
.onglets-sociaux button { flex: 1; padding: 5px; font-size: 14px; }
.onglets-sociaux button.actif { color: var(--accent-clair); border-color: var(--accent); }
.liste-sociale { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.liste-sociale li { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: #151311; }
.liste-sociale li div { flex: 1; min-width: 0; }
.liste-sociale strong, .liste-sociale span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-sociale strong { font-size: 14px; }
.liste-sociale span { color: var(--doux); font-size: 12px; }
.liste-sociale button { padding: 3px 7px; font-size: 13px; }
.chat { z-index: 4; bottom: 12px; left: 12px; box-sizing: border-box; width: min(380px, calc(100% - 24px)); padding: 6px; }
.journal-chat { height: 140px; overflow-y: auto; font-size: 14px; line-height: 1.25; }
.journal-chat p { margin: 0 0 2px; overflow-wrap: anywhere; }
.journal-chat b { color: var(--accent-clair); font-weight: 600; }
.chat input { width: 100%; margin-top: 4px; }
.invitation-groupe { top: 110px; left: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px #000a; transform: translateX(-50%); }
.invitation-groupe p { flex-basis: 100%; margin: 0; text-align: center; }
.panneau-groupe { right: 12px; bottom: 12px; box-sizing: border-box; width: 264px; padding: 10px; }
.panneau-groupe h2 { margin: 0 0 6px; }
.panneau-groupe ul { display: grid; gap: 3px; margin: 0 0 8px; padding: 0; list-style: none; }
.panneau-groupe li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.panneau-groupe li svg, .panneau-groupe li .icone-arme { width: 18px; height: 18px; }
.panneau-groupe li em { margin-left: auto; color: var(--doux); font-size: 13px; }
.panneau-groupe button { width: 100%; margin-top: 4px; }
/* Sur un écran étroit, la liste des joueurs reste là (plus petite) : sans elle, impossible d'inviter. */
@media (max-width: 760px) {
  .panneau-social { width: 200px; max-height: 45vh; font-size: 13px; }
}

.case-pouvoir.classe-sort { box-shadow: inset 0 0 0 1px var(--accent-clair); }

/* Choix de bonus sans pause, à plusieurs */
.ecran.sans-pause { top: auto; bottom: 180px; gap: 4px; padding: 0; overflow: visible; pointer-events: none; background: none; }
.ecran.sans-pause h1 { font-size: 16px; text-shadow: 0 1px 3px #000; }
.ecran.sans-pause > p { display: none; }
.ecran.sans-pause .aubaine { flex-direction: row; padding: 8px 10px; pointer-events: auto; background: #0f0d0be6; }
.ecran.sans-pause .aubaine svg, .ecran.sans-pause .aubaine .icone-arme { width: 30px; height: 30px; }
.ecran.sans-pause .aubaine span { display: none; }

.lien-admin { margin-right: auto; margin-left: 12px; color: var(--doux); font-size: 14px; }

/* Compte et bannissement */
.formulaire-compte { display: grid; gap: 8px; max-width: 380px; }
.formulaire-compte label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.formulaire-compte input { width: 240px; padding: 7px 10px; color: var(--texte); font: inherit; background: #151311; border: 1px solid var(--bordure); }
.ecran.ecran-banni { z-index: 9; background: #0a0908; }

/* Compte complet */
.carte-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 560px; padding: 10px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.carte-compte img { width: 64px; height: 64px; object-fit: cover; }
.carte-compte div { flex: 1; min-width: 160px; }
.carte-compte strong, .carte-compte span { display: block; }
.carte-compte span { color: var(--doux); font-size: 14px; }
.fournisseurs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.formulaire-compte input[type="date"] { color-scheme: dark; }
.formulaire-compte input[type="file"] { width: 190px; padding: 4px; font-size: 13px; }
.formulaire-compte textarea { box-sizing: border-box; width: 240px; padding: 7px 10px; color: var(--texte); font: inherit; background: #151311; border: 1px solid var(--bordure); }
.ligne-photo span { display: flex; align-items: center; gap: 8px; }
.ligne-photo img { width: 44px; height: 44px; object-fit: cover; }
.deja-compte { margin-top: 18px; }
/* Tant que le compte n'est pas ouvert, on ne voit que le formulaire. */
body.connexion-requise .camp-haut { display: none; }

.version { color: var(--doux); font-family: "Spectral", Georgia, serif; font-size: 12px; letter-spacing: 0; text-transform: none; }
.formulaire-compte label.ligne-accord { justify-content: flex-start; font-size: 14px; }
.ligne-accord a { color: var(--accent-clair); }
.ecran.modal-fond#ecranBienvenue { z-index: 8; }

.bouton-admin { padding: 9px 18px; color: var(--accent-clair); text-decoration: none; border: 1px solid var(--accent); }

/* Menu sur le nom d'un joueur */
.menu-joueur { position: fixed; z-index: 7; display: flex; flex-direction: column; gap: 3px; width: 180px; padding: 8px; background: #0f0d0bf5; box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px #000a; }
.menu-joueur strong { padding: 0 2px 4px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 14px; }
.menu-joueur button { padding: 5px 8px; font-size: 14px; text-align: left; }
.liste-sociale [data-fiche] { cursor: pointer; }

/* Réputation, butin et échanges */
.panneau-social { overflow-x: hidden; }
.liste-sociale li { flex-wrap: wrap; }
.liste-sociale li div { flex-basis: 100%; }
.menu-joueur span { padding: 0 2px 4px; font-size: 12px; opacity: 0.8; }
.etiquette.loin small { display: none; }
/* À la première personne, son propre nom flotterait devant les yeux. */
.premiere-personne .etiquette.soi { display: none; }
.etiquette.loin button { opacity: 0.75; font-size: 12px; }
.etiquette small { padding: 0 6px; color: var(--texte-doux, #b9ae9a); font-size: 11px; background: #0f0d0bb0; }
.etiquette.porteur button { color: #ffd76a; box-shadow: inset 0 0 0 1px #ffd76a; }
.etiquette.hostile button { color: #ff6a55; box-shadow: inset 0 0 0 1px #ff6a55; }
.etiquette.protege button { color: #9fd8ff; box-shadow: inset 0 0 0 1px #9fd8ff; opacity: .85; }
.journal-chat b[data-fiche] { cursor: pointer; }
.journal-chat b[data-fiche]:hover { text-decoration: underline; }
.journal-chat .prive { color: #d9b3ff; }
.journal-chat .prive b { color: #d9b3ff; }
.journal-chat .systeme { color: #ff9d7a; font-style: italic; }
.cible-mp { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 0; color: #d9b3ff; font-size: 13px; }
.cible-mp button { padding: 0 8px; }
.onglets-sociaux button { padding: 5px 2px; font-size: 13px; }
.vie-ville { width: 210px; height: 10px; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--bordure); }
.vie-ville i { display: block; height: 100%; background: #b8372b; }
.carte-ville { display: block; background: #0f0d0be6; box-shadow: 0 0 0 1px var(--bordure); }
.formulaire-echange label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; text-align: left; }
.formulaire-echange input, .formulaire-echange select { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) { .carte-ville { display: none; } }
.choix-depart { display: flex; flex-direction: column; gap: 4px; max-height: 42dvh; overflow-y: auto; text-align: left; }
.choix-depart button.choisi { color: var(--accent-clair); border-color: var(--accent); }
.choix-depart button:disabled { opacity: 0.75; cursor: default; }
.choix-depart small { display: block; opacity: 0.75; }
.resume-depart { color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; }

/* Les champs des fenêtres suivent le reste du jeu */
.formulaire-echange { width: min(420px, calc(100% - 32px)); box-sizing: border-box; }
.formulaire-echange h2 { margin: 0 0 6px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; }
.formulaire-echange label { color: var(--doux); font-size: 14px; }
.formulaire-echange input, .formulaire-echange select { padding: 7px 9px; color: var(--texte); font: inherit; font-size: 15px; background: #1a1714; border: 1px solid var(--bordure); border-radius: 0; color-scheme: dark; }
.formulaire-echange input:focus, .formulaire-echange select:focus { border-color: var(--accent); outline: none; }
.formulaire-echange { padding: 20px; }
.titre-region { position: fixed; z-index: 4; top: 16%; left: 0; right: 0; margin: 0; color: #fff4d8; font-family: "Cinzel", Georgia, serif; font-size: 34px; text-align: center; text-shadow: 0 2px 8px #000c; opacity: 0; pointer-events: none; }
.titre-region.visible { animation: titre-region 4.5s ease forwards; }
@keyframes titre-region { 0% { opacity: 0; transform: translateY(8px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.icone-arme { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Métiers et ateliers */
.cartes-metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 18px; }
.carte-metier { display: grid; grid-template-columns: 72px 1fr; gap: 8px 10px; align-items: center; padding: 10px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.carte-metier.choisi { box-shadow: inset 0 0 0 1px var(--accent); }
.carte-metier img { width: 72px; height: 72px; }
.carte-metier strong { color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; }
.carte-metier em { display: block; margin-top: 4px; color: var(--doux); font-size: 13px; }
.carte-metier button { grid-column: 1 / -1; }
.atelier { margin-bottom: 14px; }
.atelier h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.atelier h3 img { width: 18px; height: 18px; }
.atelier h3 small { color: var(--doux); font-family: inherit; font-weight: 400; }
.recette { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 3px; background: #151311; }
.recette.bloquee { opacity: 0.62; }
.recette .sortie { display: flex; align-items: center; gap: 6px; min-width: 210px; }
.recette .sortie img { width: 34px; height: 34px; }
.recette .entrees { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.recette .entrees span { display: flex; align-items: center; gap: 3px; }
.recette .entrees img { width: 24px; height: 24px; }
.recette .entrees .manque { color: #e07a6a; }
.recette em { color: #e0b06a; font-size: 13px; }
.cout-construction img, .ligne-cout img { width: 24px; height: 24px; }
.carte-mode img { width: 64px; height: 64px; }
img.cadenas { width: 44px; height: 44px; }
img.cadenas-petit { width: 30px; height: 30px; }
.onglets button { padding-inline: 8px; }

/* Le jeu reste à l'écran : tout le reste s'ouvre par-dessus. */
.camp-haut { justify-content: space-between; }
.joueur-camp, .raccourcis { padding: 5px 10px; pointer-events: auto; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--bordure); }
.joueur-camp { margin-left: 0; }
.raccourcis { display: flex; gap: 4px; padding: 4px; }
.raccourcis button { padding: 5px 12px; font-size: 14px; }
.alerte-camp { padding: 5px 12px; color: var(--accent-clair); font-size: 14px; background: #0f0d0be6; box-shadow: inset 0 0 0 1px var(--accent); }
.fenetre-jeu { position: fixed; z-index: 20; top: 50%; left: 50%; display: flex; flex-direction: column; box-sizing: border-box; width: min(1060px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); pointer-events: auto; background: #100e0cf7; box-shadow: inset 0 0 0 1px var(--bordure), 0 24px 70px #000; transform: translate(-50%, -50%); }
.fenetre-jeu h1 { font-size: 18px; }
.fenetre-corps { flex: 1; min-height: 0; padding: 14px 20px 20px; overflow-y: auto; }
.fenetre-corps .choix-ville { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
#ecranPause { background: #0a0908b8; backdrop-filter: blur(2px); }
.bilan-raid { width: min(560px, 100%); padding: 20px 24px; overflow-y: auto; text-align: center; }
.bilan-raid h1 { font-size: 24px; }
.gains-metier { display: block; color: var(--accent-clair); font-size: 13px; }
.bas.bas-ville .endurance, .bas.bas-ville .pouvoirs { display: none; }
.inventaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.inventaire .choix { margin-bottom: 8px; }
.actions-inventaire { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.case-choisie { outline: 2px solid var(--accent-clair); }
.ecran-chargement { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; background: #0a0908; }
.ecran-chargement[hidden] { display: none; }
.ecran-chargement h1 { font-size: 26px; }
.barre-chargement { width: min(420px, 100%); height: 8px; background: #151311; box-shadow: inset 0 0 0 1px var(--bordure); }
.barre-chargement i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.3s; }

/* Le tutoriel : la flèche qui montre où aller, et la boîte de dialogue des personnages. */
.fleche-guide { position: fixed; z-index: 6; top: 0; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; }
/* Pas d'animation CSS sur la flèche : elle écraserait l'orientation donnée par le jeu et la ferait tourner sur elle-même.
   Le jeu la fait seulement monter et descendre au-dessus de sa cible. */
.fleche-guide svg { display: block; width: 100%; height: 100%; fill: var(--accent-clair); stroke: #2a1d08; stroke-width: 2; filter: drop-shadow(0 0 6px #000) drop-shadow(0 0 10px #e0bd6e88); }
.fleche-guide b { position: absolute; top: 48px; left: 50%; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 13px; white-space: nowrap; text-shadow: 0 0 3px #000, 0 1px 2px #000; transform: translateX(-50%); }
.dialogue { position: fixed; z-index: 9; bottom: 120px; left: 50%; box-sizing: border-box; width: min(640px, calc(100% - 32px)); padding: 16px 22px 12px; cursor: pointer; background: linear-gradient(#17130ef7, #0f0d0bf7); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px #0f0d0bcc, 0 14px 40px #000c; transform: translateX(-50%); animation: entreDialogue .25s ease-out; }
.dialogue strong { display: block; margin-bottom: 6px; color: var(--accent-clair); font-family: "Cinzel", Georgia, serif; font-size: 16px; letter-spacing: .04em; }
.dialogue p { margin: 0; font-size: 17px; line-height: 1.45; }
.dialogue small { display: block; margin-top: 10px; color: var(--doux); font-size: 12px; text-align: right; }
@keyframes entreDialogue { from { opacity: 0; transform: translate(-50%, 12px); } }
.choix-qualite { display: flex; gap: 8px; margin-top: 8px; }
.choix-qualite button { flex: 1; }
.choix-qualite button.choisi { color: var(--accent-clair); box-shadow: inset 0 0 0 1px var(--accent); }
.premiers-pas .tache { display: block; text-align: left; }
.premiers-pas .tache.faite { color: #8fdc98; }