/* Johnnyplay global polish — shared across hubs & mini-games */
:root {
  --jp-pink: #ff2d78;
  --jp-cyan: #00e5ff;
  --jp-ink: #0a0414;
  --jp-cream: #fff4fb;
  --jp-yellow: #ffe566;
  --jp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  background: rgba(255, 45, 120, 0.45);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--jp-cyan);
  outline-offset: 3px;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Nicers scrollbars where supported */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 45, 120, 0.55) rgba(10, 4, 20, 0.35);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(10, 4, 20, 0.35); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff4d8f, #c91858);
  border-radius: 999px;
  border: 2px solid rgba(10, 4, 20, 0.4);
}

.jp-skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--jp-ease);
}
.jp-skip:focus {
  transform: none;
  outline: 3px solid var(--jp-cyan);
}

.jp-home-fab {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, #ff4d8f, #ff2d78);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 45, 120, 0.35);
  transition: transform 0.15s var(--jp-ease), filter 0.15s ease;
}
.jp-home-fab:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  color: #fff;
}
.jp-home-fab:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}