/* Launcher (das Inhaltselement selbst) */
.stickman-launcher {
  text-align: center;
  padding: 2.5rem 1rem;
}
.stickman-launcher__title {
  margin: 0 0 1rem;
}
.stickman-launcher__btn {
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  padding: .85em 1.8em;
  color: #000;
  background: #fff;
  border: 3px solid #000;
  border-radius: 999px;
  box-shadow: 5px 5px 0 #000;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.stickman-launcher__btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.stickman-launcher__btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
.stickman-launcher__btn:focus-visible { outline: 3px solid #f5b400; outline-offset: 4px; }
.stickman-launcher__hint {
  margin: 1rem 0 0;
  font-size: .85rem;
  opacity: .7;
}

/* Spielmodus */
html.stickman-active,
html.stickman-active * {
  cursor: crosshair !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.stickman-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483646;
  pointer-events: none;
}
.stickman-hud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em 1.2em;
  max-width: calc(100vw - 24px);
  padding: .55em 1em;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, .85);
  border-radius: 10px;
}
.stickman-hud,
.stickman-hud * { cursor: default !important; }
.stickman-hud__help { opacity: .75; }
.stickman-hud button {
  font: inherit;
  font-weight: 700;
  color: #000;
  background: #f5b400;
  border: 0;
  border-radius: 6px;
  padding: .3em .8em;
  cursor: pointer !important;
}

/* Treffer, Einschusslöcher, Zerstörung */
.stickman-hole {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 32%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.15) 60%, transparent 72%);
  pointer-events: none;
  z-index: 2147483645;
}
.stickman-hole--scorch {
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  background: radial-gradient(circle, rgba(0,0,0,.75) 0 12%, rgba(30,20,10,.45) 30%, rgba(40,30,20,.18) 55%, transparent 72%);
}
/* Laser-Einschlag: glüht kurz nach und wird dann zum Brandfleck */
.stickman-hole--laser {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: radial-gradient(circle, #1a0a05 0 30%, rgba(90,30,10,.6) 45%, rgba(60,20,10,.2) 62%, transparent 74%);
}
.stickman-hole--laser::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, #ff6a3a 35%, rgba(255,40,20,.6) 55%, transparent 75%);
  box-shadow: 0 0 12px 4px rgba(255,50,20,.75);
  animation: stickman-burn 1.4s ease-out forwards;
}
@keyframes stickman-burn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.stickman-hit { animation: stickman-shake .18s linear; }
@keyframes stickman-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -3px 2px; }
  50% { translate: 3px -2px; }
  75% { translate: -2px -1px; }
}
.stickman-destroyed { visibility: hidden !important; }