/* Armory overlay, laid out like the original: full screen, three panels, pill tabs and a Done button. */
.lfg-overlay { position: fixed; inset: 0; z-index: 60; display: flex; padding: 12px; overflow: auto; background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)), #000 var(--wt-loading) center / cover no-repeat; color: #e8e0d0; font: 13px var(--fbody, Georgia, serif); }
.lfg-panel { margin: auto; width: 1240px; display: flex; flex-direction: column; gap: 10px; }
.lfg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lfg-title b { display: block; font: normal 34px/1 var(--ftitle, Georgia, serif); color: #f2c450; text-shadow: 0 2px 2px #000; }
.lfg-title span { font-size: 12px; color: #9a8f7a; }
.lfg-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lfg-overlay button { font: inherit; color: inherit; cursor: pointer; }
.lfg-overlay .lfg-tab { height: auto; padding: 4px 12px; border: 1px solid #6b5428; border-image: none; border-radius: 4px; background: #1a120a; color: #e8e0d0; font: 12px/16px var(--fbody, Georgia, serif); text-shadow: 0 1px 1px #000; }
.lfg-overlay .lfg-tab.lfg-on { border-color: #c9a24a; background: #2e2010; color: #ffe9a8; }
.lfg-overlay .lfg-tab:hover { border-color: #c9a24a; color: #fff; }
.lfg-overlay .lfg-done, .lfg-overlay .lfg-btn { height: auto; margin-left: 8px; padding: 4px 18px; border: 1px solid #c9a24a; border-image: none; border-radius: 4px; background: linear-gradient(#5c100b, #2b0605); color: #f8e3a8; font: 13px/18px var(--fbody, Georgia, serif); }
.lfg-overlay .lfg-btn { margin: 10px 0 0; }
.lfg-body { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.lfg-body.lfg-wide { grid-template-columns: 240px minmax(0, 1fr) 240px; }
.lfg-pane { min-width: 0; padding: 10px 14px 14px; background: rgba(14, 10, 6, 0.86); border: 1px solid #5a4420; border-radius: 6px; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6); }
.lfg-ph { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: normal 19px var(--ftitle, Georgia, serif); color: #f2c450; text-shadow: 0 1px 2px #000; }
.lfg-ph::before, .lfg-ph::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.6)); }
.lfg-ph::after { background: linear-gradient(90deg, rgba(201, 162, 74, 0.6), transparent); }
.lfg-sub { margin: 12px 0 6px; font: bold 10px var(--fbody, system-ui, sans-serif); letter-spacing: 1.5px; color: #9a8f7a; }
.lfg-dim { color: #9a8f7a; }
.lfg-c { text-align: center; }
.lfg-hint { color: #9a8f7a; }
.lfg-lines { margin: 0; padding-left: 16px; }
.lfg-lines li { margin: 2px 0; }
.lfg-equip li { color: #1eff00; }
.lfg-note { font-size: 11px; color: #9a8f7a; }

.lfg-fac { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.lfg-fac > span { flex: 0 0 52px; font-size: 11px; }
.lfg-alliance > span { color: #5a9cff; } .lfg-horde > span { color: #ff5a4a; }
.lfg-fac > div { display: flex; flex-wrap: wrap; gap: 4px; }
.lfg-overlay .lfg-race { width: 34px; height: 34px; padding: 0; border: 1px solid #3e301a; border-image: none; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; font-size: 9px; line-height: 1; }
.lfg-overlay .lfg-race.lfg-on { border: 2px solid #ffd100; box-shadow: 0 0 8px rgba(255, 209, 0, 0.5); }
.lfg-race .wicon { width: 100%; height: 100%; border: 0; box-shadow: none; }
.lfg-racename { margin: 6px 0 10px; text-align: center; font-size: 15px; }

.lfg-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid #000; border-image: none; border-radius: 0; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px var(--rc, #3e301a); overflow: hidden; }
.lfg-overlay button.lfg-cell { height: 34px; padding: 0; border: 1px solid #000; border-image: none; }
.lfg-cell .wicon { width: 100%; height: 100%; border: 0; box-shadow: none; }
.lfg-cell.lfg-missing .wicon { filter: grayscale(1) brightness(0.45); }
.lfg-cell.lfg-missing { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 45%, #000); }
.lfg-cell.lfg-none .wicon { opacity: 0.6; }
.lfg-cell.lfg-sel { box-shadow: 0 0 0 2px #ffd100; }
.lfg-cell.lfg-worn::after { content: 'E'; position: absolute; right: 1px; bottom: 0; font: bold 9px system-ui, sans-serif; color: #ffd100; text-shadow: 0 1px 1px #000; }
.lfg-q { font: bold 14px system-ui, sans-serif; color: #7d7462; }
.lfg-eq { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.lfg-eq[data-id] { cursor: pointer; }
.lfg-eq small { display: block; font: bold 9px var(--fbody, system-ui, sans-serif); letter-spacing: 1px; color: #9a8f7a; }
.lfg-eq b { font-weight: normal; font-size: 12px; }

.lfg-stage { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; }
.lfg-glow { position: absolute; left: 50%; bottom: 20px; width: 260px; height: 50px; margin-left: -130px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 200, 110, 0.35), transparent 70%); }
.lfg-port { position: relative; z-index: 1; width: 160px; height: 160px; border-radius: 50%; border: 2px solid #6b5428; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
.lfg-hero { text-align: center; font: 26px var(--ftitle, Georgia, serif); color: #f2c450; }

.lfg-chead, .lfg-crow { display: grid; grid-template-columns: 120px repeat(9, 34px); gap: 6px; align-items: center; justify-content: center; }
.lfg-chead small { font: bold 7px var(--fbody, system-ui, sans-serif); letter-spacing: 0.5px; color: #9a8f7a; text-align: center; white-space: nowrap; overflow: hidden; }
.lfg-crow { margin: 6px 0; }
.lfg-rl b { display: block; font-weight: normal; font-size: 13px; }
.lfg-rl span { font-size: 11px; color: #e8e0d0; }
.lfg-rl small { display: block; font-size: 9px; color: #9a8f7a; line-height: 1.2; }
.lfg-prog { position: relative; height: 14px; margin: 12px 0 0; border: 1px solid #000; background: #0f0a06; box-shadow: 0 0 0 1px #3e301a; }
.lfg-prog i { display: block; height: 100%; background: linear-gradient(#ffd866, #b9811f); }
.lfg-prog span { position: absolute; inset: 0; text-align: center; font: 10px/14px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 1px #000; }

.lfg-drops { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; }
.lfg-zl { display: flex; flex-direction: column; gap: 3px; }
.lfg-overlay .lfg-zone { display: block; height: auto; padding: 4px 8px; text-align: left; border: 1px solid #3e301a; border-image: none; border-radius: 3px; background: #120c07; }
.lfg-overlay .lfg-zone.lfg-on { border-color: #c9a24a; background: #1c130a; }
.lfg-zone b { display: block; font: normal 14px var(--ftitle, Georgia, serif); color: #f2c450; }
.lfg-zone small { font-size: 10px; }
.lfg-boss { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.lfg-boss b { font-weight: normal; font-size: 14px; color: #e8e0d0; }
.lfg-brow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lfg-bi { display: flex; align-items: center; gap: 6px; min-width: 150px; }
.lfg-bi small { display: block; font-size: 10px; color: #9a8f7a; }
.lfg-bi span { font-size: 11px; }
.lfg-dhead { display: flex; gap: 8px; align-items: center; }
.lfg-dhead h3 { margin: 0; font: normal 15px var(--fbody, Georgia, serif); }
.lfg-jd { margin-top: 12px; padding: 8px; border: 1px solid #3e301a; border-radius: 4px; background: rgba(0, 0, 0, 0.4); }
.lfg-jd b { display: block; font-weight: normal; }
.lfg-body.lfg-two { grid-template-columns: 260px minmax(0, 1fr); }
.lfg-medal { width: 130px; height: 130px; margin: 6px auto 8px; border-radius: 50%; padding: 8px; background: conic-gradient(#f2c450 var(--p), #2a1f12 0); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(242, 196, 80, 0.3); }
.lfg-medal > div { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(#2a1d10, #0b0805); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lfg-medal b { font: 30px var(--ftitle, Georgia, serif); color: #f2c450; }
.lfg-medal span { font-size: 11px; color: #9a8f7a; }
.lfg-sumrow { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin: 4px 0; }
.lfg-sumrow .lfg-prog { margin: 0; }
.lfg-ach, .lfg-perk { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin: 6px 0; padding: 6px 10px; border: 1px solid #3e301a; border-radius: 4px; background: rgba(0, 0, 0, 0.35); }
.lfg-ach b, .lfg-perk b { display: block; font-weight: normal; color: #e8e0d0; }
.lfg-ach span, .lfg-perk span { display: block; font-size: 12px; color: #cfc6b4; }
.lfg-ach small, .lfg-perk small { display: block; font-size: 11px; color: #9a8f7a; }
.lfg-ach .lfg-prog { margin: 4px 0 0; height: 10px; }
.lfg-ach .lfg-prog span { font-size: 8px; line-height: 10px; color: #fff; }
.lfg-ach em, .lfg-perk em { font-style: normal; min-width: 30px; text-align: center; padding: 2px 6px; border: 1px solid #6b5428; border-radius: 10px; color: #f2c450; }
.lfg-ach:not(.lfg-done) .lfg-cell .wicon { filter: grayscale(1) brightness(0.6); }
.lfg-ach.lfg-done { border-color: #6b5428; }
.lfg-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 10px; }
.lfg-locked .lfg-cell .wicon { filter: grayscale(1) brightness(0.5); }
.lfg-red { color: #ff5a4a !important; }
.lfg-pips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.lfg-pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #6b5428; background: #120c07; }
.lfg-pips i.on { background: #3ce03c; border-color: #3ce03c; }
.lfg-overlay .lfg-buy { height: auto; padding: 3px 10px; border: 1px solid #3d8a2a; border-image: none; border-radius: 4px; background: linear-gradient(#174d0f, #0a2306); color: #3ce03c; font: 12px var(--fbody, Georgia, serif); }
.lfg-overlay .lfg-buy:disabled, .lfg-overlay .lfg-done:disabled { filter: grayscale(1) brightness(0.6); cursor: default; }
@media (max-width: 640px) {
  .lfg-panel { width: 100%; }
  .lfg-body.lfg-two { grid-template-columns: 1fr; }
  .lfg-body, .lfg-body.lfg-wide { grid-template-columns: 1fr; }
  .lfg-chead, .lfg-crow { grid-template-columns: 70px repeat(9, 26px); gap: 3px; }
  .lfg-cell, .lfg-overlay button.lfg-cell { width: 26px; height: 26px; }
  .lfg-drops { grid-template-columns: 1fr; }
  .lfg-stage { height: 220px; }
}
.lfg-stage canvas { position: absolute; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; cursor: grab; }
.lfg-stage.lfg-3d .lfg-port { display: none; }