/* L'établi : même cuir sombre et laiton que la sacoche et l'arbre des gestes, une seule ligne par cadre, des zones qui défilent à l'intérieur. */
#craft{padding:22px}
#craft .panel.craft-panel{display:flex;flex-direction:column;width:min(1120px,96vw);max-width:none;height:min(820px,94dvh);padding:0;overflow:hidden;text-align:left;border:1px solid #b18e58;border-radius:4px;color:#e6d6b3;background-image:url('./assets/ui/leather-grain.svg'),radial-gradient(circle at 22% 10%,#354638,#17271e 72%,#101e18);background-size:144px 144px,auto;box-shadow:inset 0 0 0 1px #0e1914,0 0 0 1px #0b1510,0 24px 80px #000b}
#craft .panel.craft-panel::before{display:none}
#craft .craft-heading{position:relative;display:flex;align-items:center;gap:14px;flex:none;padding:14px 24px;border-bottom:1px solid #b18e5855;background:linear-gradient(90deg,#68533b33,transparent)}
#craft .craft-emblem{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #99794a;border-radius:50%;background:radial-gradient(#69523b66,#121b17)}
#craft .craft-emblem img{width:34px;height:34px;object-fit:contain}
#craft .craft-titles{min-width:0}
#craft .craft-heading .eyebrow{color:#e7c589;font:700 9px var(--material-sans,system-ui);letter-spacing:.16em}
#craft .craft-heading h2{margin:1px 0 2px;font:600 24px/1.1 var(--material-serif,Georgia,serif);color:#f1dfbb}
#craft .craft-heading p{margin:0;color:#d8c9a9;font:500 11.5px var(--material-sans,system-ui)}
#craft .craft-level{margin-left:auto;margin-right:52px;width:200px}
#craft .craft-level small{display:block;margin-bottom:4px;color:#cdbb92;font:600 10px var(--material-sans,system-ui);letter-spacing:.06em}
#craft .craft-xp{display:block;height:5px;border-radius:3px;background:#0f1d15;box-shadow:0 0 0 1px #8f754a66;overflow:hidden}
#craft .craft-xp i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c1893f,#f0c777)}
#craft .craft-heading .close-panel{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid #92784d;border-radius:50%;background:#1a231f;color:#e4cba1;font-size:22px;line-height:1;box-shadow:none}

#craft .craft-tabs{display:flex;flex:none;gap:6px;padding:0 24px;background:#0e1816;border-bottom:1px solid #8b724966}
#craft .craft-tabs button{padding:11px 22px 10px;border:0;border-bottom:3px solid transparent;background:transparent;color:#b9ab8b;font:600 13px var(--material-sans,system-ui);letter-spacing:.03em;cursor:pointer}
#craft .craft-tabs button:hover{color:#ecd7ac}
#craft .craft-tabs button[aria-pressed=true]{color:#ffe3a8;border-bottom-color:#d7ae6e;background:linear-gradient(#bd945225,#bd945208)}

#craft .craft-stock{display:flex;flex-wrap:wrap;gap:6px;flex:none;padding:9px 24px;border-bottom:1px solid #8b724944;background:#111a183b}
#craft .craft-stock .mat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid #6f5c3f;border-radius:14px;background:#101916;font:600 11px var(--material-sans,system-ui);color:#e4d6b0;cursor:help}
#craft .craft-stock .mat b{font-variant-numeric:tabular-nums;color:#fbe9c3}
#craft .craft-stock .mat small{color:#b3a98f;font-size:10px;font-weight:500}
#craft .craft-stock .mat.none{opacity:.45}
#craft .mat-icon{position:relative;display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--tint,#888) 38%,#101916);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint,#888) 60%,#000)}
#craft .mat-icon img{width:16px;height:16px;object-fit:contain;filter:drop-shadow(0 1px 1px #000a)}
#craft .shard-icon{background:radial-gradient(circle at 35% 30%,#f7a7a0,#b3382f);box-shadow:inset 0 0 0 1px #6b1d18}
#craft .craft-stock .shards{border-color:#8a4a45}

#craft .craft-body{display:grid;grid-template-columns:340px minmax(0,1fr);flex:1 1 auto;min-height:0}
#craft .craft-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid #8b724955;background:#0f19163a}
#craft .craft-filters{display:flex;flex-wrap:wrap;gap:5px;flex:none;padding:10px 12px 6px}
#craft .craft-filters button{padding:4px 10px;border:1px solid #6f5c3f;border-radius:12px;background:#101916;color:#cdbf9f;font:600 11px var(--material-sans,system-ui);cursor:pointer}
#craft .craft-filters button[aria-pressed=true]{border-color:#d7ae6e;color:#ffe3a8;background:#2a3a2c}
#craft .craft-rows{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 12px 12px}
#craft .craft-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid #5d4e36;border-radius:3px;background:linear-gradient(145deg,#56533a22,#101916);color:#e4d6b0;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
#craft .craft-row:hover{border-color:#bd9b62;background:#80613b2e}
#craft .craft-row.selected{border-color:#e5bd76;background:#80613b3d}
#craft .craft-row img{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px #0008)}
#craft .row-text{display:grid;gap:1px;min-width:0;flex:1}
#craft .row-text strong{font:600 13px/1.2 var(--material-serif,Georgia,serif);color:#f3e5c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#craft .row-text small{font:500 10.5px var(--material-sans,system-ui);color:#b3a98f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#craft .craft-row.ready .row-text small{color:#9be09b}.craft-row.short .row-text small{color:#e8c06f}.craft-row.locked{opacity:.55}.craft-row.owned{opacity:.7}
#craft .row-level{flex:none;font:700 9.5px var(--material-sans,system-ui);font-style:normal;color:#cdbb92;letter-spacing:.05em}
#craft .craft-row.locked .row-level{color:#e08b7a}
#craft .craft-empty{margin:18px 14px;color:#b5aa90;font:12px/1.5 var(--material-sans,system-ui)}
#craft .grade-badge{flex:none;padding:2px 7px;border:1px solid var(--grade,#e3d6b4);border-radius:10px;color:var(--grade,#e3d6b4);font:700 9px var(--material-sans,system-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#craft .grade-badge.big{margin-left:auto;font-size:11px;padding:4px 10px}

#craft .craft-detail{position:relative;min-height:0;overflow:hidden}
#craft .craft-scroll{height:100%;overflow-y:auto;padding:18px 26px 22px}
#craft .craft-item{display:flex;align-items:center;gap:16px;margin-bottom:10px}
#craft .craft-item>img{width:84px;height:84px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 5px #000a)}
#craft .craft-item h3{margin:0 0 3px;font:600 24px/1.1 var(--material-serif,Georgia,serif);color:#f4e3bd}
#craft .craft-sub{margin:0;color:#cdbb92;font:600 11.5px var(--material-sans,system-ui)}
#craft .craft-desc{margin:6px 0 0;color:#d6c8aa;font:12.5px/1.5 var(--material-sans,system-ui)}
#craft .craft-section{margin:16px 0 7px;color:#d1b276;font:700 10px var(--material-sans,system-ui);letter-spacing:.14em;text-transform:uppercase}
#craft .craft-costs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin:0;padding:0;list-style:none}
#craft .craft-costs .cost{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border:1px solid #5d4e36;border-radius:3px;background:#101916;font:600 12px var(--material-sans,system-ui)}
#craft .craft-costs .cost-name{flex:1;color:#e4d6b0}.craft-costs b{font-variant-numeric:tabular-nums;color:#9be09b}
#craft .craft-costs .cost.short{border-color:#8e4a3f}.craft-costs .cost.short b{color:#f08a76}
#craft .craft-fee{margin:9px 0 0;color:#cdbb92;font:600 11.5px var(--material-sans,system-ui)}.craft-fee.short{color:#f08a76}
#craft .craft-catalysts{display:flex;flex-wrap:wrap;gap:8px}
#craft .catalyst{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border:1px solid #6f5c3f;border-radius:4px;background:#101916;color:#e4d6b0;font:600 12px var(--material-sans,system-ui);text-align:left;cursor:pointer}
#craft .catalyst small{display:block;color:#b3a98f;font:500 10.5px var(--material-sans,system-ui)}
#craft .catalyst.on{border-color:#f0c777;background:#2f3d2b;box-shadow:0 0 0 1px #f0c77755}
#craft .catalyst:disabled{opacity:.4;cursor:default}
#craft .craft-metrics{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;margin-top:16px}
#craft .craft-chance{min-width:200px}
#craft .craft-chance small{display:block;color:#cdbb92;font:700 10px var(--material-sans,system-ui);letter-spacing:.12em;text-transform:uppercase}
#craft .craft-chance strong{display:block;margin:2px 0 6px;font:600 34px/1 var(--material-serif,Georgia,serif);color:#fbe9c3}
#craft .chance-rail{display:block;height:6px;border-radius:3px;background:#0f1d15;box-shadow:0 0 0 1px #8f754a66;overflow:hidden}
#craft .chance-rail i{display:block;height:100%;background:linear-gradient(90deg,#c1893f,#9be09b)}
#craft .craft-quality{display:flex;gap:8px;align-items:flex-end;height:78px}
#craft .craft-quality .q{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;width:62px;height:100%}
#craft .craft-quality .q i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;background:var(--grade)}
#craft .craft-quality .q b{font:700 10px var(--material-sans,system-ui);color:#f1e3c0;font-variant-numeric:tabular-nums}
#craft .craft-quality .q small{font:600 8.5px var(--material-sans,system-ui);color:var(--grade);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
#craft .craft-quality .q{--grade:#e3d6b4}
#craft .craft-risk{margin:14px 0 0;color:#b3a98f;font:11.5px/1.5 var(--material-sans,system-ui)}
#craft .craft-steps{display:flex;gap:4px}
#craft .craft-steps .step{flex:1;padding:6px 4px;border:1px solid #5d4e36;border-radius:3px;background:#101916;color:#8d856f;font:700 10px var(--material-sans,system-ui);text-align:center;text-transform:uppercase;letter-spacing:.04em}
#craft .craft-steps .step.past{color:#b3a98f}
#craft .craft-steps .step.now{border-color:var(--grade);color:var(--grade);background:#1d2a22}
#craft .craft-steps .step.next{border-style:dashed;border-color:var(--grade);color:var(--grade)}
#craft .craft-action{display:block;min-width:230px;margin-top:20px;padding:12px 22px;border:1px solid #eacb8f;border-radius:3px;background:linear-gradient(160deg,#f1d9a1,#d4ac6b 50%,#9c7040);color:#2c241a;font:700 13px var(--material-sans,system-ui);letter-spacing:.05em;cursor:pointer;box-shadow:0 3px 0 #614427}
#craft .craft-action:hover:not(:disabled){filter:brightness(1.08)}
#craft .craft-action:disabled{background:#2a3a2c;border-color:#5d4e36;color:#9c927a;box-shadow:none;cursor:default}
#craft .craft-action.danger{background:linear-gradient(160deg,#e8b49a,#c0735a 55%,#8a4332);border-color:#e6a98f;color:#2a1410;box-shadow:0 3px 0 #5a2a1e}
#craft .craft-footer{display:flex;justify-content:space-between;gap:14px;flex:none;padding:8px 24px;border-top:1px solid #8b724955;color:#bcb29a;font:10.5px var(--material-sans,system-ui)}
#craft .craft-footer kbd{padding:1px 5px;border:1px solid #92784d;border-radius:3px;background:#182a20;color:#f4dda9;font:700 9px var(--material-sans,system-ui)}

/* Scène de forge : recouvre le détail pendant l'opération, puis la révélation. */
#craft .forge-stage{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 46%,#2a1c14,#0b0e0c 75%);cursor:pointer;overflow:hidden}
#craft .forge-stage.hidden{display:none}
#craft .forge-scene{position:relative;width:520px;max-width:100%;height:300px}
#craft .forge-scene.shake{animation:forge-shake .22s ease-out}
#craft .forge-glow{position:absolute;left:50%;top:62%;width:260px;height:150px;margin:-75px 0 0 -130px;border-radius:50%;background:radial-gradient(#ff8a3c,#ff5a1f88 45%,transparent 70%);opacity:.15;filter:blur(8px);transition:opacity 1.1s,transform 1.1s}
#craft .forge-stage.heat .forge-glow{opacity:.9;transform:scale(1.25)}
#craft .forge-stage.quench .forge-glow{opacity:.25;background:radial-gradient(#cfe9f2,#8db9c988 45%,transparent 70%);transition:opacity .7s}
#craft .forge-anvil{position:absolute;left:50%;bottom:30px;width:150px;margin-left:-75px;filter:drop-shadow(0 8px 8px #000c)}
#craft .forge-hammer{position:absolute;left:50%;bottom:140px;width:120px;margin-left:-24px;transform-origin:15% 90%;transform:rotate(-58deg);filter:drop-shadow(0 6px 5px #000a)}
#craft .forge-hammer.strike{animation:forge-strike .42s cubic-bezier(.4,0,.2,1)}
#craft .forge-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#craft .forge-caption{margin:0;color:#f4e3bd;font:600 22px var(--material-serif,Georgia,serif)}
#craft .forge-skip{color:#8d856f;font:10px var(--material-sans,system-ui);letter-spacing:.08em}
#craft .forge-stage.quench .forge-scene::after{content:'';position:absolute;left:50%;top:34%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(#ffffffaa,transparent 70%);filter:blur(10px);animation:forge-steam 1s ease-out forwards}
@keyframes forge-strike{0%{transform:rotate(-58deg)}38%{transform:rotate(-95deg)}62%{transform:rotate(8deg)}100%{transform:rotate(-58deg)}}
@keyframes forge-shake{0%{transform:translate(0)}25%{transform:translate(-3px,2px)}60%{transform:translate(3px,-2px)}100%{transform:translate(0)}}
@keyframes forge-steam{from{opacity:.9;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-70px) scale(1.6)}}

#craft .forge-stage.reveal{cursor:default;background:radial-gradient(circle at 50% 38%,#33281c,#0b0e0c 78%);animation:forge-flash .6s ease-out}
#craft .forge-stage.reveal.failure{background:radial-gradient(circle at 50% 38%,#2d2626,#0b0e0c 78%)}
#craft .forge-stage.reveal.critical{background:radial-gradient(circle at 50% 38%,#4a1c18,#0b0e0c 78%);animation:forge-crack .5s ease-out}
#craft .forge-rays{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-330px 0 0 -260px;background:repeating-conic-gradient(from 0deg,#ffe7a533 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:forge-spin 14s linear infinite;pointer-events:none}
#craft .forge-result{position:relative;width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 0 22px var(--grade,#f0c777)) drop-shadow(0 8px 8px #000a);animation:forge-pop .7s cubic-bezier(.2,1.5,.4,1) both}
#craft .forge-title{position:relative;margin:6px 0 0;font:600 32px/1.1 var(--material-serif,Georgia,serif);color:var(--grade,#f4e3bd);animation:forge-rise .5s .15s both}
#craft .forge-sub{position:relative;margin:0;color:#d8c9a9;font:600 14px var(--material-sans,system-ui);animation:forge-rise .5s .25s both}
#craft .forge-xp{position:relative;margin:4px 0 0;color:#9be09b;font:700 12px var(--material-sans,system-ui);animation:forge-rise .5s .35s both}
#craft .forge-stage.reveal .craft-action{position:relative}
#craft .forge-stage.reveal.failure .forge-title{color:#e3b779}.forge-stage.reveal.critical .forge-title{color:#f08a76;animation:forge-rise .5s .15s both,forge-tremble .4s .2s 2}
@keyframes forge-flash{0%{filter:brightness(2.4)}100%{filter:brightness(1)}}
@keyframes forge-crack{0%{filter:brightness(1.8) saturate(1.8);transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}100%{filter:none;transform:none}}
@keyframes forge-pop{from{opacity:0;transform:scale(.3) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes forge-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes forge-spin{to{transform:rotate(360deg)}}
@keyframes forge-tremble{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.forge-stage.reveal,.forge-result,.forge-title,.forge-sub,.forge-xp,.forge-rays,.forge-hammer.strike,.forge-scene.shake{animation:none}.forge-glow{transition:none}}
@media(max-width:1000px){.craft-body{grid-template-columns:280px minmax(0,1fr)}.craft-level{display:none}}
body:has(#craft:not(.hidden)) .toast{bottom:auto;top:96px}
#craft .forge-wreck{width:120px;height:120px;filter:grayscale(.85) brightness(.7) drop-shadow(0 8px 8px #000a);animation:forge-pop .5s cubic-bezier(.2,1.2,.4,1) both,forge-tremble .35s .4s 2}
#craft .forge-stage.reveal.critical .forge-wreck{filter:grayscale(1) brightness(.5) sepia(.6) hue-rotate(-30deg) drop-shadow(0 0 14px #b3382f)}
#craft .forge-smoke{position:absolute;left:50%;top:26%;width:140px;height:140px;margin-left:-70px;border-radius:50%;background:radial-gradient(#8a8a8a88,transparent 68%);filter:blur(12px);animation:forge-steam 2.2s ease-out infinite;pointer-events:none}

/* Facture d'une pièce dans la sacoche. */
.satchel-item .item-grade{position:absolute;left:6px;top:6px;padding:1px 6px;border:1px solid var(--grade,#e3d6b4);border-radius:8px;background:#0d1612cc;color:var(--grade,#e3d6b4);font:700 8.5px var(--material-sans,system-ui);font-style:normal;letter-spacing:.05em;text-transform:uppercase;z-index:2}
.satchel-item[data-grade="0"]{--grade:#a99d86}.satchel-item[data-grade="2"]{--grade:#86cf92}.satchel-item[data-grade="3"]{--grade:#74b6ec}.satchel-item[data-grade="4"]{--grade:#f2b653}
.satchel-item[data-grade="3"],.satchel-item[data-grade="4"]{box-shadow:inset 0 0 14px color-mix(in srgb,var(--grade) 25%,transparent)}