/* A narrow field-side receipt. Never a modal, input target or full-width banner. */
#rare-loot-banner{position:fixed;z-index:8;display:flex;flex-direction:column;gap:4px;margin:0;padding:0;pointer-events:none;user-select:none;border-radius:3px;color:#e6efda}
#rare-loot-banner,#rare-loot-banner *{pointer-events:none}
#rare-loot-banner[hidden]{display:none}
.rare-loot-row{height:36px;display:flex;align-items:center;gap:8px;min-width:0;padding:3px 9px;border:1px solid #81b77b99;border-left:2px solid #b4dc90;border-radius:3px;background:linear-gradient(100deg,#143126f5,#162a21ed);box-shadow:inset 0 1px #d9efb715}
.rare-loot-icon{flex:0 0 17px;height:18px;display:grid;place-items:center;color:#c6e59f}
.rare-loot-icon::before{content:'';display:block;width:10px;height:10px;border:1px solid currentColor;transform:rotate(45deg)}
.is-rare .rare-loot-icon::before{width:15px;height:15px;border:0;background:currentColor;transform:none;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%)}
.rare-loot-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.rare-loot-copy b{font-family:'Noto Sans KR',sans-serif;font-size:12px;line-height:14px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d9efb5;text-shadow:0 1px 2px #09180e}
.rare-loot-copy small{font-size:9px;line-height:10px;color:#b9ccb2;white-space:nowrap}
.rare-loot-count{flex:0 0 auto;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;color:#e1d9a7}
.rare-loot-row.is-box{border-left-color:#94c9ae}.is-box .rare-loot-icon,.is-box .rare-loot-copy b{color:#c8e6cc}
#rare-loot-banner[data-compact="true"] .rare-loot-row{height:32px;padding:2px 6px;gap:5px}
#rare-loot-banner[data-compact="true"] .rare-loot-icon{flex-basis:13px;font-size:15px}
#rare-loot-banner[data-compact="true"] .rare-loot-copy b{font-size:11px;line-height:13px}
#rare-loot-banner[data-compact="true"] .rare-loot-copy small{font-size:8px;line-height:9px}
#rare-loot-banner[data-compact="true"] .rare-loot-count{font-size:10px}
/* Hide synchronously even before the next animation frame after opening UI. */
#game-ui:has(#pause-overlay:not([hidden])) #rare-loot-banner,#game-ui:has(#journal:not([hidden])) #rare-loot-banner,#game-ui:has(.character-story.story-cinematic:not([hidden])) #rare-loot-banner,body:has(#modal[open]) #rare-loot-banner{visibility:hidden}
@media(prefers-reduced-motion:reduce){#rare-loot-banner{box-shadow:0 3px 12px #0004!important}}

/* Tight adjacent field lanes retain the name above an exact quantity/amount. */
#rare-loot-banner[data-fallback="true"] .rare-loot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:13px 10px;gap:1px 4px;align-content:center}
#rare-loot-banner[data-fallback="true"] .rare-loot-icon{display:none}
#rare-loot-banner[data-fallback="true"] .rare-loot-copy{display:contents}
#rare-loot-banner[data-fallback="true"] .rare-loot-copy b{grid-column:1/-1;grid-row:1;font-size:10px;line-height:13px}
#rare-loot-banner[data-fallback="true"] .rare-loot-copy small{grid-column:1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:10px}
#rare-loot-banner[data-fallback="true"] .rare-loot-count{grid-column:2;grid-row:2;font-size:9px;line-height:10px;white-space:nowrap}
#rare-loot-banner[data-fallback="true"] .rare-loot-row[data-kind="conversion"] .rare-loot-copy small{display:none}
#rare-loot-banner[data-fallback="true"] .rare-loot-row[data-kind="conversion"]::after{content:attr(data-count) '개 중복';grid-column:1;grid-row:2;color:#b9ccb2;font-size:8px;line-height:10px;white-space:nowrap}

/* Compact loot stays above transient text without intercepting any touches.
   Geometry separately reserves buffs, the manual reward and live controls. */
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui #rare-loot-banner{z-index:9}
}