/*
 * Shared Lucky Charm attachment presentation.
 *
 * A game only needs to mark its seat/panel as a host (the controller does this
 * automatically) and may override the variables below for unusually dense
 * layouts.  Keep the attachment overflow visible; the controller applies the
 * inward edge treatment before paint when a panel touches the viewport edge.
 */
.lucky-charm-host {
  --lucky-charm-size: clamp(52px, 7vw, 88px);
  --lucky-charm-top: -14px;
  --lucky-charm-right: -18px;
  --lucky-charm-chain-length: 22px;
  position: relative;
  overflow: visible;
}

/* Cup-of-Dice cards are normal player panels.  Its page-level stylesheet is
   loaded after this file and may tune placement/padding, but it must not turn
   a normal attachment into the compact seat size. */
.player-card.lucky-charm-host {
  --lucky-charm-size: clamp(52px, 7vw, 88px) !important;
  --lucky-charm-chain-length: 22px !important;
}

.lucky-charm-attachment {
  --lucky-charm-hang-x: 0px;
  --lucky-charm-glow-gold: rgb(255 216 91 / .78);
  --lucky-charm-glow-emerald: rgb(70 230 161 / .38);
  position: absolute;
  z-index: 8;
  top: var(--lucky-charm-top);
  right: var(--lucky-charm-right);
  width: var(--lucky-charm-size);
  height: calc(var(--lucky-charm-size) + var(--lucky-charm-chain-length) + 12px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: inherit;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  isolation: isolate;
  pointer-events: none;
  transform-origin: 50% 9px;
  animation: lucky-charm-sway 3.3s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.lucky-charm-attachment.is-compact {
  --lucky-charm-size: clamp(46px, 5vw, 58px);
  --lucky-charm-chain-length: 19px;
}

.lucky-charm-attachment.is-auto-compact {
  --lucky-charm-size: clamp(46px, 5vw, 58px);
  --lucky-charm-chain-length: 19px;
}

/* Only the visible charm has pointer hit-testing, so transparent attachment
   space cannot block cards, controls, or neighboring seats. */
.lucky-charm-touch-target {
  position: absolute;
  z-index: 3;
  top: calc(var(--lucky-charm-chain-length) + 4px);
  left: calc(50% + var(--lucky-charm-hang-x));
  display: grid;
  width: max(44px, var(--lucky-charm-size));
  height: max(44px, var(--lucky-charm-size));
  place-items: center;
  border-radius: 50%;
  pointer-events: auto;
  transform: translateX(-50%);
  touch-action: manipulation;
}

.charm-pin {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #f3d36f;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8c8 4%, #f0c956 38%, #8d6218 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / .65), 0 0 9px rgb(255 216 102 / .62);
  pointer-events: none;
  transform: translateX(-50%);
}

.charm-pin::after {
  position: absolute;
  inset: 2px;
  content: "";
  border: 1px solid rgb(255 252 216 / .72);
  border-radius: inherit;
}

.charm-chain {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: calc(50% + var(--lucky-charm-hang-x));
  width: 9px;
  height: var(--lucky-charm-chain-length);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .72));
  transform: translateX(-50%);
  transform-origin: 50% 0;
}

.charm-chain-link {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 10px;
  border: 2px solid #efc956;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 1px #fff7c8, 0 0 3px rgb(255 217 106 / .5);
  transform: translateX(-50%);
}

.charm-chain-link:nth-child(1) { top: 0; }
.charm-chain-link:nth-child(2) { top: 7px; transform: translateX(-50%) rotate(90deg); }
.charm-chain-link:nth-child(3) { top: 14px; }

.charm-image {
  display: block;
  width: var(--lucky-charm-size);
  height: var(--lucky-charm-size);
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 0;
  user-select: none;
  filter:
    drop-shadow(0 0 5px var(--lucky-charm-glow-gold))
    drop-shadow(0 0 13px var(--lucky-charm-glow-emerald));
  animation: lucky-charm-breathe 2.6s ease-in-out infinite;
}

.lucky-charm-touch-target::before,
.lucky-charm-touch-target::after {
  position: absolute;
  z-index: -1;
  width: calc(var(--lucky-charm-size) * .9);
  height: calc(var(--lucky-charm-size) * .9);
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.lucky-charm-touch-target::before {
  background: rgb(255 211 89 / .18);
  filter: blur(10px);
  animation: lucky-charm-aura 2.6s ease-in-out infinite;
}

.lucky-charm-touch-target::after {
  background: rgb(37 224 151 / .11);
  filter: blur(17px);
  animation: lucky-charm-aura 2.6s .42s ease-in-out infinite reverse;
}

/* A panel at the right viewport edge keeps the pin inside the panel and lets
   the chain/charm lean toward the username rather than outside the page. */
.lucky-charm-attachment.charm-edge-inward {
  --lucky-charm-hang-x: -8px;
  right: max(12px, var(--lucky-charm-right));
  transform-origin: 78% 9px;
}

.lucky-charm-attachment.charm-edge-inward .charm-chain {
  transform: translateX(-50%) rotate(7deg);
}

.charm-stars,
.charm-hearts {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.lucky-star {
  position: absolute;
  width: var(--lucky-star-size, 6px);
  height: var(--lucky-star-size, 6px);
  color: var(--lucky-star-color, #ffe36e);
  background: currentColor;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: 0;
  filter: drop-shadow(0 0 4px currentColor);
  will-change: transform, opacity;
  animation: lucky-star-to-name var(--lucky-star-duration, 1080ms) cubic-bezier(.22,.72,.3,1) forwards;
}

.lucky-star.is-dot {
  border-radius: 50%;
  clip-path: none;
}

.lucky-charm-heart {
  position: absolute;
  z-index: 11;
  top: calc(var(--lucky-charm-chain-length) + var(--lucky-charm-size) * .64);
  left: calc(50% + var(--lucky-charm-hang-x));
  color: var(--lucky-heart-color, #ffe88a);
  font-size: var(--lucky-heart-size, 10px);
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px currentColor);
  will-change: transform, opacity;
  animation: lucky-charm-heart-float var(--lucky-heart-duration, 920ms) ease-out forwards;
}

.lucky-charm-attachment:focus-visible {
  outline: none;
}

.lucky-charm-attachment:focus-visible .lucky-charm-touch-target {
  outline: 3px solid #fff4a8;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px rgb(1 37 27 / .92);
}

.lucky-charm-attachment.charm-edge-inward:focus-visible .lucky-charm-touch-target {
  outline-offset: 1px;
}

.lucky-charm-attachment.is-squishing {
  animation: lucky-charm-squish .76s cubic-bezier(.2,.85,.35,1);
}

@keyframes lucky-charm-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(2px); }
}

@keyframes lucky-charm-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgb(255 215 91 / .68)) drop-shadow(0 0 11px rgb(49 255 165 / .3));
  }
  50% {
    filter: drop-shadow(0 0 9px rgb(255 215 91 / .88)) drop-shadow(0 0 18px rgb(49 255 165 / .46));
  }
}

@keyframes lucky-charm-aura {
  0%, 100% { opacity: .38; transform: scale(.9); }
  50% { opacity: .62; transform: scale(1.1); }
}

@keyframes lucky-star-to-name {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(.35);
  }
  18% {
    opacity: 1;
    transform: translate(var(--lucky-star-mid-x), var(--lucky-star-arc-y)) rotate(75deg) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(var(--lucky-star-x), var(--lucky-star-y)) rotate(230deg) scale(.92);
  }
  84% {
    opacity: 1;
    transform: translate(calc(var(--lucky-star-x) + 2px), calc(var(--lucky-star-y) - 3px)) rotate(275deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--lucky-star-x), calc(var(--lucky-star-y) - 6px)) rotate(340deg) scale(.24);
  }
}

@keyframes lucky-charm-squish {
  0%, 100% { transform: scale(1); }
  24% { transform: scale(1.08, .84) rotate(-2deg); }
  52% { transform: scale(.94, 1.08) rotate(2.5deg); }
  74% { transform: scale(1.035, .98) rotate(-1deg); }
}

@keyframes lucky-charm-heart-float {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0) scale(.45); }
  18% { opacity: .95; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--lucky-heart-x)), var(--lucky-heart-y)) rotate(var(--lucky-heart-rotate)) scale(1.08);
  }
}

@keyframes lucky-charm-reduced-feedback {
  0%, 100% { opacity: 1; transform: scale(1); }
  45% { opacity: .76; transform: scale(1.045, .96); }
}

@media (max-width: 600px) {
  .lucky-charm-host {
    --lucky-charm-size: 52px;
    --lucky-charm-top: -10px;
    --lucky-charm-right: -10px;
    --lucky-charm-chain-length: 18px;
  }

  .lucky-charm-attachment.is-compact,
  .lucky-charm-attachment.is-auto-compact {
    --lucky-charm-size: 40px;
    --lucky-charm-chain-length: 16px;
  }

  .player-card.lucky-charm-host {
    --lucky-charm-size: 52px !important;
    --lucky-charm-chain-length: 18px !important;
  }

  .charm-chain-link:nth-child(3) { top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .lucky-charm-attachment,
  .charm-image,
  .lucky-charm-touch-target::before,
  .lucky-charm-touch-target::after {
    animation: none;
  }

  .lucky-star,
  .lucky-charm-heart {
    display: none;
  }

  .charm-image {
    filter: drop-shadow(0 0 6px rgb(255 215 91 / .55)) drop-shadow(0 0 8px rgb(49 255 165 / .18));
  }

  .lucky-charm-touch-target::before {
    opacity: .24;
  }

  .lucky-charm-touch-target::after {
    display: none;
  }

  .lucky-charm-attachment.is-squishing .charm-image {
    animation: lucky-charm-reduced-feedback 180ms ease-out;
  }

  .lucky-charm-attachment.is-squishing {
    animation: none;
  }
}