/* Drop raro para todos (drops.js): o banner no topo da tela, um por vez, e a linha do chat Global */
.dr-ban {
  --dr-cor: #b77cff; --dr-cor-2: #8f55e8; --dr-borda: rgba(183, 124, 255, .45);
  position: absolute; top: 58px; left: 50%; z-index: 12; width: min(380px, calc(100vw - 32px)); transform: translateX(-50%);
  border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(24, 18, 36, .97), rgba(13, 12, 20, .97));
  border: 1px solid var(--dr-borda); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(143, 85, 232, .22);
  color: #e8e3f2; animation: dr-entra .35s cubic-bezier(.2, .8, .2, 1);
}
.dr-ban.r2 { --dr-borda: rgba(255, 179, 71, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 150, 50, .3); }
.dr-ban.sai { animation: dr-sai .2s ease-in forwards; }
@keyframes dr-entra { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes dr-sai { to { opacity: 0; transform: translate(-50%, -10px); } }
.dr-top { display: flex; align-items: center; gap: 8px; padding: 6px 6px 5px 12px; border-bottom: 1px solid rgba(183, 124, 255, .16); }
.dr-marca { flex: 1; min-width: 0; color: #a99cc4; font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-tag { flex: none; padding: 2px 8px; border-radius: 999px; font: 800 9.5px/1.4 system-ui, sans-serif; letter-spacing: .08em; color: #f3e9ff;
  background: linear-gradient(180deg, var(--dr-cor), var(--dr-cor-2)); box-shadow: 0 0 10px rgba(183, 124, 255, .35); }
.dr-ban.r2 .dr-tag { color: #2a1503; background: linear-gradient(180deg, #ffd27a, #f08a24); box-shadow: 0 0 12px rgba(255, 160, 60, .55); }
.g .dr-x { flex: none; width: 26px; height: 26px; border-radius: 6px; color: #a99cc4; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.g .dr-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dr-corpo { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; }
.dr-ic { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; cursor: help;
  background: radial-gradient(circle at 50% 40%, rgba(183, 124, 255, .25), rgba(20, 16, 30, .9) 70%); border: 1px solid var(--dr-borda); }
.dr-ic::before { content: '◆'; position: absolute; color: rgba(183, 124, 255, .35); font-size: 20px; } /* sem imagem do item: o losango */
.dr-ic img { position: relative; width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.dr-ic b { position: absolute; right: 2px; bottom: 0; font: 800 11px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.dr-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dr-txt small { color: #c9c0da; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-txt small b { color: #fff; }
.dr-txt strong { color: var(--dr-cor); font: 800 19px/1.2 system-ui, sans-serif; overflow-wrap: anywhere; text-shadow: 0 0 14px rgba(183, 124, 255, .45); }
.dr-txt strong::first-letter { text-transform: uppercase; } /* o nome do Tibia ("magic plate armor") com a 1a maiuscula */
.dr-ban.r2 .dr-txt strong { color: #d9a7ff; }
.dr-txt em { font-style: normal; color: #9d93b3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-txt em i { font-style: normal; color: var(--dr-cor); }
.dr-barra { display: block; height: 3px; background: rgba(255, 255, 255, .06); }
.dr-barra > i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--dr-cor-2), var(--dr-cor));
  animation: dr-tempo var(--dr-ms, 8000ms) linear forwards; }
.dr-ban.r2 .dr-barra > i { background: linear-gradient(90deg, #f08a24, #ffd27a); }
.dr-ban.parado .dr-barra > i { animation-play-state: paused; }
@keyframes dr-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 759px) {
  .dr-ban { top: 50px; }
  .dr-txt strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-ban, .dr-ban.sai { animation: none; }
}
/* a linha do chat Global */
.cm.drop { color: #d9cdf0; }
.cm.drop > b:first-of-type { color: #b77cff; }
.cm.drop.r2 > b:first-of-type { color: #ffb347; }
.cm.drop .dr-cit { color: #c79bff; font-weight: 600; }
.cm.drop .dr-cico { font-style: normal; margin-right: 3px; }