/* Barre du voyageur, d'après le design de Sarah : fond vert presque noir, double filet or,
   d20 dessiné au trait, volutes dorées, sections en kanji reliées par un fil, case active rouge,
   lune rouge cernée d'or et compteur 巻. Remplace l'habillage de la barre dans jeu.css. */
.barre {
  --b-or: #c9a45c; --b-or-doux: rgba(201,164,92,.42); --b-rouge: #a3201a;
  width: min(1180px, calc(100% - 20px)); height: var(--barre-h); gap: 18px; padding: 0 30px 0 26px; border-radius: 0; overflow: visible;
  background: radial-gradient(ellipse 60% 120% at 50% 50%, #15241b, #0d1611 70%), #0d1611;
  border: 1px solid var(--b-or-doux);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  font-family: "Cormorant Garamond", var(--f-jp), serif; font-size-adjust: none;
}
:root { --barre-h: 92px; }
.barre-filet { position: absolute; inset: 5px; border: 1px solid rgba(201,164,92,.55); pointer-events: none;
  background:
    linear-gradient(var(--b-or), var(--b-or)) left top / 12px 1px no-repeat, linear-gradient(var(--b-or), var(--b-or)) left top / 1px 12px no-repeat,
    linear-gradient(var(--b-or), var(--b-or)) right top / 12px 1px no-repeat, linear-gradient(var(--b-or), var(--b-or)) right top / 1px 12px no-repeat,
    linear-gradient(var(--b-or), var(--b-or)) left bottom / 12px 1px no-repeat, linear-gradient(var(--b-or), var(--b-or)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--b-or), var(--b-or)) right bottom / 12px 1px no-repeat, linear-gradient(var(--b-or), var(--b-or)) right bottom / 1px 12px no-repeat; }
.barre-filet::before, .barre-filet::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--b-or); transform: rotate(45deg); }
.barre-filet::before { left: -3px; top: -3px; } .barre-filet::after { right: -3px; bottom: -3px; }
.barre-losange { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid var(--b-or); transform: rotate(45deg); background: #0d1611; pointer-events: none; }
.barre-losange.g { left: -4px; } .barre-losange.d { right: -4px; }

/* le d20 */
.voyageur { position: relative; z-index: 1; gap: 16px; flex: none; }
.voyageur-portrait { width: 62px; height: 70px; color: var(--b-or); }
.voyageur-portrait svg { overflow: visible; }
.voyageur-portrait svg * { fill: none; stroke: var(--b-or); stroke-width: 1.6; stroke-linejoin: round; }
.voyageur-portrait .d20-face { fill: rgba(163,32,26,.12); stroke-width: 1.8; }
.voyageur-portrait .d20-mini { fill: var(--b-or); stroke: none; font: 600 9px "Cormorant Garamond", serif; text-anchor: middle; opacity: .7; }
.voyageur-portrait .d20-attache { stroke-width: 1; }
.voyageur-portrait span { padding-top: 3px; font-family: "Cormorant Garamond", serif; font-size-adjust: none; font-size: 1.05rem; font-weight: 600; color: #f0e6cf; }
/* le chiffre est posé au centre de la face avant et tourne avec le dé */
.voyageur-portrait:hover svg, .voyageur-portrait.roule svg,
.voyageur-portrait:hover span, .voyageur-portrait.roule span { animation: rouler .6s ease-out; }
.voyageur-infos { gap: 3px; }
.voyageur-infos b { font-family: "Cormorant Garamond", serif; font-size-adjust: none; font-weight: 500; font-size: .92rem; letter-spacing: .3em; color: #f0e6cf; }
.voyageur-infos .ja { color: #f0e6cf; letter-spacing: .12em; margin-left: .3em; }
.voyageur-presage { font-family: "Cormorant Garamond", var(--f-jp), serif; font-size-adjust: none; font-size: .95rem; letter-spacing: .12em; color: #e6dccb; }
.ki { position: relative; width: 150px; height: 6px; margin-top: 6px; background: none; border: 1px solid var(--b-or-doux); padding: 1px; }
.ki::after { content: ""; position: absolute; right: -10px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border: 1px solid var(--b-or); transform: rotate(45deg); }
.ki i { background: var(--b-rouge); box-shadow: 0 0 6px rgba(163,32,26,.6); }

/* volutes dorées */
.volute { flex: 0 1 200px; min-width: 0; height: 78%; width: auto; fill: none; stroke: var(--b-or); stroke-width: 1.4; stroke-linecap: round; opacity: .75; pointer-events: none; }
.volute.gauche { margin: 0 -8px 0 -10px; align-self: flex-end; margin-bottom: 4px; }
.volute.droite { margin: 0 -40px 0 -6px; align-self: flex-end; margin-bottom: 2px; transform: scaleX(-1) scaleY(.8); transform-origin: bottom; opacity: .6; }

/* les sections : cases à double filet reliées par un fil d'or */
.raccourcis { position: relative; z-index: 1; gap: 24px; margin: 0 auto; flex: none; }
.raccourcis a { width: 56px; height: 56px; background: #0b130e; border: 1px solid var(--b-or-doux);
  box-shadow: inset 0 0 0 3px #0b130e, inset 0 0 0 4px rgba(201,164,92,.3); transition: transform .4s cubic-bezier(.22,.61,.36,1), background .4s, box-shadow .4s, border-color .4s; }
.raccourcis a .k { font-family: var(--f-jp); font-size-adjust: none; font-size: 1.45rem; color: #f0e6cf; transition: color .4s; }
/* le fil d'or entre deux cases, avec sa perle */
.raccourcis a + a::after { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 24px; height: 5px; margin-top: -2px; pointer-events: none;
  background: radial-gradient(circle, var(--b-or) 1.6px, transparent 2.2px) center / 5px 5px no-repeat, linear-gradient(var(--b-or-doux), var(--b-or-doux)) center / 100% 1px no-repeat; }
/* repères au-dessus et en dessous */
.raccourcis a::before { content: ""; position: absolute; left: 50%; top: -14px; bottom: -14px; width: 1px; margin-left: -.5px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--b-or-doux), var(--b-or-doux)) top / 1px 8px no-repeat, linear-gradient(var(--b-or-doux), var(--b-or-doux)) bottom / 1px 8px no-repeat; }
.raccourcis a:nth-child(odd)::before { opacity: 0; }
.raccourcis a:hover { transform: translateY(-2px); border-color: var(--b-or); }
/* case active : laque rouge, halo, losanges */
.raccourcis a.actif { background: linear-gradient(180deg, #b32a20, #861812); border-color: #d9a24f;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), inset 0 0 0 4px rgba(240,200,140,.35), 0 0 18px rgba(200,40,30,.55), 0 0 40px rgba(200,40,30,.25); }
.raccourcis a.actif .k { color: #fbeee0; }
.raccourcis a.actif::before { opacity: 1; top: -18px; bottom: -18px;
  background:
    linear-gradient(var(--b-or), var(--b-or)) top / 1px 12px no-repeat, linear-gradient(var(--b-or), var(--b-or)) bottom / 1px 12px no-repeat; }
.raccourcis a.actif .k::before, .raccourcis a.actif .k::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -4px; border: 1px solid var(--b-or); background: #a3201a; transform: rotate(45deg); }
.raccourcis a.actif .k::before { top: -18px; } .raccourcis a.actif .k::after { bottom: -18px; }
.raccourcis a small { font-family: "Cormorant Garamond", serif; font-size-adjust: none; font-size: .78rem; letter-spacing: .14em; background: #0d1611; border-color: var(--b-or-doux); bottom: calc(100% + 26px); }

/* la lune et le compteur */
.lune { flex: none; width: 54px; height: 54px; overflow: visible; margin-right: 6px; }
.lune .lune-fond { fill: #a3201a; filter: drop-shadow(0 0 6px rgba(200,40,30,.5)); }
.lune .lune-or { fill: none; stroke: var(--b-or); stroke-width: 1.4; }
.lune .etoile { fill: var(--b-or); opacity: .8; }
.collection { position: relative; z-index: 1; gap: 12px; flex: none; font-family: "Cormorant Garamond", serif; font-size-adjust: none; }
.collection .k { font-size: 1.7rem; color: #f0e6cf; }
.collection-compte { display: flex; flex-direction: column; align-items: flex-start; }
.collection-compte > span { font-size: 1.5rem; letter-spacing: .08em; color: #f0e6cf; line-height: 1; }
.collection-compte b { font-weight: 500; }
.collection small { margin-top: 8px; padding-top: 6px; font-size: .6rem; letter-spacing: .3em; color: rgba(240,230,207,.7);
  background: linear-gradient(var(--b-or-doux), var(--b-or-doux)) top left / 100% 1px no-repeat; }

@media (max-width: 1100px) { .volute { display: none; } .lune { display: none; } }
@media (max-width: 860px) { .voyageur-infos { display: none; } }
@media (max-width: 767px) {
  :root { --barre-h: 66px; }
  .barre { gap: 8px; padding: 0 10px; }
  .barre-filet { inset: 3px; }
  .voyageur-portrait { width: 42px; height: 48px; }
  .voyageur-portrait span { font-size: .85rem; padding-top: 2px; }
  .voyageur-portrait .d20-mini { display: none; }
  .barre { gap: 6px; padding: 0 8px; }
  .raccourcis { gap: 3px; flex: 0 1 auto; min-width: 0; }
  .raccourcis a { width: 31px; height: 33px; box-shadow: inset 0 0 0 2px #0b130e, inset 0 0 0 3px rgba(201,164,92,.3); }
  .raccourcis a.actif { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 0 12px rgba(200,40,30,.55); }
  .raccourcis a .k { font-size: .92rem; }
  .voyageur-portrait { width: 36px; height: 42px; }
  .raccourcis a + a::after, .raccourcis a::before, .raccourcis a.actif .k::before, .raccourcis a.actif .k::after, .raccourcis a small { display: none; }
  .collection { gap: 4px; }
  .collection .k { display: none; }
  .collection-compte > span { font-size: .95rem; }
  .collection small { display: none; }
}

/* Le compteur 巻 x/17 est retiré de la barre (les éléments restent pour le script) */
.barre .collection { display: none; }