/* ================= REWARDS (13 Oct, loot helper): item tooltip with comparison, loot feed, tier beams, level-up banner, difficulty colours ================= */
/* the tooltip of a piece: frame and name in the tier colour */
#tip:has(.itTip){border-color:var(--tc,var(--line));box-shadow:0 0 0 1px #000,0 0 14px color-mix(in srgb,var(--tc,#000) 30%,transparent),0 8px 24px #000a}
#tip:has(.itTip[data-t="1"]){--tc:var(--t1)}#tip:has(.itTip[data-t="2"]){--tc:var(--t2)}#tip:has(.itTip[data-t="3"]){--tc:var(--t3)}#tip:has(.itTip[data-t="4"]){--tc:var(--t4)}
#tip:has(.itTip[data-t="5"]){--tc:var(--t5)}#tip:has(.itTip[data-t="6"]){--tc:var(--t6)}#tip:has(.itTip[data-t="7"]){--tc:var(--t7)}
.itTip .itN{display:block;font:600 14px/1.25 var(--f-ui);padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.itCmp{margin-top:7px;padding-top:6px;border-top:1px solid var(--line)}
.itCmp .icH{font:600 11.5px/1.3 var(--f-ui);color:var(--dim);margin-bottom:3px}
.itCmp .icL,.itCmp .icP{font:600 12.5px/1.4 var(--f-ui);font-variant-numeric:tabular-nums}
.itCmp .icL i,.itCmp .icP i{font-style:normal;font-size:10px}
.itCmp .up{color:var(--good)}.itCmp .dn{color:var(--bad)}
.itCmp .icT{margin-top:3px;padding-top:3px;border-top:1px dashed #ffffff14}
.itCmp .icP{margin-top:4px;padding:3px 6px;background:#00000040;border:1px solid currentColor;display:inline-block}

/* worn gear in the dock: a tier-coloured inner frame, a glow from T4 */
#hud .it:not(.empty)::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),inset 0 -10px 12px -8px var(--c)}
#hud .it[data-t="4"]::after,#hud .it[data-t="5"]::after,#hud .it[data-t="6"]::after,#hud .it[data-t="7"]::after{box-shadow:inset 0 0 0 1px var(--c),inset 0 -12px 14px -8px var(--c),0 0 8px color-mix(in srgb,var(--c) 55%,transparent)}

/* the loot feed: left, over the chat */
#lootFeed{position:absolute;left:16px;bottom:176px;z-index:5;display:flex;flex-direction:column;gap:2px;width:320px;max-width:calc(100% - 32px);pointer-events:none}
#lootFeed:empty{display:none}
#lootFeed .lf{display:flex;align-items:center;gap:6px;min-height:20px;padding:2px 8px 2px 6px;font:600 13px/1.3 var(--f-ui);color:var(--c);
  background:linear-gradient(90deg,#120d08d8,#120d0800);border-left:2px solid var(--c);text-shadow:0 1px 2px #000;animation:lfIn .25s ease-out,lfOut .6s ease-in 4.4s forwards}
#lootFeed .lf b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#lootFeed .lf i{font-style:normal;font-size:11px;opacity:.8;flex:none}
#lootFeed .lf.hi{font-size:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,#120d08e0),#120d0800)}
#lootFeed .lf canvas{width:20px;height:20px;flex:none;image-rendering:pixelated;border:1px solid var(--c);box-shadow:0 0 6px var(--c)}
@keyframes lfIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lfOut{to{opacity:0;transform:translateY(-4px)}}

/* a column of light over a T4+ drop (positioned by 57-rewards.js each frame) */
.lootBeam{--z:3;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1}
.lootBeam i{position:absolute;left:calc(var(--z) * -5px);bottom:0;width:calc(var(--z) * 10px);height:calc(var(--z) * 110px);transform-origin:50% 100%;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c) 85%,#fff) 0%,color-mix(in srgb,var(--c) 55%,transparent) 35%,transparent 100%);
  box-shadow:0 0 calc(var(--z) * 8px) var(--c);mix-blend-mode:screen;animation:lbCol 2.4s ease-out forwards}
.lootBeam b{position:absolute;left:calc(var(--z) * -16px);top:calc(var(--z) * -6px);width:calc(var(--z) * 32px);height:calc(var(--z) * 12px);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 90%,#fff),color-mix(in srgb,var(--c) 40%,transparent) 60%,transparent);mix-blend-mode:screen;animation:lbPool 2.4s ease-out forwards}
.lootBeam.t6 i,.lootBeam.t6 b{animation-duration:3.2s}
.lootBeam.calm i,.lootBeam.calm b{animation:lbCalm 2.4s linear forwards}
@keyframes lbCol{0%{transform:scaleY(0) scaleX(1.6);opacity:1}14%{transform:scaleY(1) scaleX(1);opacity:1}70%{opacity:.85}100%{transform:scaleY(1) scaleX(.4);opacity:0}}
@keyframes lbPool{0%{transform:scale(.2);opacity:0}15%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes lbCalm{0%,70%{opacity:.8}100%{opacity:0}}

/* "Level up!" in the middle, under the "New" plaque (unlock.css, top 170px) and under the windows (.veil z 5): does not catch the mouse */
#lvlUp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;text-align:center;opacity:0;min-width:260px;padding:6px 26px 10px;
  background:radial-gradient(ellipse at 50% 55%,#2a1a08e6 0%,#1a1008b0 55%,transparent 75%)}
#lvlUp.on{animation:luIn .35s cubic-bezier(.2,1.4,.4,1) forwards}
#lvlUp:not(.on){transition:opacity .5s;opacity:0}
#lvlUp small{display:block;font:700 13px var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--ember2);text-shadow:0 1px 0 #000,0 0 10px #ff8a2a88}
#lvlUp>b{display:block;font:700 76px/1 var(--f-display);color:#ffe9a8;text-shadow:3px 3px 0 #7a2600,0 0 26px #ffb84a99;margin:2px 0 4px}
#lvlUp.bump>b{animation:luBump .25s ease-out}
#lvlUp s{display:block;text-decoration:none;font:600 12px var(--f-ui);color:var(--dim)}
#lvlUp span{display:block;font:600 14px var(--f-ui);color:var(--ink);text-shadow:0 1px 2px #000}
#lvlUp span b{display:inline;font:700 14px var(--f-ui);color:var(--good);text-shadow:0 1px 2px #000;margin:0}
#lvlUp em{display:block;margin-top:5px;font:600 13px var(--f-ui);font-style:normal;color:var(--gold);text-shadow:0 1px 2px #000}
#lvlUp.top>b{font-size:96px;color:#fff3c4;text-shadow:3px 3px 0 #7a2600,0 0 30px #ffd24a,0 0 60px #ff8a2a}
#lvlUp.top small{color:var(--gold);font-size:15px}
#lvlUp.legend>b{text-shadow:none;filter:drop-shadow(3px 3px 0 #7a2600) drop-shadow(0 0 16px #ffd24a);background:linear-gradient(90deg,#ffd24a,#fff3c4,#ff7ad9,#c77dff,#ffd24a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:luShine 2.5s linear infinite}
#lvlUp.calm.on{animation:none;opacity:1}
@keyframes luIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes luBump{0%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes luShine{to{background-position:300% 0}}
#lvlFlash{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(circle at 50% 45%,#ffe9a855 0%,#ffb84a22 30%,transparent 60%)}
#lvlFlash.on{animation:luFlash .9s ease-out forwards}
#lvlFlash.top.on{background:radial-gradient(circle at 50% 45%,#fff3c488 0%,#ffd24a44 30%,#c77dff22 55%,transparent 75%);animation-duration:1.8s}
@keyframes luFlash{0%{opacity:1}100%{opacity:0}}

/* the target frame: the level in its difficulty colour, bosses framed */
#target .tlv.d-grey{color:#9a9a9a}#target .tlv.d-green{color:#5fd36a}#target .tlv.d-yellow{color:#ffd84a}#target .tlv.d-orange{color:#ff9a3a}#target .tlv.d-red{color:#ff4a3a}
#target.tMini{border-color:#c77dff;box-shadow:0 0 0 1px #000,0 0 12px #c77dff66}
#target.tBoss{border-color:var(--gold);box-shadow:0 0 0 1px #000,0 0 0 3px #3a2400,0 0 16px #ffb02e88}
#target.tBoss #tname{color:#ffe0a0}

#app.cutting #lootFeed,#app.cutting #lvlUp,#app.cutting .lootBeam{opacity:0!important}
@media (max-width:900px){
  #lvlUp{top:42%;min-width:0}#lvlUp>b{font-size:56px}#lvlUp.top>b{font-size:68px}
  #lootFeed{width:260px}#lootFeed .lf{font-size:12px}
}
@media (prefers-reduced-motion:reduce){#lootFeed .lf{animation:lfOut .6s ease-in 4.4s forwards}#lvlUp.legend>b{animation:none}}