/* Looks on the lobby tiles (app.js lookHTML): a border over the edge of the picture, in a colour (--look, set on the
   tile's .art) or with colours of its own, some of them moving. The tile's badge stays on top. */
.look { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.art:has(> .look) { box-shadow: 0 0 12px var(--look-glow, transparent), 0 8px 20px rgba(0, 0, 0, .35); }

/* glow: a steady ring with light inside the edge; pulse: the same, breathing */
.lk-glow, .lk-pulse { box-shadow: inset 0 0 0 3px var(--look), inset 0 0 18px var(--look); }
.lk-pulse { animation: lkPulse 1.8s ease-in-out infinite; }
@keyframes lkPulse { 50% { opacity: .3; } }
.art:has(> .lk-glow), .art:has(> .lk-pulse), .art:has(> .lk-chase), .art:has(> .lk-haunt) { --look-glow: var(--look); }

/* The moving ones: a ring cut out of a big colour wheel that turns under it. */
.lk-chase, .lk-haunt, .lk-rainbow, .lk-flame, .lk-gold {
  overflow: hidden;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.lk-chase::before, .lk-haunt::before, .lk-rainbow::before, .lk-flame::before, .lk-gold::before {
  content: '';
  position: absolute;
  inset: -60%;
  animation: lkTurn 2.6s linear infinite;
}
@keyframes lkTurn { to { transform: rotate(1turn); } }
/* chase: a light running round the edge, over a dim ring in the colour */
.lk-chase { background: color-mix(in srgb, var(--look) 38%, transparent); }
.lk-chase::before { background: conic-gradient(transparent 0 62%, var(--look) 80%, #fff 90%, transparent 97%); animation-duration: 2.2s; }
/* haunt: slow mist in the colour, flickering like the spooky lettering */
.lk-haunt { animation: lkHaunt 4s ease-in-out infinite; }
.lk-haunt::before { background: conic-gradient(color-mix(in srgb, var(--look) 25%, transparent), var(--look), #f3e8ff, var(--look), color-mix(in srgb, var(--look) 25%, transparent) 60%, var(--look) 80%, color-mix(in srgb, var(--look) 25%, transparent)); animation-duration: 7s; }
@keyframes lkHaunt { 0%, 100% { opacity: 1; } 44% { opacity: 1; } 46% { opacity: .5; } 48% { opacity: .95; } 50% { opacity: .6; } 53% { opacity: 1; } }
.look-web {
  position: absolute;
  top: 0;
  left: 0;
  width: 26%;
  aspect-ratio: 1;
  opacity: .6;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23eadcff' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M0 0L57.9 4.0M0 0L52.6 24.5M0 0L40.3 41.7M0 0L22.7 53.4M0 0L4.0 57.9M11.0 0.8Q8.8 2.3 10.0 4.6Q7.4 5.3 7.6 7.9Q5.0 7.6 4.3 10.1Q2.1 8.9 0.8 11.0M20.9 1.5Q16.8 4.3 19.0 8.9Q14.1 10.1 14.6 15.1Q9.6 14.5 8.2 19.3Q4.1 16.9 1.5 20.9M30.9 2.2Q24.8 6.4 28.1 13.1Q20.8 14.9 21.5 22.3Q14.1 21.4 12.1 28.5Q6.0 25.0 2.2 30.9M40.9 2.9Q32.8 8.5 37.2 17.3Q27.6 19.7 28.5 29.5Q18.7 28.2 16.0 37.7Q7.9 33.0 2.9 40.9'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}
/* rainbow, flames and gold bring their own colours */
.lk-rainbow::before { background: conic-gradient(#ff3b3b, #ffb13b, #fff53b, #3bff6f, #3bd8ff, #6a3bff, #ff3bd5, #ff3b3b); animation-duration: 3s; }
.art:has(> .lk-rainbow) { --look-glow: rgba(255, 255, 255, .45); }
.lk-flame { animation: lkFlicker .5s steps(2) infinite; }
.lk-flame::before { background: conic-gradient(#ff2d00, #ff9a00, #ffe066, #ff5a00, #ff2d00, #ffb300, #ff4000, #ffe066, #ff2d00); animation-duration: 1.4s; }
@keyframes lkFlicker { 50% { opacity: .82; } }
.art:has(> .lk-flame) { --look-glow: rgba(255, 110, 0, .85); }
.lk-gold::before { background: conic-gradient(#7a4b00, #ffe27a, #b8860b, #fff6c8, #7a4b00, #ffd24d, #9a6a00, #fff1b0, #7a4b00); animation-duration: 4s; }
.art:has(> .lk-gold) { --look-glow: rgba(255, 207, 63, .7); }

@media (prefers-reduced-motion: reduce) {
  .look, .look::before { animation: none; }
}