/* =============================================================================================
   Homepage "Explore AI Prompts by Style / Concept" (prompt-category-links.html.twig, js/prompt-galaxy.js).
   Base = the plain list of buttons (no JS, crawlers). .pg-galaxy = the same links as stars of a lilac
   spiral galaxy across the full width, positioned by JS; the WebGL canvas (.pg-gl) draws the sky.
   ============================================================================================= */
.prompt-categories .pc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; }
.prompt-categories .pc-head a { white-space: nowrap; gap: 4px; }

.prompt-categories .pg-tools { display: flex; justify-content: flex-end; margin-top: 14px; position: relative; z-index: 2; }
.prompt-categories .pg-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #e9ddff;
  background: rgba(30, 18, 80, .55); border: 1px solid rgba(191, 104, 230, .45); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.prompt-categories .pg-toggle:hover, .prompt-categories .pg-toggle:focus-visible { color: #fff; border-color: #d070ff; background: rgba(176, 107, 255, .18); outline: none; }

.prompt-categories .pg-stage { position: relative; width: 100vw; height: clamp(460px, 44vw, 760px); margin-top: -10px; overflow: hidden; touch-action: pan-y; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
.prompt-categories .pg-stage:active { cursor: grabbing; }
.prompt-categories .pg-stage[hidden] { display: none; }
.prompt-categories .pg-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* without WebGL: a lilac nebula band painted in CSS */
.prompt-categories .pg-stage.pg-nogl::before { content: ''; position: absolute; inset: 18% 4%; border-radius: 50%; pointer-events: none; transform: rotate(-6deg);
  background: radial-gradient(ellipse at center, rgba(255, 217, 168, .45), rgba(208, 112, 255, .22) 18%, rgba(176, 107, 255, .12) 45%, transparent 70%); filter: blur(6px); }

.prompt-categories .pg-labels { position: absolute; inset: 0; }
.prompt-categories.pg-galaxy .pg-labels .pc-link { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; margin: 0; padding: .14em .5em; border: 0; border-radius: 99px;
  background: transparent; box-shadow: none; font-size: var(--fs, 13px); font-weight: 700; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; color: var(--c, #fff);
  text-shadow: 0 0 12px rgb(from var(--c, #fff) r g b / .6), 0 1px 3px rgba(10, 4, 30, .8); will-change: transform, opacity; transition: background .2s, box-shadow .2s, color .2s; }
.prompt-categories.pg-galaxy .pg-labels .pc-count { font-size: .6em; font-weight: 700; margin-left: .3em !important; opacity: .75; align-self: flex-start; }
.prompt-categories.pg-galaxy .pg-labels .pc-link.pg-back { pointer-events: none; }
.prompt-categories.pg-galaxy .pg-labels .pc-link:is(.pg-on, :focus-visible) { color: #fff; outline: none; background: rgb(from var(--c, #fff) r g b / .22);
  box-shadow: 0 0 0 1px var(--c, #fff), 0 0 24px rgb(from var(--c, #fff) r g b / .6); }

.prompt-categories .pg-hint { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(220, 205, 255, .6);
  pointer-events: none; transition: opacity .8s; }
.prompt-categories .pg-hint.gone { opacity: 0; }
.prompt-categories .pg-zoom { position: absolute; right: max(7%, 24px); bottom: 12%; z-index: 1001; display: flex; flex-direction: column; gap: 6px; }
.prompt-categories .pg-zoom button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; color: #e9ddff;
  background: rgba(30, 18, 80, .6); border: 1px solid rgba(191, 104, 230, .45); cursor: pointer; transition: background .2s, border-color .2s; }
.prompt-categories .pg-zoom button:hover, .prompt-categories .pg-zoom button:focus-visible { background: rgba(176, 107, 255, .25); border-color: #d070ff; outline: none; }

@media (max-width: 639px) {
  .prompt-categories .pg-stage { height: min(165vw, 760px); }
  .prompt-categories .pg-hint { font-size: 10px; bottom: 2.5%; }
  .prompt-categories .pg-zoom { right: 16px; bottom: 9%; }
  .prompt-categories .pg-zoom button { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .prompt-categories.pg-galaxy .pg-labels .pc-link { transition: none; }
}