/* Fiche du voyageur : onglets, schéma d'équipement autour de l'aperçu 3D, caractéristiques et barre de résonance. */

/* Barre de résonance (mana) du HUD, sous l'endurance */
.mana-label{margin-top:7px}
.mana-track>div{background:linear-gradient(180deg,#b9ecf3,#5fb3c8 55%,#2f7288);box-shadow:inset 0 1px #e8fbff99,0 0 9px #62c8de7a}

/* Onglets */
.satchel-tabs{display:flex;gap:6px;padding:0 24px;background:#0e1816;border-bottom:1px solid #8b724955}
.satchel-tabs button{position:relative;padding:11px 20px 10px;border:0;border-bottom:3px solid transparent;background:transparent;color:#b9ab8b;font:600 13px 'Segoe UI',sans-serif;letter-spacing:.04em;cursor:pointer}
.satchel-tabs button:hover{color:#ecd7ac}
.satchel-tabs button[aria-pressed=true]{color:#ffe3a8;border-bottom-color:#d7ae6e}
.tab-badge{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:#e0805a;color:#1a0f08;font:700 11px/18px 'Segoe UI',sans-serif;text-align:center}
.tab-badge[hidden]{display:none}

/* Corps : schéma | réserve ou caractéristiques | détail */
.panel.satchel-panel .satchel-body{display:grid;grid-template-columns:410px minmax(250px,1fr) 300px;min-height:0}
.panel.satchel-panel .satchel-body[data-tab=stats],.panel.satchel-panel .satchel-body[data-tab=look]{grid-template-columns:410px 1fr}
.satchel-body [hidden]{display:none!important}

/* Schéma d'équipement */
.doll{display:flex;flex-direction:column;gap:12px;padding:16px;border-right:1px solid #8b724940;background:linear-gradient(#1a2a23aa,#0f1a15aa)}
.doll-board{display:grid;grid-template-columns:82px 1fr 82px;grid-template-rows:repeat(6,auto);grid-template-areas:"head stage back" "shoulders stage armor" "weapon stage offhand" "gloves stage belt" "ring stage legs" "charm stage boots";gap:8px;align-items:start}
.s-head{grid-area:head}.s-shoulders{grid-area:shoulders}.s-legs{grid-area:legs}.s-back{grid-area:back}.s-weapon{grid-area:weapon}.s-offhand{grid-area:offhand}.s-gloves{grid-area:gloves}.s-armor{grid-area:armor}.s-charm{grid-area:charm}.s-belt{grid-area:belt}.s-ring{grid-area:ring}.s-boots{grid-area:boots}
.doll-stage{align-self:stretch}
.doll-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;width:82px;height:78px;padding:5px 4px 4px;border:2px solid #82643d;border-radius:5px;background:linear-gradient(155deg,#354536,#14231b);color:#e8d6b3;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s,opacity .15s}
.doll-slot:hover{transform:translateY(-2px);border-color:#d7ae6e}
.doll-slot img{width:40px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 4px #0009)}
.doll-slot small{margin-top:auto;font:8px 'Courier New',monospace;letter-spacing:1px;color:#b3a484;text-transform:uppercase}
.doll-slot .slot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px Georgia,serif}
.doll-slot em{position:absolute;top:3px;right:5px;font:700 11px 'Segoe UI',sans-serif;font-style:normal;color:#ffd48a}
.slot-empty{width:46px;height:50px;margin-top:4px;border:1px dashed #8d744b88;border-radius:4px;background:#0b140f66}
.doll-slot.filled{border-color:#a98a55}
.doll-slot.filtering{border-color:#ffe3a8;box-shadow:0 0 0 2px #ffe3a855}
.doll-slot.droppable{border-color:#9be09b;box-shadow:0 0 0 3px #9be09b66,0 0 18px #9be09b88;animation:slot-ready .9s ease-in-out infinite alternate}
.doll-slot.dim{opacity:.38}
@keyframes slot-ready{to{box-shadow:0 0 0 3px #9be09bbb,0 0 24px #9be09bcc}}
.doll-stage{grid-area:stage;position:relative;align-self:stretch;min-height:310px;border:1px solid #8b724966;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#33493c,#17251e 75%)}
.doll-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.doll-stage canvas:active{cursor:grabbing}
.doll-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:#b9ab8baa;font:10px 'Segoe UI',sans-serif;pointer-events:none}
.doll .gear-stats{margin:0}
.doll .resource-purse{margin:0}

/* Réserve : filtre d'emplacement et aide */
.slot-filter{margin:0 0 10px;padding:5px 12px;border:1px solid #ffe3a888;border-radius:999px;background:#caa05a30;color:#ffe3a8;font:12px 'Segoe UI',sans-serif;cursor:pointer}
.slot-filter:hover{background:#caa05a55}
.drag-hint{margin:12px 0 0;color:#a89a7c;font:11px 'Segoe UI',sans-serif;text-align:center}

/* Caractéristiques */
.stats-view{padding:18px 26px 22px;display:flex;flex-direction:column;gap:14px;color:#e6d6b5;overflow:auto}
.stats-head{display:flex;align-items:baseline;gap:16px}
.stats-head h3{margin:0;font:600 24px Georgia,serif;color:#ffe3a8}
.stats-points{margin:0;flex:1;font:600 13px 'Segoe UI',sans-serif;color:#9be09b}
.stats-reset{padding:5px 12px;border:1px solid #8d744b99;border-radius:4px;background:#243630;color:inherit;font:12px 'Segoe UI',sans-serif;cursor:pointer}
.stats-reset:disabled,.attr-step:disabled{opacity:.35;cursor:default}
.stats-intro{margin:0;color:#b9ab8b;font:12px/1.5 'Segoe UI',sans-serif}
.stats-attrs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats-attr{position:relative;display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px 8px;padding:10px 12px 12px;border:1px solid #8d744b66;border-left:4px solid var(--attr);border-radius:4px;background:#14221bcc}
.attr-name strong{display:block;font:600 16px Georgia,serif;color:#f6e7c4}
.attr-name small{font:10px 'Courier New',monospace;letter-spacing:1px;color:var(--attr)}
.attr-value{text-align:right;line-height:1.1}
.attr-value b{font:700 24px 'Segoe UI',sans-serif;color:#fff1cd}
.attr-value small{display:block;max-width:130px;font:10px 'Segoe UI',sans-serif;color:#a89a7c}
.attr-step{width:28px;height:28px;border:1px solid #8d744b;border-radius:4px;background:#2a3d37;color:#f6e7c4;font:700 16px/1 'Segoe UI',sans-serif;cursor:pointer}
.attr-plus:not(:disabled){background:#caa05a;color:#241a0c;border-color:#caa05a}
.attr-meter{grid-column:1/-1;height:5px;border-radius:3px;background:#0b140f;overflow:hidden}
.attr-meter i{display:block;height:100%;background:var(--attr)}
.attr-text{grid-column:1/-1;margin:2px 0 0;color:#b9ab8b;font:11px/1.45 'Segoe UI',sans-serif}
.stats-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats-bar{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font:12px 'Segoe UI',sans-serif;color:#d8c9a8}
.stats-bar b{color:#fff1cd}
.stats-bar i{grid-column:1/-1;height:8px;border-radius:4px;background:#0b140f;overflow:hidden}
.stats-bar u{display:block;height:100%;text-decoration:none;background:#e0634e}
.stats-bar.stamina u{background:linear-gradient(#e5d38b,#7fa57a)}
.stats-bar.mana u{background:linear-gradient(#b9ecf3,#3f8fa8)}
.stats-table{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin:0}
.stats-table>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #8d744b33;font:12px 'Segoe UI',sans-serif}
.stats-table dt{color:#b9ab8b}.stats-table dd{margin:0;color:#fff1cd;font-weight:600}

@media(max-width:1100px){.panel.satchel-panel .satchel-body{grid-template-columns:350px minmax(200px,1fr) 250px}.panel.satchel-panel .satchel-body[data-tab=stats]{grid-template-columns:350px 1fr}.doll-board{grid-template-columns:70px 1fr 70px}.doll-slot{width:70px;height:74px}.doll-slot img{width:36px;height:38px}.stats-attrs{grid-template-columns:1fr}}

/* Le panneau force un texte sombre sur les paragraphes : on rétablit des teintes lisibles sur fond vert. */
.panel.satchel-panel .stats-view p,.panel.satchel-panel .stats-view small{color:#c7b996}
.panel.satchel-panel .stats-view .stats-points{color:#9be09b}
.panel.satchel-panel .stats-view .attr-value small{color:#a89a7c}

/* Repères peints et présentation des objets sur la version grand écran. */
.satchel-tabs button,.item-filters button{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.satchel-tabs button img{width:27px;height:27px;object-fit:contain;filter:drop-shadow(0 2px 2px #0009);opacity:.72;transition:transform .18s,opacity .18s}
.satchel-tabs button:hover img,.satchel-tabs button[aria-pressed=true] img{opacity:1;transform:translateY(-2px)}
.satchel-tabs button[aria-pressed=true]{background:linear-gradient(#bd945225,#bd945208);box-shadow:inset 0 1px #e3c58b30}
.storage-heading .section-label{display:inline-flex;align-items:center;gap:8px}
.storage-heading .section-label img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 2px 2px #0009)}
.item-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.item-filters button{min-width:0;min-height:48px;flex-direction:column;gap:1px;padding:4px 2px;border:1px solid #896e4888;border-radius:4px;background:linear-gradient(#34473775,#14231c88);box-shadow:inset 0 0 0 1px #0f2119,0 2px 3px #09170e88;font-size:10px;line-height:1.1}
.item-filters button img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 3px #000a);opacity:.7;transition:transform .18s,opacity .18s}
.item-filters button:hover img,.item-filters button[aria-pressed=true] img{opacity:1;transform:scale(1.12)}
.item-filters button[aria-pressed=true]{border-color:#e2bf79;box-shadow:inset 0 0 0 1px #b3945c,0 0 10px #d2ae633c}
.satchel-item{position:relative}
.satchel-item::after{content:'';position:absolute;inset:5px;border:1px solid #d8bb8040;pointer-events:none}
.satchel-item.selected::after{border-color:#edcd8d99}
.satchel-item[data-quality*="Rare"]{border-color:#769d9b}
.satchel-item[data-equipped=true] .equipped-label{background:#d4b16b;color:#1b2a20;font-weight:800}
.satchel-item:focus-visible,.item-filters button:focus-visible,.satchel-tabs button:focus-visible{outline:2px solid #f5d793;outline-offset:2px}
.satchel-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:190px;padding:20px;border:1px dashed #ad8c5d88;color:#d6c59f;text-align:center;background:radial-gradient(circle,#3d4e39aa,#1b2a20aa)}
.satchel-empty img{width:58px;height:58px;object-fit:contain;opacity:.8;filter:drop-shadow(0 3px 6px #0009)}
.satchel-empty strong{font:18px Georgia,serif;color:#f2ddb1}
.satchel-empty small{font:11px 'Segoe UI',sans-serif}
@media(min-width:1101px){.panel.satchel-panel{width:min(1280px,96vw)}.panel.satchel-panel .satchel-body{grid-template-columns:410px minmax(360px,1fr) 310px}.satchel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.satchel-tabs button img,.item-filters button img{transition:none}}
.panel.satchel-panel .doll-hint,.panel.satchel-panel .drag-hint{color:#a89a7c}