/* Rücksprung-Streifen: sichtbar, aber nicht im Weg. Oben rechts, ueber
   allem - er muss auch ueber der Huelle und ueber Fenstern liegen, sonst
   verliert man den Rueckweg genau dann, wenn man ihn braucht. */
.pl524-verborgen{display:none!important}

.pl524-streifen{
  position:fixed;top:12px;right:12px;z-index:2147483000;
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 12px;border-radius:12px;
  background:rgba(14,21,18,.92);
  border:1px solid rgba(255,200,80,.45);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  font:600 13px/1.2 Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  color:#f6f8fc;max-width:min(92vw,420px);
}
.pl524-punkt{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#ffc857;box-shadow:0 0 0 0 rgba(255,200,87,.7);
  animation:pl524-puls 2s ease-out infinite;
}
@keyframes pl524-puls{
  0%{box-shadow:0 0 0 0 rgba(255,200,87,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,200,87,0)}
  100%{box-shadow:0 0 0 0 rgba(255,200,87,0)}
}
@media (prefers-reduced-motion:reduce){.pl524-punkt{animation:none}}
.pl524-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.pl524-knopf{
  appearance:none;border:0;cursor:pointer;white-space:nowrap;
  padding:7px 12px;border-radius:9px;font:inherit;font-weight:700;
  background:#ffc857;color:#10151b;
}
.pl524-knopf:hover{filter:brightness(1.08)}
.pl524-knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:560px){
  .pl524-streifen{left:12px;right:12px;max-width:none;justify-content:space-between}
  .pl524-text{display:none}
}

/* Während das Spiel noch bis zum Haltepunkt läuft, ist der Rückweg schon da,
   der Knopf aber noch ohne Wirkung - das soll man sehen. */
.pl524-wartet .pl524-knopf{opacity:.55;pointer-events:none}
.pl524-wartet .pl524-punkt{animation-duration:.9s}