/* ============================================================
   MANAGE SCREEN — unified inventory + loot (drop-in)
   Milan's Idea Game · no build step, no framework, file:// safe
   Append to css/style.css, or link as css/manage.css
   ============================================================ */

:root{
  --cell:60px;  --gap:4px;          /* backpack cell */
  --ccell:56px;                     /* container cell */
  --line:#262a1e;                   /* hairline */
  --dim:#39412f;                    /* empty slot border */
  --mute:#8f9880;                   /* muted text */
  --txt2:#c9ccbe;
  --g0:#6a7156; --g1:#8fb84a; --g2:#f2812f; --g3:#e23b3b;   /* grades STD/T1/T2/T3 */
}

/* ---------- shell ----------
   SUPERFÍCIE OPACA. A regra da entrega final de UI é "opaque major surface, no glass
   cards": a mochila é uma TELA, não um vidro por cima do jogo. As quatro superfícies
   grandes (o fundo, a placa, a célula vazia da grade e a peça na mão) eram
   translúcidas, e o mundo lendo atrás delas é o que fazia a leitura da grade depender
   do que o jogador estava olhando. As cores são AS MESMAS, só que compostas: o tom não
   mudou, o vidro sumiu.
   O que continua translúcido é TINTA DE ESTADO (aro de seleção, hover de botão, ghost
   de encaixe), que é o contrário de superfície — ela precisa deixar ver o que está
   embaixo pra dizer o que vai acontecer ali. */
#manage{ position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center;
  background:#080906; font-family:'Courier New',monospace; color:var(--paper); padding:16px; }
#manage.open{ display:flex; }
#manage *{ box-sizing:border-box; }
.mgpanel{ width:100%; max-width:1180px; background:#12140e; border:2px solid var(--edge);
  display:flex; flex-direction:column; max-height:100%; }

/* ---------- head ---------- */
.mghead{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:2px solid var(--edge); padding:9px 12px; }
.mghead .ttl{ font-size:14px; font-weight:bold; letter-spacing:.18em; }
.mghead .ctx{ font-size:10px; letter-spacing:.1em; color:var(--mute); }
.mghints{ display:flex; gap:9px; }
.mghints b{ font-size:9px; font-weight:normal; letter-spacing:.06em; border:1px solid #5a6147;
  padding:2px 4px; color:var(--txt2); }
.mghints i{ font-size:9px; font-style:normal; letter-spacing:.08em; color:var(--g0); margin-left:4px; }
.mgmsg{ font-size:10px; letter-spacing:.12em; padding:5px 9px; border:2px solid var(--st); color:var(--st);
  animation:mgin .12s ease-out; }
.mgmsg.ok{ border-color:var(--g1); color:var(--g1); }
.mgmsg.bad{ border-color:var(--hp); color:var(--hp); }
@keyframes mgin{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* ---------- three columns ---------- */
.mgbody{ display:flex; align-items:stretch; min-height:0; }
.mgcol{ padding:11px 12px; display:flex; flex-direction:column; gap:9px; }
/* A COLUNA DE EQUIPAMENTO ROLA. Em 1280x720 o conteúdo dela mede 581 px numa caixa de
   482 px, e sem isto ele vaza POR CIMA do painel de detalhe embaixo (medido em
   scratchpad/_mochila-medida.js). `min-height:0` é o que deixa a coluna encolher dentro
   do flex; sem ele, `overflow` não tem o que rolar. */
.mgcol.gear{ width:236px; flex:none; border-right:2px solid #343a29;
  min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.mgcol.bag{ flex:1; min-width:0; align-items:center; }
.mgcol.crate{ width:324px; flex:none; border-left:2px solid #343a29; align-items:center; }
.mglab{ font-size:10px; letter-spacing:.16em; color:var(--mute); }
.mgrow{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* ---------- loadout ---------- */
.eqmain{ border:2px solid var(--dim); background:#0e100b; padding:6px 8px; display:flex; align-items:center;
  gap:9px; cursor:pointer; min-height:56px; }
.eqmain.on, .eqslot.on{ border-color:var(--accent); }
.eqmain.sel, .eqslot.sel{ border-color:var(--st); }
.eqmain.hot, .eqslot.hot{ border-color:var(--g1); }
.eqmain.active, .eqslot.active{ box-shadow:inset 0 0 0 2px var(--st); }   /* weapon in hand */
.eqslot.hotassign{ border-style:dashed; }
.eqslot.hotassign.on{ border-style:solid; border-color:var(--st); }
.eqmain .ic{ width:38px; height:38px; flex:none; border:1px solid #343a29; display:flex; align-items:center;
  justify-content:center; font-size:19px;
  background:repeating-linear-gradient(45deg,#141710 0 4px,#191d13 4px 8px); }
.eqmain .lab, .eqslot .lab{ font-size:9px; letter-spacing:.14em; color:var(--accent); }
.eqmain .nm{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eqmain .sub{ font-size:9px; color:var(--mute); }
.eqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.eqslot{ border:2px solid var(--dim); background:#0e100b; padding:5px; display:flex; flex-direction:column;
  align-items:center; gap:3px; cursor:pointer; }
.eqslot .ic{ width:100%; height:34px; border:1px solid #343a29; display:flex; align-items:center;
  justify-content:center; font-size:18px;
  background:repeating-linear-gradient(45deg,#141710 0 4px,#191d13 4px 8px); }
.eqslot .nm{ font-size:8px; color:var(--txt2); text-align:center; line-height:1.15; height:19px; overflow:hidden; }

/* ---------- vitals ---------- */
.mgvitals{ border-top:2px solid #343a29; padding-top:9px; display:flex; flex-direction:column; gap:7px; }
.mgbar{ height:7px; background:#0e100b; border:1px solid #343a29; }
.mgbar > i{ display:block; height:100%; }
.mgbar.hp > i{ background:var(--hp); }
.mgbar.rad > i{ background:var(--rad); }
.mgkv{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:.12em; color:var(--mute); }
.mgcells{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mgcells > div, .mgvalue{ border:1px solid #343a29; padding:5px 6px; }
.mgcells k, .mgvalue k{ display:block; font-size:8px; letter-spacing:.1em; color:var(--g0); }
.mgcells v{ font-size:13px; }
.mgvalue{ display:flex; justify-content:space-between; align-items:baseline; }
.mgvalue v{ font-size:13px; color:var(--st); }

/* ---------- grids ---------- */
.mggrid{ position:relative; display:grid; gap:var(--gap); touch-action:none; }
.mggrid.bag{ grid-template-columns:repeat(6,var(--cell)); grid-auto-rows:var(--cell); }
.mggrid.crate{ grid-template-columns:repeat(5,var(--ccell)); grid-auto-rows:var(--ccell); }
.mggrid .cell{ border:1px solid var(--line); background:#0c0e09; }
.mgfill{ width:100%; height:5px; background:#0e100b; border:1px solid #343a29; }
.mgfill > i{ display:block; height:100%; background:var(--g1); }
.mgfill.warn > i{ background:var(--st); }
.mgfill.full > i{ background:var(--hp); }
.mghint{ font-size:9px; letter-spacing:.1em; color:#5a6147; text-align:center; }

/* ---------- item tile ---------- */
.tile{ position:absolute; border:2px solid var(--g0); background:#0e100b; display:flex; align-items:center;
  justify-content:center; overflow:hidden; cursor:grab; touch-action:none; }
.tile.g1{ border-color:var(--g1); }
.tile.g2{ border-color:var(--g2); }
.tile.g3{ border-color:var(--g3); }
.tile.sel{ border-color:var(--st); box-shadow:inset 0 0 0 1px rgba(242,192,51,.5); }
.tile.lift{ opacity:.3; }
.tile .ic{ font-size:22px; line-height:1; margin-bottom:8px; }
.tile .sw{ position:absolute; left:0; top:0; bottom:0; width:3px; }
.tile .pips{ position:absolute; left:5px; top:1px; font-size:7px; letter-spacing:.5px; }
.tile.g1 .pips{ color:var(--g1); }
.tile.g2 .pips{ color:var(--g2); }
.tile.g3 .pips{ color:var(--g3); }
.tile .qty{ position:absolute; right:3px; bottom:12px; font-size:11px; font-weight:bold; color:var(--st);
  text-shadow:1px 1px 0 #000; }
/* CARGA do pente / da arma (docs/pente.md). Fica no canto ESQUERDO de baixo pra não
   brigar com a quantidade da pilha, que mora à direita. Vermelho = vazio (é o aviso
   que interessa antes de sair andando), verde = cheio. */
.tile .carga{ position:absolute; left:3px; bottom:12px; font-size:10px; font-weight:bold;
  color:var(--st); text-shadow:1px 1px 0 #000; letter-spacing:-.02em; }
.tile .carga.vazio{ color:var(--hp); }
.tile .carga.cheio{ color:#8fd35a; }

/* etiqueta de PREÇO na peça, quando o balcão é uma loja (src/manage.js precoHTML):
   verde = o feirante paga isso pela peça · âmbar = é o que ela custa · — = fora da tabela */
.tile .preco{ position:absolute; left:3px; top:2px; font-size:10px; font-weight:bold;
  padding:0 3px; border-radius:2px; letter-spacing:.02em; text-shadow:1px 1px 0 #000; }
.tile .preco.paga{ color:#0d1a0d; background:#8fd35a; }
.tile .preco.custa{ color:#1a1204; background:#f2c033; }
.tile .preco.fora{ color:var(--mute); background:rgba(0,0,0,.55); }
/* peça DO JOGADOR na mesa do balcão (src/manage.js, `oferta`): fica claro que aquilo
   ainda é dele e ainda não virou dinheiro — só some quando ele aperta VENDER. */
.tile.oferta{ border-color:#8fd35a; border-style:dashed; }
.tile .nm{ position:absolute; left:0; right:0; bottom:0; height:11px; line-height:11px; background:#12140e;
  border-top:1px solid var(--line); font-size:8px; color:var(--txt2); text-align:center;
  white-space:nowrap; overflow:hidden; }
/* Sombra de onde a peça vai cair, durante o arrasto. O seletor É ESCOPADO na grade de
   propósito: `.ghost` solto colidia com o `.btn.ghost` do style.css (botão vazado das
   telas), e como manage.css carrega DEPOIS, todo botão vazado do jogo virava
   position:absolute. Passava despercebido porque a tela de título só tem um; com dois
   numa .btnrow eles empilham um em cima do outro. */
.mggrid .ghost{ position:absolute; border:2px dashed var(--g1); background:rgba(143,184,74,.16); pointer-events:none; }
.mggrid .ghost.no{ border-color:var(--hp); background:rgba(226,59,59,.16); }
.carry{ position:fixed; border:2px solid var(--st); background:#12140e; display:flex;
  align-items:center; justify-content:center; font-size:22px; pointer-events:none; z-index:60; }

/* ---------- detail band ---------- */
.mgdet{ border-top:2px solid var(--edge); padding:11px 12px; min-height:136px; display:flex;
  align-items:stretch; gap:14px; }
.mgdet .art{ width:96px; flex:none; display:flex; flex-direction:column; gap:5px; }
.mgdet .art > div:first-child{ width:96px; height:78px; border:2px solid var(--g0); display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#141710 0 5px,#191d13 5px 10px); }
.mgdet .art .big{ font-size:30px; line-height:1; }
.mgdet .art .spr{ font-size:7px; color:#5a6147; }
.mgdet .id{ width:212px; flex:none; display:flex; flex-direction:column; gap:5px;
  border-right:1px solid var(--line); padding-right:12px; }
.mgdet .id .nm{ font-size:14px; line-height:1.1; }
.mgdet .grade{ font-size:9px; letter-spacing:.1em; border:2px solid var(--g0); color:var(--g0); padding:2px 5px; }
.mgdet .grade.g1{ border-color:var(--g1); color:var(--g1); }
.mgdet .grade.g2{ border-color:var(--g2); color:var(--g2); }
.mgdet .grade.g3{ border-color:var(--g3); color:var(--g3); }
.mgdet .where{ font-size:9px; line-height:1.4; color:var(--mute); margin-top:auto; }
.mgdet .stats{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content;
  gap:3px 18px; align-content:start; }
.mgdet .stats .r{ display:flex; align-items:baseline; gap:7px; border-bottom:1px solid #1f2318;
  padding-bottom:2px; }
.mgdet .stats k{ font-size:9px; letter-spacing:.1em; color:var(--g0); width:74px; flex:none; }
.mgdet .stats v{ font-size:12px; }
.mgdet .stats d{ font-size:10px; margin-left:auto; color:var(--g0); }
.mgdet .stats d.up{ color:var(--g1); }
.mgdet .stats d.down{ color:var(--hp); }
.mgdet .cmp{ grid-column:1 / -1; font-size:9px; letter-spacing:.1em; color:var(--accent); margin-top:3px; }
.mgdet .acts{ width:168px; flex:none; display:flex; flex-direction:column; gap:6px;
  border-left:1px solid var(--line); padding-left:12px; overflow-y:auto; }
.mgempty{ display:flex; flex-direction:column; justify-content:center; gap:6px; }
.mgempty .t{ font-size:12px; letter-spacing:.12em; color:var(--mute); }
.mgempty .b{ font-size:10px; letter-spacing:.06em; color:#5a6147; line-height:1.6; max-width:70ch; }

/* ---------- buttons: outlined, never filled ---------- */
.mgbtn{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:.12em; padding:9px 8px;
  background:transparent; border:2px solid #5a6147; color:var(--txt2); cursor:pointer; text-align:left; }
.mgbtn.wide{ width:100%; text-align:center; }
.mgbtn.pri{ border-color:var(--st); color:var(--st); }
.mgbtn.alt{ border-color:var(--accent); color:var(--accent); }
.mgbtn.dgr{ border-color:var(--hp); color:var(--hp); }
.mgbtn:hover{ background:rgba(240,240,232,.07); }
.mgbtn:active{ background:rgba(242,192,51,.14); }
.mgbtn:focus-visible{ outline:2px solid var(--st); outline-offset:2px; }
/* botão de fechar a venda: verde de "ele paga", cinza quando a mesa está vazia.
   Precisa vir DEPOIS de .mgbtn.pri — mesma especificidade, e o pri pintaria o texto
   de âmbar em cima do verde (ilegível). */
.mgbtn.pri.vender{ background:#8fd35a; color:#0b1408; border-color:#8fd35a; font-weight:bold; }
.mgbtn.pri.vender:hover{ background:#a2e069; }
.mgbtn.pri.vender.off{ background:transparent; color:var(--mute); border-color:var(--mute); cursor:default; }
.mgbtn.pri.vender.off:hover{ background:transparent; }

/* ABAS DO BALCÃO — o que ele VENDE (a prateleira) x o que ele COMPRA (a sua mesa de
   oferta + a tabela de preços). Ficam DENTRO da coluna do contêiner, não na barra de
   abas de cima, pra caber igual no layout largo (3 colunas) e no estreito (1 painel). */
.mgsub{ display:flex; gap:6px; margin:0 0 8px; }
.mgsub button{ flex:1; font-family:'Courier New',monospace; font-size:10px; letter-spacing:.14em;
  padding:6px 4px; background:transparent; color:var(--mute); border:2px solid var(--mute);
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.mgsub button.on{ color:var(--st); border-color:var(--st); background:rgba(242,192,51,.1); }
.mgsub button span{ font-size:9px; opacity:.75; }

/* tabela "ELE COMPRA": preço de tudo que o feirante aceita, tenha o jogador ou não */
.mgtabela{ list-style:none; margin:4px 0 0; padding:0; max-height:150px; overflow-y:auto; }
.mgtabela li{ display:flex; align-items:center; gap:7px; padding:3px 5px; font-size:10px;
  border-bottom:1px solid rgba(240,240,232,.09); color:var(--mute); }
.mgtabela li.tem{ color:var(--paper); background:rgba(143,211,90,.08); }
.mgtabela i{ font-style:normal; font-size:13px; min-width:16px; text-align:center; }
.mgtabela b{ flex:1; font-weight:normal; letter-spacing:.04em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mgtabela u{ text-decoration:none; font-size:9px; color:#8fd35a; }
.mgtabela v{ font-weight:bold; color:#8fd35a; }
.mgbtn .k{ float:right; font-size:9px; opacity:.7; }
.mgclose{ width:46px; height:46px; font-size:16px; text-align:center; padding:0; }

/* ---------- world prompt: hold to search ---------- */
#lootprompt{ position:absolute; left:50%; bottom:46px; transform:translateX(-50%); width:352px;
  background:rgba(18,20,14,.94); border:2px solid var(--edge); padding:9px 11px; display:none;
  flex-direction:column; gap:8px; font-family:'Courier New',monospace; color:var(--paper); }
#lootprompt.on{ display:flex; }
#lootprompt.t0{ border-color:var(--t0); }
#lootprompt.t1{ border-color:var(--t1); }
#lootprompt.t2{ border-color:var(--t2); }
#lootprompt .nm{ font-size:12px; letter-spacing:.14em; }
#lootprompt .tier{ font-size:9px; letter-spacing:.1em; border:1px solid currentColor; padding:1px 5px; }
#lootprompt .tier.t0{ color:var(--t0); }
#lootprompt .tier.t1{ color:var(--t1); }
#lootprompt .tier.t2{ color:var(--t2); }
#lootprompt .state{ font-size:9px; letter-spacing:.1em; color:var(--mute); }
#lootprompt .foot{ display:flex; align-items:center; justify-content:space-between; font-size:11px;
  letter-spacing:.1em; }
#lootprompt.busy .foot .left{ color:var(--st); }
.holdsegs{ display:flex; gap:2px; }
.holdsegs > i{ flex:1; height:13px; background:#12140e; border:1px solid #343a29; }
.holdsegs > i.on{ background:var(--st); }
.crate-scan{ position:absolute; left:0; right:0; height:3px; background:rgba(242,192,51,.75);
  animation:cscan .55s linear infinite; }
@keyframes cscan{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(400%) } }

/* ============================================================
   TOUCH / NARROW — tabs instead of columns, sheet instead of band
   ============================================================ */
.mgtabs{ display:none; }

@media (max-width:920px), (pointer:coarse) and (max-width:1100px){
  :root{ --cell:58px; --gap:3px; --ccell:70px; }
  #manage{ padding:0; }
  .mgpanel{ max-width:none; width:100%; height:100%; border:none; }
  .mghints{ display:none; }
  .mgtabs{ display:flex; border-bottom:2px solid #343a29; }
  .mgtabs > button{ flex:1; height:48px; font-size:10px; letter-spacing:.1em; background:transparent;
    border:none; border-right:1px solid var(--line); color:var(--mute);
    font-family:'Courier New',monospace; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; cursor:pointer; }
  .mgtabs > button.on{ background:rgba(242,192,51,.14); color:var(--st); }
  .mgtabs > button span{ font-size:9px; opacity:.75; }
  .mgbody{ flex-direction:column; flex:1; overflow:auto; }
  .mgcol{ width:auto !important; border:none !important; align-items:stretch; }
  .mgcol[hidden]{ display:none; }
  .tile .ic{ font-size:26px; margin-bottom:10px; }
  .tile .nm{ height:13px; line-height:13px; }
  .mgdet{ flex-direction:column; gap:9px; min-height:0; }
  .mgdet .art, .mgdet .id, .mgdet .acts{ width:auto; border:none; padding:0; }
  .mgdet .art{ flex-direction:row; align-items:center; gap:11px; }
  .mgdet .art > div:first-child{ width:62px; height:56px; }
  .mgdet .stats k{ width:66px; }
  .mgdet .acts{ flex-direction:row; }
  .mgdet .acts .mgbtn{ height:50px; text-align:center; flex:1; }
  .mgdet .acts .mgbtn .k{ display:none; }
  .mghint{ display:none; }
}

/* ---------- BANCADA: a lista de receitas (docs/bancada.md) ----------
   Uma linha por receita, e a linha inteira diz a verdade mesmo quando não dá pra fazer:
   o que falta fica em vermelho COM o número, em vez de o botão só apagar. Botão apagado
   sem explicação é a forma mais rápida de o jogador achar que a tela está quebrada.
   Superfície OPACA como o resto da tela (contrato final de UI): a linha é uma faixa de
   papel sobre a placa, não um cartão de vidro. */
.mgfab{ display:flex; flex-direction:column; gap:5px; max-height:min(52vh,420px);
  overflow-y:auto; margin-bottom:8px; }
.fabrow{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"out btn" "in btn";
  gap:3px 10px; align-items:center; padding:7px 9px; background:#171a11;
  border:1px solid var(--line); border-left:3px solid var(--g1); }
.fabrow.off{ border-left-color:var(--dim); }
.fabrow.desm{ border-left-color:var(--g0); }
.fabout{ grid-area:out; display:flex; align-items:baseline; gap:7px; }
.fabout .ic{ font-size:14px; }
.fabout .nm{ font-size:11px; letter-spacing:.1em; color:var(--paper); }
.fabout .nm i{ font-style:normal; color:var(--st); }
.fabin{ grid-area:in; display:flex; flex-wrap:wrap; gap:4px 10px; }
.fabin .ing{ font-size:9px; letter-spacing:.06em; color:var(--mute); }
.fabin .ing b{ font-weight:normal; color:var(--txt2); }
.fabin .ing.falta{ color:var(--hp); }
.fabin .ing.falta b{ color:var(--hp); }
.fabrow .mgbtn{ grid-area:btn; min-width:112px; }
.fabrow .mgbtn.off{ border-color:var(--dim); color:var(--dim); cursor:not-allowed; }
.fabrow .mgbtn.off:hover{ background:transparent; }