/* Vantage RP — Inventaire V2. Règles : DESIGN.md. Aucune image de décor : surfaces, texte, icônes d'objets. */

/* ── Mise en page : colonne d'état + contenu ── */
.inv { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem var(--gutter) calc(6rem + env(safe-area-inset-bottom, 0px)); }
.inv-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.inv-side { position: sticky; top: calc(2.75rem + env(safe-area-inset-top, 0px) + 1.25rem); display: grid; gap: .75rem; }
.inv-side .h1 { font-size: 2.25rem; margin-bottom: .5rem; }
/* Barre latérale du panel visible (≥ 1200 px) : plus de barre du haut, la colonne colle plus haut */
@media (min-width: 1200px) { body.has-pnav .inv-side { top: 1.5rem; } }
.side-card { background: var(--tile); border-radius: var(--r-card); padding: 1rem 1.125rem; display: grid; gap: .625rem; }
.kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .9375rem; color: var(--text-2); }
.kv-row b { color: var(--text); font-weight: 500; font-size: .875rem; }
.kv-row.sub { font-size: .8125rem; color: var(--muted); }
.kv-row.sub .mono { color: var(--green); }
.meter { height: .5rem; border-radius: var(--pill); background: var(--tile-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width 500ms var(--ease-out), background-color 300ms ease; }
.meter.sm { height: .375rem; }
.meter i.warn { background: var(--amber); } .meter i.err { background: var(--red); }
.vitals { gap: .75rem; }
.vital { display: grid; grid-template-columns: 4rem 1fr 2.75rem; align-items: center; gap: .625rem; font-size: .875rem; color: var(--text-2); border-radius: .5rem; }
.vital b { font-weight: 500; font-size: .8125rem; color: var(--muted); text-align: right; }
/* Utilisation refusée (déjà rassasié…) : la jauge concernée clignote une fois */
.vital.alert { animation: vital-alert 900ms var(--ease-out); }
@keyframes vital-alert { 0%, 100% { background: transparent; } 30% { background: rgba(245,165,36,.18); } }
.equip { grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .75rem; }
.eq-ico { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--tile-2); display: grid; place-items: center; color: var(--muted); }
.eq-ico img { width: 70%; height: 70%; object-fit: contain; }
.eq-ico .glyph { width: 55%; height: 55%; }
.equip.on .eq-ico { color: var(--text-2); }
.eq-txt { display: flex; flex-direction: column; min-width: 0; }
.eq-txt b { font-size: .9375rem; font-weight: 600; }
.eq-txt span { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Fouille en cours ── */
.remote-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem; margin-bottom: 1.25rem; border-radius: var(--r-card); background: rgba(48,209,88,.10); box-shadow: inset 0 0 0 1px rgba(48,209,88,.25); font-size: .9375rem; }
.remote-bar .rb-txt { flex: 1; min-width: 0; }
.remote-bar b { font-weight: 600; }

/* ── Barre d'outils et onglets ── */
.inv-main { min-width: 0; }
.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.inv-toolbar .search { flex: 1 1 14rem; max-width: 18rem; }
.inv-toolbar .input { min-height: 2.5rem; padding: .5rem 1rem; border-radius: var(--pill); }
.seg.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.seg.tabs::-webkit-scrollbar { display: none; }
.seg.tabs button { white-space: nowrap; flex: none; }
.tb-ico { display: none; }
.seg .count { color: var(--muted); font-family: var(--mono); font-size: .75rem; margin-left: .3125rem; }
.seg .count.alert:not(:empty) { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: var(--pill); background: var(--red); color: #fff; font-weight: 600; }
.sm-seg { margin-bottom: 1.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sm-seg::-webkit-scrollbar { display: none; }
.sm-seg button { white-space: nowrap; flex: none; }

/* ── Grilles d'emplacements ── */
.grid-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 .75rem; min-height: 2rem; }
.grid-head:first-child { margin-top: 0; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .625rem; }
.slots.compact { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); }
.slot { position: relative; min-width: 0; aspect-ratio: 1; border-radius: .875rem; background: var(--tile); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem .375rem .375rem; text-align: center; transition: transform 160ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.slot.empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
button.slot { cursor: pointer; width: 100%; }
button.slot:active { transform: scale(.96); }
.slot img { width: 52%; height: 52%; object-fit: contain; pointer-events: none; }
.slot .glyph { width: 44%; height: 44%; color: var(--text-2); }
.slot .nm { margin-top: .375rem; width: 100%; font-size: .6875rem; line-height: 1.25; color: var(--text-2); letter-spacing: -.003em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot .qt { position: absolute; top: .375rem; right: .4375rem; font: 500 .6875rem/1 var(--mono); color: var(--muted); }
.slot.sel { box-shadow: inset 0 0 0 1.5px var(--violet); }
.slot.dragging { opacity: .35; }
.slot.over { box-shadow: inset 0 0 0 1.5px var(--violet-hi); background: rgba(139,92,246,.10); }
@media (hover: hover) and (pointer: fine) {
  button.slot:hover { background: #17161B; }
  .slot.empty.over { background: rgba(139,92,246,.10); }
}
.free { margin-top: .75rem; font-size: .8125rem; color: var(--muted); }
.pad { padding: 0 1.375rem; }

.row .end.btns { gap: .375rem; }

/* ── Coffres ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.split > * { min-width: 0; }

/* ── Craft ── */
.craft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .625rem; }
.craft-card { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: var(--r-card); background: var(--tile); text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.craft-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .craft-card:hover { background: #17161B; } }
.craft-card.ready { box-shadow: inset 0 0 0 1px rgba(48,209,88,.3); }
.c-ico { width: 3rem; height: 3rem; border-radius: .875rem; background: var(--tile-2); display: grid; place-items: center; }
.c-ico img { width: 72%; height: 72%; object-fit: contain; }
.c-ico .glyph { width: 50%; height: 50%; color: var(--text-2); }
.c-txt { display: flex; flex-direction: column; min-width: 0; }
.c-txt .t { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-txt .s { font-size: .8125rem; color: var(--muted); }
/* Minuteur circulaire */
.craft-run, .craft-done { padding-top: .5rem; }
.ring { --p: 0; width: 11rem; height: 11rem; margin: .5rem auto 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--violet) calc(var(--p) * 1%), var(--tile-2) 0); }
.ring-in { width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; background: #161519; display: grid; place-content: center; text-align: center; gap: .25rem; padding: 1rem; }
.ring .timer { font-size: 2.25rem; font-weight: 500; letter-spacing: -.03em; }
.d-ico.big { width: 6rem; height: 6rem; margin: .5rem auto 1rem; border-radius: 1.5rem; }
.center { text-align: center; }

/* ── Marché ── */
.m-icons { display: flex; gap: .25rem; }
.m-icons img, .m-icons .glyph { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: .375rem; background: var(--tile-2); padding: .125rem; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .625rem; }
.m-card { background: var(--tile); border-radius: var(--r-card); padding: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.m-ico { width: 3.5rem; height: 3.5rem; border-radius: .875rem; background: var(--tile-2); display: grid; place-items: center; margin-bottom: .5rem; }
.m-ico img { width: 72%; height: 72%; object-fit: contain; }
.m-ico .glyph { width: 50%; height: 50%; color: var(--text-2); }
.m-t { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.m-price { font-size: 1.125rem; font-weight: 500; margin: .375rem 0 .625rem; }
.m-card .btn { margin-top: auto; }

/* ── Fouille ── */
.search-box { background: var(--tile); border-radius: var(--r-card); padding: 1.25rem; display: grid; gap: .625rem; }
.search-box .group:not(:empty) { background: var(--tile-2); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip-x { display: inline-flex; align-items: center; gap: .25rem; height: 2rem; padding: 0 .25rem 0 .75rem; border-radius: var(--pill); background: var(--tile-2); font-size: .875rem; }
.chip-x button { width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--muted); }
.cni-card { display: block; width: 100%; height: auto; border-radius: 1rem; margin-top: 1rem; }
.pick:not(:empty) { margin-top: .5rem; }

.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem auto; gap: .5rem; align-items: center; }
.stepper .btn[data-by] { padding: 0; font-size: 1.25rem; }
.stepper [data-all] { padding: 0 1rem; }
.stepper .input { text-align: center; font-size: 1.25rem; min-height: 2.75rem; }
.stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Tablette ── */
@media (max-width: 1024px) {
  .inv-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .inv-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .inv-side .h1 { grid-column: 1 / -1; margin-bottom: 0; }
}
/* ── Mobile ── */
@media (max-width: 734px) {
  .inv { padding-top: 1rem; }
  .inv-side { grid-template-columns: minmax(0, 1fr); }
  .inv-side .h1 { font-size: 2rem; }
  .inv-toolbar .search { max-width: none; flex-basis: 100%; }
  /* Onglets → barre d'onglets fixée en bas (façon app iPhone) */
  .seg.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: none; overflow: visible; padding: .3125rem .25rem calc(.3125rem + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: rgba(18,18,20,.88); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  .seg.tabs button { position: relative; flex-direction: column; justify-content: center; gap: .1875rem; min-height: 3rem; padding: 0; font-size: .6875rem; font-weight: 500; border-radius: .75rem; background: transparent !important; box-shadow: none !important; color: var(--muted); }
  .seg.tabs button[aria-selected="true"] { color: var(--violet-hi); }
  .seg.tabs .tb-ico { display: block; width: 1.5rem; height: 1.5rem; }
  .seg.tabs .count { position: absolute; top: .125rem; left: calc(50% + .375rem); margin: 0; }
  .seg.tabs .count:not(.alert) { display: none; }
  .inv { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .inv-toolbar { margin-bottom: 1rem; }
  /* Sur téléphone, l'état du perso n'apparaît que dans l'onglet Inventaire */
  .inv:not([data-tab="me"]) .inv-side .side-card { display: none; }
  .slots { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .slots.compact { grid-template-columns: repeat(4, 1fr); }
  .slot .nm { font-size: .625rem; }
  /* Sur téléphone pas de glisser-déposer : les cases vides ne servent à rien, on les masque */
  .slots .slot.empty { display: none; }
  .split { grid-template-columns: 1fr; gap: 1rem; }
  .craft-list { grid-template-columns: 1fr; }
  .m-grid { grid-template-columns: repeat(2, 1fr); }
  .row .end.btns { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .meter i, .toast { transition: opacity 160ms ease; }
  .vital.alert { animation: none; outline: 1px solid var(--amber); }
}
@media (prefers-reduced-transparency: reduce) {
  .seg.tabs { background: #121214 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Habillage « jeu vidéo » (demande utilisateur, inventaire uniquement)
   Couleur par type d'objet, cases façon HUD, jauges circulaires, panneaux à coins.
   ══════════════════════════════════════════════════════════════════ */
[data-cat] { --c: #8E8E93; }
[data-cat="arme"] { --c: #FF5A4F; }
[data-cat="drogue"] { --c: #2FD3A6; }
[data-cat="conso"] { --c: #F5A524; }
[data-cat="papiers"] { --c: #A78BFA; }
[data-cat="argent"] { --c: #30D158; }
[data-cat="cle"] { --c: #5AC8FA; }
[data-cat="outil"] { --c: #FF9F0A; }
[data-cat="tech"] { --c: #64D2FF; }
[data-cat="tenue"] { --c: #FF6FB5; }
[data-cat="vehicule"] { --c: #BF5AF2; }

/* Fond : halo violet + grille discrète (CSS seulement, aucune image) */
body.app { background: radial-gradient(120% 55% at 50% -12%, rgba(139,92,246,.18), transparent 62%), radial-gradient(70% 45% at 100% 105%, rgba(236,72,153,.07), transparent 60%), #050508; }
body.app::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 2rem 2rem; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 15%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 15%, #000 25%, transparent 80%); }
.inv, .ga-list { position: relative; z-index: 1; }

/* Panneaux HUD : verre sombre, liseré lumineux en haut, coins marqués */
.side-card, .search-box, .group, .craft-card, .m-card, .remote-bar { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(15,14,19,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.055), 0 1.25rem 2.5rem -1.5rem rgba(0,0,0,.85); }
.side-card { position: relative; }
.side-card::before, .side-card::after { content: ''; position: absolute; width: .625rem; height: .625rem; pointer-events: none; border-color: rgba(167,139,250,.6); border-style: solid; }
.side-card::before { top: .375rem; left: .375rem; border-width: 1.5px 0 0 1.5px; border-top-left-radius: .25rem; }
.side-card::after { bottom: .375rem; right: .375rem; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: .25rem; }
.inv-side .h1 { text-shadow: 0 0 2rem rgba(139,92,246,.35); }

/* Titres de section façon HUD */
.grid-head .h4, .group-title { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text-2); display: inline-flex; align-items: center; gap: .5rem; }
.grid-head .h4::before { content: ''; width: .25rem; height: .875rem; border-radius: 2px; background: linear-gradient(var(--violet-hi), var(--pink)); box-shadow: 0 0 .625rem rgba(167,139,250,.6); }

/* Jauge de poids segmentée */
.meter.segs { height: .625rem; border-radius: 3px; background: rgba(255,255,255,.07); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.meter.segs i { border-radius: 0; box-shadow: 0 0 .75rem rgba(48,209,88,.55); }
.meter.segs i.warn { box-shadow: 0 0 .75rem rgba(245,165,36,.55); }
.meter.segs i.err { box-shadow: 0 0 .75rem rgba(255,69,58,.6); }

/* Jauges circulaires faim / soif / humeur */
.vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 1rem .75rem; }
.vital { display: flex; flex-direction: column; align-items: center; gap: .3125rem; text-align: center; border-radius: .75rem; padding: .25rem 0; }
.rg { position: relative; width: 3.5rem; height: 3.5rem; }
.rg > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.rg .tr { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.rg .fl { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 1px) 100px; transition: stroke-dasharray 700ms var(--ease-out), stroke 300ms ease; }
.vital[data-tone="warn"] .fl { stroke: var(--amber); }
.vital[data-tone="err"] .fl { stroke: var(--red); }
.vital[data-tone="ok"] .rg { filter: drop-shadow(0 0 .375rem rgba(48,209,88,.35)); }
.vital[data-tone="warn"] .rg { filter: drop-shadow(0 0 .375rem rgba(245,165,36,.4)); }
.vital[data-tone="err"] .rg { filter: drop-shadow(0 0 .5rem rgba(255,69,58,.5)); }
.rg-ico { position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; color: var(--text-2); }
.vital b { font-size: .875rem; font-weight: 500; color: var(--text); min-width: 0; text-align: center; }
.vital span { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Cases façon inventaire de jeu */
button.slot { background: radial-gradient(120% 85% at 50% -5%, color-mix(in srgb, var(--c) 18%, transparent), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), #121117; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
button.slot::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--c); box-shadow: 0 0 .625rem var(--c); opacity: .9; }
.slot .art { width: 56%; height: 52%; display: grid; place-items: center; filter: drop-shadow(0 .375rem .5rem rgba(0,0,0,.65)); transition: transform 200ms var(--ease-out); }
.slot .art img { width: 100%; height: 100%; object-fit: contain; }
.slot .art .glyph { width: 78%; height: 78%; color: var(--c); }
.slot .sn { position: absolute; top: .3125rem; left: .4375rem; font: 500 .5625rem/1 var(--mono); color: rgba(255,255,255,.26); }
.slot .qt { top: .3125rem; right: .3125rem; padding: .1875rem .3125rem; border-radius: var(--pill); background: rgba(0,0,0,.55); color: var(--text); font: 600 .625rem/1 var(--mono); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.slot .qt::before { content: '×'; opacity: .55; margin-right: 1px; }
.slot.empty { background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 .375rem, transparent .375rem .75rem); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.slot.sel { box-shadow: inset 0 0 0 1.5px var(--violet-hi), 0 0 0 3px rgba(139,92,246,.22), 0 0 1.5rem -.25rem rgba(139,92,246,.6); }
.slot.over { box-shadow: inset 0 0 0 1.5px var(--violet-hi), 0 0 1.25rem -.25rem rgba(167,139,250,.7); }
@media (hover: hover) and (pointer: fine) {
  button.slot:hover { transform: translateY(-2px); background-color: #16151c; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 .75rem 1.5rem -1rem var(--c); }
  button.slot:hover .art { transform: scale(1.06); }
}

/* Fiche objet : type affiché + icône en vitrine */
.d-ico { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c, #8E8E93) 32%, transparent), transparent 70%), #141318; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8E8E93) 40%, transparent), 0 0 2rem -.75rem var(--c, transparent); }
.cat-chip { display: inline-block; margin-bottom: .375rem; padding: .25rem .5rem; border-radius: var(--pill); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.dlg-in { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%), #131217; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.06), 0 2rem 4rem rgba(0,0,0,.7); }

/* Onglets avec icône aussi sur ordinateur */
@media (min-width: 735px) {
  .seg.tabs .tb-ico { display: inline-block; width: 1rem; height: 1rem; margin-right: .375rem; vertical-align: -3px; opacity: .75; }
  .seg.tabs button[aria-selected="true"] .tb-ico { opacity: 1; color: var(--violet-hi); }
}

/* Filtre par type (pastilles colorées) */
.cat-bar { display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 1.25rem; padding: 2px; }
.cat-bar::-webkit-scrollbar { display: none; }
@media (min-width: 735px) { .cat-bar { flex-wrap: wrap; overflow: visible; } }
.cat-bar button { flex: none; display: inline-flex; align-items: center; gap: .4375rem; height: 2rem; padding: 0 .75rem; border-radius: var(--pill); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); font-size: .8125rem; font-weight: 500; color: var(--text-2); transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out); }
.cat-bar button:not([data-cat]) { --c: var(--violet-hi); }
.cat-bar button i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 .5rem var(--c); }
.cat-bar button b { font: 500 .6875rem/1 var(--mono); color: var(--muted); }
.cat-bar button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); color: var(--text); }
.cat-bar button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .cat-bar button:hover { background: rgba(255,255,255,.07); } }

/* Craft : tuiles façon atelier de jeu */
.craft-list { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; }
.craft-card { position: relative; overflow: hidden; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; text-align: center; gap: .75rem; padding: 1.25rem .875rem 1.125rem; }
.craft-card::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--c); box-shadow: 0 0 .75rem var(--c); opacity: .85; }
.craft-card .c-ico { width: 5rem; height: 5rem; border-radius: 1.125rem; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%), #141318; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.craft-card .c-ico img { filter: drop-shadow(0 .375rem .5rem rgba(0,0,0,.6)); }
.craft-card .c-ico .glyph { color: var(--c); }
.craft-card .c-txt { align-items: center; gap: .1875rem; width: 100%; }
.c-txt .k { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.craft-card .c-txt .t { font-size: .9375rem; }
.craft-card .c-txt .s { display: inline-flex; align-items: center; gap: .25rem; margin-top: .125rem; font: 500 .75rem/1 var(--mono); color: var(--muted); }
.c-clock { width: .875rem; height: .875rem; }
.craft-card > .badge { height: 1.375rem; font-size: .6875rem; }
.craft-card.locked .c-ico img, .craft-card.locked .c-ico .glyph { filter: grayscale(.7) brightness(.65); }
.craft-card.ready { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(48,209,88,.4), 0 0 1.75rem -.75rem rgba(48,209,88,.45); }
/* Pas prête (il manque des éléments ou le rôle) : aucune couleur, pour ne pas laisser croire qu'on peut fabriquer (2026-10-19) */
.craft-card:not(.ready)::after { background: rgba(255,255,255,.14); box-shadow: none; }
.craft-card:not(.ready) .c-ico { background: #141318; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.craft-card:not(.ready) .c-ico .glyph { color: var(--muted); }
.craft-card:not(.ready) .c-txt .k { color: var(--muted); }
.craft-card.ready::after { background: var(--green, #30D158); box-shadow: 0 0 .75rem var(--green, #30D158); }
/* Atelier d'assemblage (panel testeur) */
.atelier { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #0b0a10; padding-top: env(safe-area-inset-top, 0px); }
.atelier-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.atelier-t { font-weight: 600; }
.atelier-frame { flex: 1; width: 100%; border: 0; background: #0b0a10; }
html.atelier-open, html.atelier-open body { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .craft-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 1rem 2rem -1.25rem var(--c); }
}

/* Téléphone : en-tête plus compact pour voir la grille plus vite */
@media (max-width: 734px) {
  .inv-side { gap: .5rem; }
  .inv-side .side-card { padding: .875rem 1rem; gap: .5rem; }
  .vitals { padding: .75rem .5rem; }
  .rg { width: 3rem; height: 3rem; }
  .rg-ico { width: 1.0625rem; height: 1.0625rem; }
  .vital { gap: .1875rem; padding: 0; }
  .craft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .craft-card { padding: 1rem .625rem .875rem; gap: .625rem; }
  .craft-card .c-ico { width: 4rem; height: 4rem; border-radius: 1rem; }
  .cat-bar { margin: 0 -1rem 1rem; padding: 2px 1rem; }
}

/* Notification façon jeu */
.toast { border-radius: .875rem; box-shadow: inset 3px 0 0 var(--violet-hi), inset 0 1px 0 rgba(255,255,255,.08), 0 .75rem 2rem rgba(0,0,0,.55); }
.toast.err { box-shadow: inset 3px 0 0 var(--red), inset 0 1px 0 rgba(255,255,255,.08), 0 .75rem 2rem rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
  .rg .fl { transition: none; }
  button.slot:hover, button.slot:hover .art { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body.app::before { display: none; }
}