/* Renown screens (js/renown-ui.js): toasts, Renown strip, titles, mutators, kits, Mythic+ board, talent loadouts. 1.12 look. */
.lfr-ic { display: inline-block; width: 36px; height: 36px; flex: none; background: #111 center / cover no-repeat; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5a2a; }
.lfr-ic0 { background: radial-gradient(#5a4310, #1a1206); }

/* Toasts: a stack under the top of the screen, like the 1.12 raid frames' alerts */
.lfr-toasts { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.lfr-toast { position: relative; display: flex; align-items: center; gap: 10px; min-width: 300px; max-width: 420px; padding: 14px 18px; background: rgba(8, 6, 3, .92); border: 2px solid #8a6d2b; border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, .7); animation: lfrIn .35s ease-out; transition: opacity .6s, transform .6s; }
body.wowui .lfr-toast { background: none; border: 0; box-shadow: none; --bw: 24px; }
.lfr-toast.out { opacity: 0; transform: translateY(-10px); }
.lfr-tt { display: flex; flex-direction: column; min-width: 0; }
.lfr-tt b { font: 15px FrizQT, Georgia, serif; color: #ffd100; text-shadow: 1px 1px 0 #000; }
.lfr-tt span { font: 13px FrizQT, Georgia, serif; color: #fff; text-shadow: 1px 1px 0 #000; overflow-wrap: anywhere; }
.lfr-toast.k-title .lfr-tt b { color: #a335ee; }
.lfr-toast.k-mutator .lfr-tt b { color: #ff7d0a; }
.lfr-toast.lfr-gold .lfr-tic { box-shadow: 0 0 0 1px #ffd100, 0 0 10px rgba(255, 209, 0, .5); }
@keyframes lfrIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* Modal dialogs */
.lfr-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.lfr-dlg { position: relative; width: min(440px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column; padding: 30px 22px 18px; background: #0d0a06; border: 2px solid #8a6d2b; border-radius: 6px; font: 13px FrizQT, Georgia, serif; color: #fff; }
.lfr-dlg.wide { width: min(720px, 100%); }
body.wowui .lfr-dlg { background: none; border: 0; }
.lfr-hdr span { color: #ffd100; }
body:not(.wowui) .lfr-hdr { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: 15px; }
body:not(.wowui) .lfr-hdr span { margin: 0; }
.lfr-x { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; padding: 0; z-index: 2; }
body.wowui button.lfr-x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; min-width: 0; padding: 0; }
body.wowui .lfr-x { border: 0; border-image: none; background: var(--wt-close) center / 100% 100%; color: transparent; text-shadow: none; }
body.wowui .lfr-x:active { background-image: var(--wt-close-down); }
.lfr-body { overflow: auto; min-height: 0; padding: 2px; }
.lfr-foot, .lfr-none { color: #a8a8a8; font-size: 12px; text-align: center; margin: 8px 0 0; }

/* Plain list rows (titles, rewards) */
.lfr-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 2px; padding: 5px 8px; text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid transparent; border-radius: 2px; font: 13px FrizQT, Georgia, serif; color: #ffd100; cursor: pointer; }
body.wowui .lfr-row, body.wowui .lfr-mb, body.wowui .lfr-zt, body.wowui .lfr-tsb { height: auto; border: 1px solid transparent; border-image: none; line-height: 1.3; white-space: normal; }
.lfr-row:hover { background: rgba(255, 209, 0, .12); }
.lfr-row.on { background: rgba(255, 209, 0, .2); border-color: #ffd100; }
.lfr-row.off { color: #808080; cursor: default; }
.lfr-row small { color: #c8c8c8; font-size: 11px; }
.lfr-row.off small { color: #8a8a8a; }
.lfr-prev { margin: 0 0 8px; text-align: center; font-size: 16px; color: #fff; text-shadow: 1px 1px 0 #000; }

/* Renown bar: the 1.12 status bar texture in the reputation colour */
.lfr-bar { position: relative; height: 16px; margin: 4px 0; background: #1a1206; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5a2a; overflow: hidden; }
.lfr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #0070dd linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)); transition: width .8s ease-out; }
body.wowui .lfr-bar i { background: #1f8cff var(--wt-bar) 0 0 / 100% 100%; background-blend-mode: multiply; }
.lfr-bar span { position: relative; display: block; text-align: center; font: 11px/16px FrizQT, Georgia, serif; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.lfr-strip { margin: 2px 0 6px; }
.lfr-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.lfr-btns button, body.wowui .lfr-btns button { height: 20px; min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #6b5428; border-image: none; border-radius: 3px; background: linear-gradient(#2a1d10, #170f08); color: #f2e3b8; font: 11px/18px FrizQT, Georgia, serif; text-shadow: 1px 1px 0 #000; }
.lfr-btns button:hover, body.wowui .lfr-btns button:hover { border-color: #ffd100; color: #fff; }
.lfr-endbar { width: min(420px, 100%); margin: 6px auto; text-align: center; }
.lfr-gain { font: 16px FrizQT, Georgia, serif; color: #1f8cff; text-shadow: 1px 1px 0 #000; }
.lfr-gain b { color: #ffd100; margin-left: 6px; }
.lfr-sub { font-size: 11px; color: #c8c8c8; }
.lfr-endbar.up .lfr-bar { box-shadow: 0 0 0 1px #ffd100, 0 0 10px rgba(255, 209, 0, .45); }

/* Mutator and kit pickers: 1.12 check buttons */
.lfr-mut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0; }
.lfr-ml { font: 12px FrizQT, Georgia, serif; color: #ffd100; margin-right: 2px; }
.lfr-mx { font-size: 12px; color: #cfc6b4; font-style: italic; }
.lfr-mb { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; background: rgba(0, 0, 0, .35); border: 1px solid #4a3b18; border-radius: 2px; font: 12px FrizQT, Georgia, serif; color: #ffd100; cursor: pointer; }
.lfr-mb.on { border-color: #ffd100; background: rgba(255, 209, 0, .14); }
.lfr-mb.off { color: #808080; cursor: default; }
.lfr-mb small { color: #8a8a8a; }
.lfr-ck { width: 18px; height: 18px; flex: none; background: #000; border: 1px solid #6b5a2a; }
body.wowui .lfr-ck { border: 0; background: var(--wt-check) center / 100% 100%; }
.lfr-mb.on .lfr-ck { background: #000 radial-gradient(#ffd100 35%, transparent 40%); }
body.wowui .lfr-mb.on .lfr-ck { background: var(--wt-check-on) center / 100% 100%, var(--wt-check) center / 100% 100%; }

/* Rewards track */
.lfr-rw { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lfr-rw:not(.got) .lfr-rwi { filter: grayscale(1) brightness(.6); }
.lfr-rw.next { background: rgba(31, 140, 255, .12); }
.lfr-rwi { width: 30px; height: 30px; }
.lfr-rwl { width: 44px; flex: none; text-align: right; font: 15px FrizQT, Georgia, serif; color: #1f8cff; }
.lfr-rwn { display: flex; flex-direction: column; min-width: 0; }
.lfr-rwn b { color: #ffd100; font-weight: normal; }
.lfr-rw:not(.got) .lfr-rwn b { color: #b0b0b0; }
.lfr-rwn small { color: #c8c8c8; font-size: 11px; }

/* Mythic+ board */
.lfr-ztabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.lfr-zt { padding: 3px 8px; background: rgba(0, 0, 0, .4); border: 1px solid #4a3b18; border-radius: 2px; font: 12px FrizQT, Georgia, serif; color: #c8c8c8; cursor: pointer; }
.lfr-zt.on { color: #ffd100; border-color: #ffd100; }
.lfr-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lfr-tbl th { color: #ffd100; font-weight: normal; text-align: left; padding: 3px 6px; border-bottom: 1px solid #6b5a2a; }
.lfr-tbl td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.lfr-rk { color: #a8a8a8; width: 18px; }
.lfr-tier { color: #ff8000; white-space: nowrap; }
.lfr-party { overflow-wrap: anywhere; }
.lfr-d { color: #a8a8a8; white-space: nowrap; }

/* Talent loadouts row at the top of the talent panel */
.lfr-tsets { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 10px; border-bottom: 1px solid #6b5a2a; font: 12px FrizQT, Georgia, serif; }
.lfr-tl { color: #ffd100; }
.lfr-ts { display: inline-flex; gap: 1px; }
.lfr-tsb { padding: 2px 8px; background: rgba(0, 0, 0, .4); border: 1px solid #6b5a2a; border-radius: 2px; font: 12px FrizQT, Georgia, serif; color: #fff; cursor: pointer; }
.lfr-tsb small { color: #ffd100; }
.lfr-tsb:hover { border-color: #ffd100; }
.lfr-tsm { padding: 0 6px; font-size: 11px; }
.lfr-tsn { width: 140px; padding: 2px 6px; background: #000; border: 1px solid #6b5a2a; color: #fff; font: 12px FrizQT, Georgia, serif; }
.lfr-tsh { color: #a8a8a8; font-size: 11px; }
.lfr-fl { position: absolute; right: 10px; top: 100%; padding: 2px 8px; background: rgba(0, 0, 0, .85); color: #ffd100; font-size: 12px; opacity: 0; pointer-events: none; z-index: 2; }
.lfr-fl.go { animation: lfrFl 1.6s ease-out; }
@keyframes lfrFl { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 520px) {
  .lfr-toast { min-width: 0; width: calc(100vw - 32px); }
  .lfr-tbl .lfr-d { display: none; }
  .lfr-tsn { width: 110px; }
}