/* Olhar (look.js): the client's Look balloon. Panel texture, the client's text colours, an arrow to the thing. */
.lk-tip{position:fixed;inset:auto;margin:0;z-index:90;width:min(260px,calc(100vw - 16px));padding:6px 7px 7px;display:grid;gap:4px;
 color:#c0c0c0;background:#262626 url('/assets/ui/classic/panel-texture.png');background-blend-mode:multiply;border:1px solid #000;
 box-shadow:inset 1px 1px #6a6a6a,0 4px 12px rgba(0,0,0,.8);font:11px/14px 'Tibia Pixel',Verdana,sans-serif;overflow:visible;animation:lk-pop .12s ease-out}
@keyframes lk-pop{from{opacity:0;transform:translateY(3px)}}
.lk-tip::before{content:'';position:absolute;left:var(--ax,50%);width:10px;height:10px;background:#262626;border:1px solid #000;transform:translateX(-50%) rotate(45deg)}
.lk-tip.up::before{bottom:-6px;border-top:0;border-left:0}
.lk-tip.down::before{top:-6px;border-bottom:0;border-right:0;box-shadow:inset 1px 1px #6a6a6a}
.lk-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center}
.lk-h>span:last-child{display:grid;min-width:0}
.lk-h b{color:#fff;font-weight:bold;overflow-wrap:anywhere}
.lk-h small{color:#e4ca78}
/* The picture: a 32 px box; Market.fit draws the sprite at whole pixels inside it (a 64 px creature at 1:1 on a
   2x screen), animated items play their phases. */
.lk-art{position:relative;display:block;width:32px;height:32px;flex:0 0 auto}
.lk-art>img{max-width:32px;max-height:32px;image-rendering:pixelated}
.lk-chips{display:flex;flex-wrap:wrap;gap:3px}
.lk-chip{display:inline-flex;align-items:center;gap:3px;padding:0 4px;background:#1c1c1c;border:1px solid #111;font-size:10px;line-height:15px;color:#c0c0c0}
.lk-chip img{max-height:12px;width:auto}
.lk-chip.is-good{color:#5fc85f}.lk-chip.is-bad{color:#e8756c}.lk-chip.is-gold{color:#f4d35e}
.lk-tip p{margin:0;overflow-wrap:anywhere}
.lk-look{color:#5fc85f;font-size:10px;line-height:13px}
.lk-more{justify-self:end;min-height:22px;padding:1px 6px;font-size:10px}
/* Holding: a gold ring fills around the thing, then the balloon opens. */
[data-look],.ba-slot,.item-icon{-webkit-touch-callout:none}
#content img,dialog img,#board{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lk-holding{outline:2px solid #e8c547;outline-offset:1px;animation:lk-ring .35s linear}
@keyframes lk-ring{from{outline-color:transparent}}
#board.lk-holding{outline:0;animation:none}
.lk-looked{outline:1px solid #c5b47c;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.lk-tip,.lk-holding{animation:none}}