/* Group loot: GroupLootFrame (FrameXML LootFrame.xml, 243x84), loot toasts and the 2D loot log. */
.lfl-root { position: fixed; left: 10px; top: 200px; z-index: 30; display: flex; flex-direction: column; gap: 8px; transform-origin: 0 0; pointer-events: none; font-family: FrizQT, 'Friz Quadrata TT', Georgia, serif; }
.lfl-roll { position: relative; width: 243px; height: 104px; pointer-events: auto; user-select: none; -webkit-user-select: none; }
.lfl-roll > div, .lfl-roll .lfl-timer > * { position: absolute; background-repeat: no-repeat; }
.lfl-slot { left: 3px; top: 3px; width: 64px; height: 64px; }
.lfl-namefr { left: 58px; top: 13px; width: 128px; height: 64px; }
.lfl-iconf { left: 18px; top: 18px; width: 34px; height: 34px; cursor: pointer; }
.lfl-iconf .wicon, .lfl-icon { display: block; width: 34px; height: 34px; background-size: cover; }
.lfl-name { left: 62px; top: 15px; width: 90px; height: 30px; display: flex; align-items: center; font-size: 10px; line-height: 11px; text-shadow: 1px 1px 0 #000; overflow: hidden; }
.lfl-deco { left: -30px; top: -15px; width: 120px; height: 120px; pointer-events: none; }
.lfl-corner { right: 6px; top: 7px; width: 32px; height: 32px; }
.lfl-btn { width: 32px; height: 32px; cursor: pointer; }
.lfl-need { right: 37px; top: 14px; }
.lfl-greed { right: 39px; top: 44px; }
.lfl-pass { right: 1px; top: 2px; }
.lfl-timer { left: 16px; top: 57px; width: 152px; height: 10px; background: rgba(0, 0, 0, .5); }
.lfl-timer i { left: 0; top: 0; height: 10px; width: 152px; background-color: #ff0; background-blend-mode: multiply; }
.lfl-timer .lfl-tborder { left: -2px; top: -5px; width: 156px; height: 20px; }
/* 2D fallback (no MPQ art). */
.lfl-flat { background: rgba(10, 10, 14, .92); border: 2px solid #b8a06a; border-radius: 6px; }
.lfl-flat .lfl-slot { border: 1px solid #555; left: 16px; top: 16px; width: 38px; height: 38px; }
.lfl-flat .lfl-need::after, .lfl-flat .lfl-greed::after, .lfl-flat .lfl-pass::after { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%; font: bold 13px Georgia, serif; color: #ffd100; background: #2a2418; border: 1px solid #b8a06a; }
.lfl-flat .lfl-need::after { content: 'N'; }
.lfl-flat .lfl-greed::after { content: 'G'; }
.lfl-flat .lfl-pass::after { content: 'X'; color: #ff5040; }
.lfl-flat .lfl-timer i { background: #ffd100; }
.lfl-noicon { display: grid !important; place-items: center; font: bold 16px Georgia, serif; color: var(--q); background: #1a1a1a; border: 1px solid var(--q); box-sizing: border-box; }
.lfl-tip { position: fixed; z-index: 60; max-width: 300px; min-width: 120px; padding: 9px 11px; font: 12px/15px FrizQT, Georgia, serif; color: #fff; pointer-events: none; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, .9); border: 1px solid #888; border-radius: 4px; }
.lfl-tip.hidden { display: none; }
.lfl-tip .tt-h { font-size: 14px; line-height: 18px; }
.lfl-tip .tt-r { display: flex; justify-content: space-between; gap: 12px; }
.lfl-toast { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: rgba(0, 0, 0, .8); border: 1px solid #6a5a3a; border-radius: 4px; color: #fff; transition: opacity .8s; }
.lfl-toast small { display: block; font-size: 10px; color: #ffd100; }
.lfl-toast b { font-size: 13px; }
.lfl-ti { width: 30px !important; height: 30px !important; }
.lfl-log { position: fixed; left: 12px; bottom: 150px; z-index: 30; max-width: min(420px, 70vw); font: 12px/15px Georgia, serif; color: #00c000; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.lfl-fade { opacity: 0; transition: opacity .8s; }
@media (max-width: 640px) { .lfl-log { bottom: 190px; font-size: 11px; } }
/* STREAMLINE: labels with keys, timer seconds, upgrade line, stacking, loot rules. */
.lfl-secs { position: absolute; right: 2px; top: -1px; font: 10px/12px FrizQT, Georgia, serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.lfl-up { left: 14px; right: 14px; top: 70px; height: 13px; font: 10px/13px FrizQT, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.lfl-up.lfl-yes { color: #1eff00; }
.lfl-up.lfl-no { color: #9d9d9d; }
.lfl-keys { left: 12px; right: 12px; top: 85px; height: 18px; display: flex; justify-content: space-between; gap: 4px; }
.lfl-keys span { cursor: pointer; padding: 0 5px; font: 11px/18px FrizQT, Georgia, serif; color: #ffd100; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, 0.85); border: 1px solid #5a4420; border-radius: 3px; }
.lfl-keys span:hover { color: #fff; }
.lfl-keys em { font-style: normal; font-size: 9px; color: #9d9d9d; }
.lfl-more { align-self: center; padding: 2px 10px; font: 12px/16px FrizQT, Georgia, serif; color: #ffd100; background: rgba(0, 0, 0, .7); border-radius: 3px; text-shadow: 1px 1px 0 #000; }
.lfl-rules { position: fixed; z-index: 61; width: 250px; padding: 10px 12px; font: 12px/18px FrizQT, Georgia, serif; color: #fff; background: rgba(0, 0, 0, .9); pointer-events: auto; }
.lfl-rules label { display: block; cursor: pointer; }
.lfl-rules select { font: inherit; background: #111; color: #ffd100; border: 1px solid #555; }
/* Empty frame space lets clicks through to the world; only the icon, buttons and labels take the mouse. */
.lfl-roll { pointer-events: none; }
.lfl-roll .lfl-iconf, .lfl-roll .lfl-btn, .lfl-roll .lfl-keys span, .lfl-roll .lfl-name { pointer-events: auto; }
.lfl-hist { max-height: 60vh; overflow-y: auto; }
/* Proc callouts over the hero (PLAYTEST: big, outlined, quality coloured, signature word below). */
.lfl-callout { position: fixed; z-index: 40; transform: translate(-50%, -100%); pointer-events: none; font: 700 26px/28px FrizQT, Georgia, serif; white-space: nowrap; text-align: center;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 8px rgba(0, 0, 0, .9); animation: lfl-pop 1.7s ease-out forwards; }
.lfl-callout.lfl-leg { font-size: 34px; line-height: 36px; }
.lfl-callout small { display: block; font-size: 16px; line-height: 18px; color: #fff; }
@keyframes lfl-pop { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); } 25% { transform: translate(-50%, -100%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
/* Fast decisions: upgrade tag, live results, chosen and compact frames. */
.lfl-tag { left: 4px; top: 2px; z-index: 3; padding: 0 3px; font: 700 9px/12px FrizQT, Georgia, serif; border-radius: 2px; pointer-events: none; text-shadow: 1px 1px 0 #000; }
.lfl-tag-up { color: #fff; background: #1a8a1a; }
.lfl-tag-no { color: #bbb; background: rgba(60, 60, 60, .85); }
.lfl-res { left: 14px; right: 14px; top: 106px; height: 12px; font: 10px/12px FrizQT, Georgia, serif; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.lfl-roll { height: 130px; }
.lfl-chosen .lfl-btn, .lfl-chosen .lfl-keys { opacity: .35; pointer-events: none; }
.lfl-crow { display: none; left: 10px; right: 10px; top: 6px; height: 22px; align-items: center; gap: 6px; font: 11px/22px FrizQT, Georgia, serif; }
.lfl-crow .lfl-cicon { width: 20px !important; height: 20px !important; }
.lfl-crow b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lfl-crow span { color: #fff; }
/* A compact frame keeps the mouse while open, so growing upward under the pointer cannot flicker it shut. */
.lfl-roll.lfl-compact { pointer-events: auto; }
.lfl-roll.lfl-compact:not(.lfl-open) { height: 34px; --bw: 10px; }
.lfl-roll.lfl-compact:not(.lfl-open)::before { inset: 4px; }
.lfl-roll.lfl-compact:not(.lfl-open) > div:not(.lfl-crow) { display: none; }
.lfl-roll.lfl-compact:not(.lfl-open) > .lfl-crow { display: flex; }

/* Swap or Upgrade: bottom centre above the action bar, clear of the roll stack (top) and the level-up cards (hidden while they show). */
.lsu { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 29; width: clamp(300px, calc(100vw - 440px), 440px); box-sizing: border-box; padding: 14px 16px 12px; font: 11px/14px FrizQT, Georgia, serif; color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: auto; }
body:not(.wowui) .lsu { background: rgba(10, 10, 14, .92); border: 2px solid #b8a06a; border-radius: 6px; }
.lsu-h { margin-bottom: 6px; color: #ffd100; font-size: 12px; text-align: center; }
.lsu-cols { display: flex; gap: 8px; }
.lsu-col { flex: 1 1 0; min-width: 0; padding: 6px; border: 1px solid #5a4420; border-radius: 4px; background: rgba(0, 0, 0, .55); cursor: pointer; }
.lsu-col:hover { border-color: #ffd100; }
.lsu-col.lsu-def { border-color: #1f7a12; }
.lsu-k { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #ffd100; font-size: 12px; }
.lsu-k span { padding: 0 5px; border: 1px solid #6b5428; border-radius: 3px; background: #1a120a; color: #fff; font-size: 10px; }
.lsu-it { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.lsu-it b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsu-ic { flex: 0 0 26px; width: 26px !important; height: 26px !important; }
.lsu-st { color: #1eff00; font-size: 10px; line-height: 13px; }
.lsu-bar { position: relative; height: 6px; margin-top: 8px; background: rgba(0, 0, 0, .7); border: 1px solid #000; }
.lsu-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e0a000, #a86400); }
.lsu-foot { margin-top: 3px; color: #c8bca0; font-size: 10px; text-align: center; }
.lsu-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 4px; font-size: 9px; color: #c8bca0; }
.lsu-focus b { padding: 0 4px; border: 1px solid #6b5428; border-radius: 3px; background: #1a120a; color: #ffd100; font-weight: normal; cursor: pointer; }
.lsu-focus b:hover { border-color: #ffd100; color: #fff; }

/* Need greyed out on items your class cannot use (WoW 1.12). */
.lfl-roll .lfl-need.lfl-off { filter: grayscale(1) brightness(0.55); cursor: default; }
.lfl-roll .lfl-keys span.lfl-off { opacity: 0.4; cursor: default; }
/* Swap or Upgrade as two big choices (audit 16): one headline each, keys 1 and 2, readable at every UI scale. */
.lsu { zoom: var(--uis, 1); width: min(520px, calc((100vw - 24px) / var(--uis, 1))); bottom: 140px; padding: 16px 18px 12px; font-size: 13px; line-height: 17px; }
.lsu .lsu-h { margin-bottom: 10px; font-size: 14px; }
.lsu .lsu-cols { gap: 12px; }
.lsu .lsu-col { padding: 12px 12px 10px; border-width: 1.5px; text-align: center; }
.lsu .lsu-col:hover { box-shadow: 0 0 14px rgba(255, 209, 0, .35); }
.lsu .lsu-k { justify-content: center; margin-bottom: 6px; font-size: 14px; }
.lsu .lsu-k span { font-size: 13px; padding: 0 7px; }
.lsu .lsu-hl { margin: 2px 0 8px; font: bold 20px/1.15 FrizQT, Georgia, serif; color: #fff; text-shadow: 0 2px 2px #000; }
.lsu .lsu-it { justify-content: center; }
.lsu .lsu-it b { font-size: 13px; white-space: normal; }
.lsu .lsu-ic { flex: 0 0 30px; width: 30px !important; height: 30px !important; }
.lsu .lsu-sub { margin-top: 4px; color: #cfc6b4; font-size: 12px; }
.lsu .lsu-loss { margin-top: 4px; color: #ff5050; font-size: 12px; }
.lsu .lsu-focus { justify-content: center; margin-top: 8px; font-size: 12px; gap: 4px; }
.lsu .lsu-foot { font-size: 12px; }
body:has(.lsu:not(.hidden)) .lft2-toast { visibility: hidden; }
.lsu .lsu-h.lsu-one { font-size: 13px; color: #cfc6b4; } .lsu .lsu-h.lsu-one b { color: #fff; font: 13px FrizQT, Georgia, serif; }
.lsu .lsu-hl.long { font-size: 16px; line-height: 1.2; }
body:has(#levelup:not(.hidden)) .wui .wabil { display: none; }
/* Heavy loot (lf-audit r229): the prompt sits just above the action buttons, clear of the hero; the queue is a badge. */
.lsu { bottom: 118px; padding: 12px 14px 10px; }
.lsu .lsu-q { position: absolute; right: 14px; top: 14px; padding: 0 6px; border: 1px solid #c9a24a; border-radius: 9px; background: #3a2812; color: #ffd100; font: bold 12px/16px FrizQT, Georgia, serif; }
/* Compact Swap or Upgrade (lf-audit r234): about 60% of the old height, so its top stays below the hero at 1080p. */
.lsu { padding: 8px 12px 8px; }
.lsu .lsu-h { margin-bottom: 6px; }
.lsu .lsu-col { padding: 7px 10px 7px; }
.lsu .lsu-k { margin-bottom: 3px; font-size: 13px; }
.lsu .lsu-hl { margin: 0 0 4px; font-size: 18px; }
.lsu .lsu-hl.long { font-size: 16px; }
.lsu .lsu-focus { margin-top: 4px; }
.lsu .lsu-bar { margin-top: 6px; height: 4px; }
.lsu .lsu-foot { margin-top: 2px; font-size: 11px; }
.lsu { bottom: 92px; }
/* lf-audit r239: room for the title under the frame border, and the prompt clears the Shift/R buttons. */
.lsu { bottom: 126px; padding-top: 16px; }
.lsu .lsu-fx { margin: -2px 0 4px; color: #1eff00; font: bold 14px FrizQT, Georgia, serif; }