/* PuniGames components. Colours, spacing, radii, lips and timings come from tokens.css. */

/* Button: a gummy shape sitting on its own lip. */
.pg-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: 14px var(--space-3);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--pink);
  color: var(--on-pink);
  box-shadow: var(--lip-pink);
  font: 600 17px/20px var(--font-brand);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-squash) var(--ease-out), box-shadow var(--duration-squash) var(--ease-out);
}
/* The gloss streak, as on the mascot's head. */
.pg-button::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 14px;
  width: 22px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--gloss);
  opacity: 0.75;
}
.pg-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--pink-deep); }
.pg-button:active { transform: translateY(4px) scale(1.03, 0.97); box-shadow: 0 2px 0 var(--pink-deep); }
.pg-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pg-button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Quiet variant: for the second action next to a pink one. */
.pg-button.pg-quiet {
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--lip-raised);
}
.pg-button.pg-quiet::before { display: none; }
.pg-button.pg-quiet:hover { box-shadow: var(--lip-raised); }
.pg-button.pg-quiet:active { box-shadow: none; }

/* Game tile: one game, its art, its name, its platforms. */
.pg-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-l);
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--lip-raised);
  text-decoration: none;
  transition: transform var(--duration-squash) var(--ease-out);
}
.pg-tile:hover { transform: translateY(-3px) rotate(-0.6deg); }
.pg-tile:active { transform: translateY(3px) scale(1.01, 0.99); }
.pg-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pg-tile-art {
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 500;
  object-fit: cover;
  border-radius: var(--radius-m);
}
.pg-tile-name { margin: 0; font: 600 28px/34px var(--font-brand); }
.pg-tile-pitch { margin: 0; color: var(--ink-muted); font: 400 17px/26px var(--font-brand); }
.pg-tile-platforms { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pg-chip {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--ground);
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-brand);
}
/* The newest game wears the logo's star. */
.pg-tile-new { position: relative; }
.pg-tile-new::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 22px;
  width: 26px;
  height: 26px;
  background: var(--spark);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Bubble field: the intro's background, behind a hero or a header. */
.pg-bubbles {
  position: relative;
  overflow: hidden;
  background-color: var(--ground);
  background-image:
    radial-gradient(circle at 12% 22%, var(--bubble) 0 14px, transparent 15px),
    radial-gradient(circle at 27% 70%, var(--bubble) 0 8px, transparent 9px),
    radial-gradient(circle at 46% 14%, var(--bubble) 0 5px, transparent 6px),
    radial-gradient(circle at 63% 82%, var(--bubble) 0 18px, transparent 19px),
    radial-gradient(circle at 78% 30%, var(--bubble) 0 10px, transparent 11px),
    radial-gradient(circle at 91% 64%, var(--bubble) 0 6px, transparent 7px),
    radial-gradient(circle at 37% 46%, var(--bubble) 0 4px, transparent 5px),
    radial-gradient(circle at 85% 8%, var(--bubble) 0 7px, transparent 8px);
  background-size: 360px 240px;
}

/* Logo lockup: the logo files, never redrawn. */
.pg-logo { display: block; height: auto; }
.pg-logo-header { width: 168px; }
.pg-logo-hero { width: min(560px, 80vw); }
.pg-mascot { display: block; width: 72px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .pg-button, .pg-tile { transition: none; }
  .pg-button:hover, .pg-button:active, .pg-tile:hover, .pg-tile:active { transform: none; }
}