/* ============================================================
   css/loot.css — Botín de verdad: aviso al levantar un objeto del piso (ground-loot.js), afijos en la
   ficha del objeto y la Mística (affixes.js).
   ============================================================ */
/* Aviso corto al levantar: abajo al centro, entre el joystick y los botones (no tapa la pelea ni los
   carteles de arriba). Se apilan hasta 3. */
#loot-toasts{ position:fixed; left:50%; bottom:calc(25% + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; width:max-content; max-width:min(92vw, 380px); }
.loot-toast{ display:flex; align-items:center; gap:7px; padding:3px 10px 3px 4px; background:rgba(10,7,5,0.86);
  border:2px solid var(--tc, #888); box-shadow:0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--tc, #888) 45%, transparent);
  font-family:var(--font-retro); animation:ltIn .18s ease-out; transition:opacity .45s, transform .45s; max-width:100%; }
.loot-toast.out{ opacity:0; transform:translateY(-8px); }
.loot-toast .lt-ico{ width:22px; height:22px; border-radius:3px; }
.loot-toast .lt-txt{ display:flex; align-items:baseline; gap:8px; line-height:1; min-width:0; }
.loot-toast .lt-name{ font-size:1.15rem; text-shadow:1px 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loot-toast .lt-tier{ font-size:0.85rem; color:#b9a88a; letter-spacing:1px; text-transform:uppercase; }
.loot-toast.lt-warn{ --tc:#ff8a6a; color:#ffb49a; font-size:1.05rem; padding:4px 10px; }
/* en la pila de avisos de arriba a la derecha (#toast-stack, ground-loot.js): ancho de la pila, más compactos */
#toast-stack #loot-toasts{ position:static; transform:none; left:auto; bottom:auto; width:auto; max-width:none; align-items:stretch; gap:3px; }
#toast-stack .loot-toast{ padding:2px 8px 2px 3px; gap:6px; }
#toast-stack .loot-toast .lt-ico{ width:20px; height:20px; flex:none; }
#toast-stack .loot-toast .lt-txt{ gap:5px; }
#toast-stack .loot-toast .lt-name{ font-size:1.02rem; max-width:100%; }
#toast-stack .loot-toast .lt-tier{ font-size:0.75rem; }
#toast-stack .loot-toast.lt-warn{ font-size:0.95rem; }
@keyframes ltIn{ from{ opacity:0; transform:translateY(8px) scale(0.96); } to{ opacity:1; transform:none; } }

/* Afijos en la ficha del objeto */
.ip-line.item-affix{ color:#d8e6ff; }
.inv-card .item-passives .item-affix{ color:#d8e6ff; }
.afx-range{ color:var(--text-dim, #9a8a70); font-size:max(0.9em, 11px); }
.afx-cmp{ font-weight:700; }
.afx-cmp.up, .afx-cmp.new{ color:#7dff9a; }
.afx-cmp.down, .afx-lost .afx-cmp{ color:#ff7a6a; }
.afx-cmp.eq{ color:var(--text-dim, #9a8a70); }
.ip-line.afx-lost{ color:#ff9a8a; opacity:0.85; }
.afx-reroll-btn{ margin-left:4px; padding:1px 6px; border-radius:5px; border:1px solid #c9a24a; background:rgba(201,162,74,0.12); color:#ffd98a;
  font-family:inherit; font-size:0.8rem; font-weight:normal; cursor:pointer; vertical-align:middle; min-height:22px; }

/* Mística: elegir entre el afijo original y las opciones nuevas */
#affix-reroll{ position:fixed; inset:0; z-index:125; display:flex; align-items:center; justify-content:center; padding:12px; }
#affix-reroll.hidden{ display:none; }
#affix-reroll .ip-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.75); }
#affix-reroll .afx-panel{ position:relative; width:100%; max-width:400px; max-height:92vh; overflow-y:auto; box-sizing:border-box; padding:12px 14px;
  background:linear-gradient(160deg, var(--panel, #2a1a10), #0f0805); border:2px solid #c9a24a; border-radius:8px; }
.afx-title{ font-family:var(--font-pixel); font-size:0.8rem; color:#ffd98a; letter-spacing:2px; text-shadow:2px 2px 0 #000; }
.afx-sub{ font-family:var(--font-retro); font-size:1rem; color:var(--text-dim, #b9a88a); margin:4px 0; }
.afx-opts{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.afx-opt{ display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px; border-radius:6px; border:2px solid #6a5030; background:rgba(0,0,0,0.35);
  color:#e8e0d0; font-family:var(--font-retro); font-size:1.1rem; text-align:left; cursor:pointer; }
.afx-opt.keep{ border-color:#5a5a6a; }
.afx-opt:not(.keep){ border-color:#c9a24a; }
.afx-opt-k{ flex:none; font-size:0.85rem; color:#ffd98a; min-width:72px; text-transform:uppercase; letter-spacing:1px; }
.afx-opt.keep .afx-opt-k{ color:#b0b0c0; }