/* PlayDreamLab site styles: theme variables (night + day), shared classes, header/footer, home, static pages.
   The game kit only CONSUMES these variables and the shared .pdl-* classes; it never redefines them. */

/* ---------- self-hosted fonts (SIL OFL 1.1, licence files beside them) ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('fonts/fredoka-latin-wght.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-wght.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- theme variables ---------- */
:root,
[data-theme=night] {
  color-scheme: dark;
  --bg: #1b0a45;
  --bg-2: #4a189c;
  --aurora-1: rgba(120, 214, 250, .22);
  --aurora-2: rgba(190, 90, 245, .34);
  --aurora-3: rgba(255, 170, 40, .18);
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .10);
  --surface-solid: #26105c;
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);
  --text: #ffffff;
  --text-dim: #cdbff0;
  --mint: #5fe6cf;
  --peach: #ffa62b;
  --lilac: #c98bff;
  --sky: #8fdcf7;
  --accent: #ffb52e;
  --accent-ink: #3a0f73;
  --danger: #ff5a68;
  --radius: 12px;
  --radius-lg: 22px;
  --shadow: 0 6px 20px rgba(6, 2, 24, .35);
  --shadow-lg: 0 24px 60px rgba(6, 2, 24, .55);
  --focus: #8fdcf7;
  --font-display: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --header-h: 64px;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --blur: 16px;
  --stars: .9;
  --glass-hi: rgba(255, 255, 255, .14);
}
[data-theme=day] {
  color-scheme: light;
  --bg: #eef9ff;
  --bg-2: #ffffff;
  --aurora-1: rgba(255, 228, 92, .78);
  --aurora-2: rgba(255, 150, 190, .50);
  --aurora-3: rgba(120, 220, 255, .50);
  --surface: rgba(255, 255, 255, .46);
  --surface-2: rgba(255, 255, 255, .66);
  --surface-solid: #ffffff;
  --border: rgba(122, 43, 224, .16);
  --border-strong: rgba(122, 43, 224, .40);
  --text: #2a0f6b;
  --text-dim: #5a4690;
  --mint: #0fb596;
  --peach: #ff8a1e;
  --lilac: #8a2be2;
  --sky: #0f8fdc;
  --accent: #ff9a1f;
  --accent-ink: #3a0f73;
  --danger: #ff3344;
  --shadow: 0 8px 28px rgba(90, 60, 200, .16), 0 2px 6px rgba(90, 60, 200, .10);
  --shadow-lg: 0 18px 50px rgba(90, 60, 200, .24), 0 4px 12px rgba(90, 60, 200, .12);
  --focus: #8a2be2;
  --stars: 0;
  --glass-hi: rgba(255, 255, 255, .95);
}
@media (max-width: 640px) {
  :root { --header-h: 56px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: linear-gradient(170deg, var(--bg) 0%, var(--bg) 30%, var(--bg-2) 100%) fixed;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
/* aurora glow + star dust behind everything */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  inset: -20%;
  background:
    radial-gradient(40% 32% at 18% 12%, var(--aurora-1), transparent 70%),
    radial-gradient(42% 36% at 82% 8%, var(--aurora-2), transparent 70%),
    radial-gradient(38% 30% at 70% 88%, var(--aurora-3), transparent 70%);
  filter: blur(10px);
}
body::after {
  opacity: var(--stars);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 54% 14%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 71% 42%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 76%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 44% 92%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 93% 18%, rgba(255,255,255,.6), transparent 60%);
  background-size: 520px 520px;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: pdl-aurora 28s ease-in-out infinite alternate; }
}
@keyframes pdl-aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3%, 2%, 0) rotate(4deg); }
  100% { transform: translate3d(-3%, 1%, 0) rotate(-3deg); }
}
.pdl-page, body > header, body > main, body > footer, #pdl-root { position: relative; z-index: 1; }
.pdl-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.pdl-page > main { flex: 1 0 auto; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--lilac) 45%, transparent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
html.pdl-theming *, html.pdl-theming *::before, html.pdl-theming *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}

/* ---------- shared classes (kit uses these) ---------- */
.pdl-container {
  width: 100%;
  max-width: 1264px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.pdl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.pdl-noscript {
  margin: 16px auto;
  max-width: 640px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
}
.pdl-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
  backdrop-filter: blur(var(--blur)) saturate(1.3);
  color: var(--text);
}

/* buttons: hover lift · press sink + darken + glow · 120 ms */
.pdl-btn {
  --btn-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .62em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow);
  transition: transform 120ms var(--ease), box-shadow 120ms ease, filter 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.pdl-btn .pdl-ico { width: 1.15em; height: 1.15em; flex: none; }
.pdl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong); }
.pdl-btn:active, .pdl-btn.is-pressed {
  transform: translateY(1px) scale(.97);
  filter: brightness(.9);
  box-shadow: 0 0 0 4px var(--btn-glow), 0 0 22px var(--btn-glow);
  transition-duration: 60ms;
}
.pdl-btn:disabled, .pdl-btn[aria-disabled=true] { opacity: .5; cursor: default; transform: none; filter: none; box-shadow: none; }
.pdl-btn--primary {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 58%);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 -2px 0 rgba(0,0,0,.12);
}
.pdl-btn--primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 -2px 0 rgba(0,0,0,.12); }
.pdl-btn--ghost {
  background: transparent;
  box-shadow: none;
}
.pdl-btn--ghost:hover { background: var(--surface-2); box-shadow: var(--shadow); }
.pdl-btn--icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: var(--radius);
}
.pdl-btn--icon .pdl-ico { width: 20px; height: 20px; }
.pdl-btn--sm { min-height: 36px; padding: .45em 1em; font-size: 14.5px; }
.pdl-btn--lg { min-height: 52px; padding: .75em 1.6em; font-size: 17.5px; }
@media (prefers-reduced-motion: reduce) {
  .pdl-btn, .pdl-btn:hover, .pdl-btn:active { transform: none; }
}

/* chips */
.pdl-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 28px;
  padding: .28em .8em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}
.pdl-chip .pdl-ico { width: 14px; height: 14px; flex: none; }
button.pdl-chip {
  min-height: 40px;
  padding: .45em 1.05em;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease), background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
button.pdl-chip:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-strong); }
button.pdl-chip:active { transform: translateY(1px) scale(.97); filter: brightness(.92); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
button.pdl-chip[aria-pressed=true] {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pdl-chip__n {
  min-width: 1.6em;
  padding: .12em .45em;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: .8em;
  text-align: center;
}
.pdl-chip--genre[data-genre=Arcade] { color: var(--peach); }
.pdl-chip--genre[data-genre=Puzzle] { color: var(--lilac); }
.pdl-chip--genre[data-genre=Skill] { color: var(--sky); }
.pdl-ico { width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
.pdl-header, [data-pdl-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
  backdrop-filter: blur(var(--blur)) saturate(1.4);
}
.pdl-header__bar { display: flex; align-items: center; gap: 12px; height: 100%; }
.pdl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--text);
  border-radius: 12px;
  min-height: 44px;
}
.pdl-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--lilac) 45%, transparent)); }
.pdl-mark--lg { width: 56px; height: 56px; }
.pdl-mark__star { transform-origin: 20px 19.8px; transition: transform 300ms var(--ease); }
.pdl-brand:hover .pdl-mark__star { transform: rotate(72deg) scale(1.25); }
.pdl-brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.pdl-brand__dream {
  background: linear-gradient(100deg, var(--sky), var(--lilac) 50%, var(--peach));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme=day] .pdl-brand__dream { background-image: linear-gradient(180deg, #ffbe1f, #ff7f1a); }
.pdl-brand--sm .pdl-mark { width: 28px; height: 28px; }
.pdl-brand--sm .pdl-brand__word { font-size: 19px; }
.pdl-nav { display: flex; align-items: center; gap: 4px; }
.pdl-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease, transform 120ms var(--ease);
}
.pdl-nav__link:hover { color: var(--text); background: var(--surface); transform: translateY(-1px); }
.pdl-nav__link:active { transform: translateY(1px); }
.pdl-nav__link[aria-current=page] { color: var(--text); background: var(--surface-2); }
.pdl-theme-toggle { margin-left: 4px; overflow: hidden; }
.pdl-theme-toggle .pdl-ico { transition: transform 360ms var(--ease), opacity 200ms ease; }
.pdl-theme-toggle:hover .pdl-ico { transform: rotate(-18deg) scale(1.1); }
[data-theme=night] .pdl-theme-toggle .pdl-ico--moon,
[data-theme=day] .pdl-theme-toggle .pdl-ico--sun { display: none; }
[data-theme=night] .pdl-theme-toggle { color: var(--peach); }
[data-theme=day] .pdl-theme-toggle { color: var(--lilac); }
@media (max-width: 640px) {
  .pdl-header__bar { gap: 6px; }
  .pdl-brand { gap: 8px; }
  .pdl-mark { width: 30px; height: 30px; }
  .pdl-brand__word { font-size: 19px; }
  .pdl-nav__link { padding: 0 10px; font-size: 15px; }
  .pdl-btn--icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
}
@media (max-width: 370px) {
  .pdl-header .pdl-brand__word { display: none; }
}
@media (max-width: 420px) {
  button.pdl-chip .pdl-chip__n { display: none; }
}

/* ---------- footer ---------- */
.pdl-footer, [data-pdl-footer] {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.pdl-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand nav" "copy nav";
  gap: 6px 24px;
  align-items: center;
  padding-block: 28px;
}
.pdl-footer__brand { grid-area: brand; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pdl-footer__brand .pdl-brand { margin-right: 0; }
.pdl-footer__tag { color: var(--text-dim); font-size: 14.5px; }
.pdl-footer__nav { grid-area: nav; display: flex; gap: 6px; flex-wrap: wrap; }
.pdl-footer__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
  color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color 120ms ease, background-color 120ms ease;
}
.pdl-footer__nav a:hover { color: var(--text); background: var(--surface); }
.pdl-footer__copy { grid-area: copy; color: var(--text-dim); font-size: 13.5px; }
@media (max-width: 640px) {
  .pdl-footer__inner { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "copy"; padding-block: 22px; }
  .pdl-footer__nav { margin-left: -12px; }
}

/* ---------- game pages: base only (the kit lays out the page) ---------- */
body.pdl-game-page { min-height: 100vh; min-height: 100svh; }
body.pdl-game-page #pdl-root { min-height: 100svh; display: flex; flex-direction: column; }
body.pdl-game-page .pdl-footer, body.pdl-game-page [data-pdl-footer] { margin-top: 40px; }

/* ---------- home: hero ---------- */
.pdl-hero { padding-top: clamp(14px, 2.2vh, 28px); }
.pdl-hero__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 3.2vh, 32px) clamp(20px, 3vw, 36px);
  border-radius: calc(var(--radius-lg) + 6px);
  isolation: isolate;
}
.pdl-hero__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 85% 40%, color-mix(in srgb, var(--peach) 26%, transparent), transparent 70%),
    radial-gradient(50% 80% at 8% 0%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 70%);
}
.pdl-hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.5vh, 16px); }
.pdl-hero__claims { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pdl-hero__claims .pdl-chip { background: var(--surface-2); color: var(--text); }
.pdl-hero__claims .pdl-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mint)); box-shadow: 0 0 8px var(--c, var(--mint)); }
.pdl-hero h1 {
  font-size: clamp(32px, min(3.9vw, 6vh), 54px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.pdl-hero h1 .pdl-glow {
  background: linear-gradient(100deg, var(--mint), var(--sky) 45%, var(--lilac) 75%, var(--peach));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme=day] .pdl-hero h1 .pdl-glow { background-image: linear-gradient(100deg, #ff7a1a, #ffab1f 38%, #c13fe6 72%, #7a2be0); }
.pdl-hero__lede { color: var(--text-dim); font-size: clamp(16px, 1.25vw, 18.5px); max-width: 40ch; }
.pdl-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pdl-hero__best { display: inline-flex; align-items: center; gap: 6px; color: var(--peach); font-weight: 600; font-size: 14.5px; }
.pdl-hero__best .pdl-ico { width: 16px; height: 16px; }
.pdl-hero__feature { position: relative; z-index: 2; margin: 0; }
.pdl-hero__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  width: min(100%, max(260px, calc((100svh - var(--header-h) - 330px) * 1.6)));
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 70% 30%, color-mix(in srgb, #ffb38a 50%, transparent), transparent 70%),
    linear-gradient(160deg, #2c1b66, #120d2a);
  box-shadow: 0 24px 60px color-mix(in srgb, #ffb38a 22%, rgba(6,2,24,.5)), 0 0 0 1px var(--border-strong);
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms ease;
}
.pdl-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdl-hero__art img.is-missing { display: none; }
.pdl-hero__art:hover { transform: translateY(-4px) rotate(-.4deg); }
.pdl-hero__art:active { transform: translateY(1px) scale(.99); filter: brightness(.94); }
.pdl-hero__cap {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  background: rgba(16, 10, 40, .55);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.pdl-hero__cap b { font-family: var(--font-display); font-weight: 600; font-size: 18px; display: block; line-height: 1.1; }
.pdl-hero__cap small { color: rgba(255,255,255,.75); font-size: 13px; }
.pdl-hero__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(16,10,40,.6); color: #ffd9c2;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
}
.pdl-hero__orbit {
  position: absolute; inset: -14px; z-index: -1; border-radius: calc(var(--radius-lg) + 14px);
  background: conic-gradient(from 0deg, var(--mint), var(--sky), var(--lilac), var(--peach), var(--mint));
  filter: blur(22px); opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
  .pdl-hero__orbit { animation: pdl-spin 14s linear infinite; }
}
@keyframes pdl-spin { to { transform: rotate(360deg); } }

/* ambient drift: star motes + petals at two depths (sway + rotate; static under reduced motion) */
.pdl-drift { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pdl-drift__p {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  animation: pdl-drift-rise var(--d) linear var(--dl) infinite;
}
.pdl-drift__p i {
  display: block;
  width: 100%;
  height: 100%;
  animation: pdl-drift-sway calc(var(--d) / 3.2) ease-in-out var(--dl) infinite alternate;
}
.pdl-drift__p--mote i { border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, var(--c) 40%, transparent 72%); }
.pdl-drift__p--petal i {
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #fff 0%, var(--c) 55%);
  opacity: .9;
}
.pdl-drift__p--far { opacity: .45; filter: blur(.6px); }
.pdl-drift__p--near { opacity: .9; }
[data-theme=day] .pdl-drift__p--mote i { background: radial-gradient(circle, #fff 0 22%, var(--c) 45%, transparent 72%); }
@keyframes pdl-drift-rise {
  0% { transform: translate3d(0, 40px, 0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(0, -160px, 0); opacity: 0; }
}
@keyframes pdl-drift-sway {
  0% { transform: translateX(calc(var(--sw) * -.5)) rotate(var(--r)); }
  100% { transform: translateX(calc(var(--sw) * .5)) rotate(calc(var(--r) + 140deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .pdl-drift__p, .pdl-drift__p i { animation: none; }
  .pdl-drift__p i { transform: rotate(var(--r)); }
}

/* ---------- home: games ---------- */
.pdl-section { padding-top: clamp(18px, 2.8vh, 40px); }
.pdl-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: clamp(12px, 2vh, 18px);
}
.pdl-section__title { font-size: clamp(24px, 2.2vw, 30px); display: flex; align-items: baseline; gap: 10px; }
.pdl-section__title small { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--text-dim); letter-spacing: 0; }
.pdl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pdl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.pdl-grid > [hidden] { display: none !important; }

.pdl-game-card {
  --card-accent: var(--lilac);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease), box-shadow 140ms ease, border-color 140ms ease, filter 120ms ease;
}
.pdl-game-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--border));
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--card-accent) 30%, transparent), 0 18px 46px color-mix(in srgb, var(--card-accent) 22%, transparent);
}
.pdl-game-card:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.94);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 0 28px color-mix(in srgb, var(--card-accent) 40%, transparent);
  transition-duration: 60ms;
}
.pdl-game-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.pdl-game-card__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 75% 15%, color-mix(in srgb, var(--card-accent) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 35%, #241a5a), #120d2a 85%);
  border-bottom: 1px solid var(--border);
}
.pdl-game-card__art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 30, .35));
  pointer-events: none;
}
.pdl-game-card__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms var(--ease-out);
}
.pdl-game-card__art img.is-missing, .pdl-mini__art img.is-missing { display: none; }
.pdl-game-card:hover .pdl-game-card__art img { transform: scale(1.05); }
.pdl-game-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.pdl-game-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pdl-game-card__title { font-size: 20px; line-height: 1.15; }
.pdl-game-card__blurb { color: var(--text-dim); font-size: 14.5px; line-height: 1.45; }
.pdl-game-card__controls { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-dim); font-size: 12.5px; }
.pdl-game-card__ctl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pdl-game-card__ctl .pdl-ico { width: 16px; height: 16px; color: var(--card-accent); }
[data-theme=day] .pdl-game-card__ctl .pdl-ico { color: var(--text-dim); }
.pdl-game-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.pdl-game-card__best {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--peach); font-weight: 600; font-size: 13px; line-height: 1.3;
}
.pdl-game-card__best .pdl-ico { width: 15px; height: 15px; }
.pdl-game-card__play { margin-left: auto; }
.pdl-game-card:hover .pdl-game-card__play { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 50%, transparent); }
.pdl-game-card:active .pdl-game-card__play { transform: translateY(1px) scale(.97); filter: brightness(.9); }

@media (prefers-reduced-motion: no-preference) {
  .pdl-ready .pdl-game-card { animation: pdl-card-in 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .pdl-ready .pdl-game-card.pdl-pop { animation: pdl-card-pop 300ms var(--ease) both; animation-delay: calc(var(--pop-i, 0) * 35ms); }
}
@keyframes pdl-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes pdl-card-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@media (prefers-reduced-motion: reduce) {
  .pdl-game-card, .pdl-game-card:hover, .pdl-game-card:active { transform: none; }
  .pdl-game-card:hover .pdl-game-card__art img { transform: none; }
}

/* continue playing */
.pdl-recent__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.pdl-mini {
  --card-accent: var(--lilac);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform 120ms var(--ease), background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.pdl-mini:hover { transform: translateY(-3px); background: var(--surface-2); border-color: color-mix(in srgb, var(--card-accent) 50%, var(--border)); box-shadow: var(--shadow); }
.pdl-mini:active { transform: translateY(1px) scale(.98); filter: brightness(.94); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-accent) 40%, transparent); }
.pdl-mini__art {
  position: relative; flex: none; width: 88px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 45%, #241a5a), #120d2a);
}
.pdl-mini__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdl-mini__text { display: flex; flex-direction: column; min-width: 0; }
.pdl-mini__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.pdl-mini__sub { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* studio strip */
.pdl-studio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 26px;
  padding: clamp(20px, 3vw, 30px);
}
.pdl-studio h2 { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 4px; }
.pdl-studio p { color: var(--text-dim); max-width: 62ch; }
.pdl-studio__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) {
  .pdl-studio { grid-template-columns: 1fr; }
}

/* ---------- static pages ---------- */
.pdl-doc { padding-top: clamp(24px, 5vh, 56px); }
.pdl-doc__card { max-width: 780px; margin-inline: auto; padding: clamp(22px, 4vw, 44px); }
.pdl-doc__eyebrow { color: var(--mint); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
[data-theme=day] .pdl-doc__eyebrow { color: var(--lilac); }
.pdl-doc h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; }
.pdl-doc h2 { font-size: 21px; margin: 30px 0 8px; }
.pdl-doc p, .pdl-doc li { color: var(--text-dim); font-size: 16.5px; }
.pdl-doc p + p { margin-top: 10px; }
.pdl-doc .pdl-lede { color: var(--text); font-size: 18.5px; }
.pdl-doc ul { margin: 8px 0 0; padding-left: 1.2em; }
.pdl-doc li + li { margin-top: 6px; }
.pdl-doc strong { color: var(--text); font-weight: 600; }
.pdl-doc code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .88em; padding: .1em .4em; border-radius: 6px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.pdl-doc a:not(.pdl-btn) { color: var(--sky); text-underline-offset: 3px; }
[data-theme=day] .pdl-doc a:not(.pdl-btn) { color: var(--lilac); }
.pdl-checks { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.pdl-checks li { display: flex; gap: 10px; align-items: flex-start; }
.pdl-checks li::before {
  content: ''; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 22%, transparent) center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%237cf5c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=day] .pdl-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%230f9a6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pdl-clear {
  margin-top: 26px; padding: 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.pdl-clear p { flex: 1 1 260px; margin: 0; }
.pdl-btn--danger { --btn-glow: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--text); }
.pdl-btn--danger:hover { background: color-mix(in srgb, var(--danger) 26%, transparent); }
.pdl-status { flex-basis: 100%; min-height: 1.5em; color: var(--mint) !important; font-weight: 600; }
[data-theme=day] .pdl-status { color: #0f8a62 !important; }

.pdl-game-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin-top: 12px !important; }
.pdl-game-list li + li { margin-top: 0; }
.pdl-game-list a {
  --card-accent: var(--lilac);
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  color: var(--text) !important; text-decoration: none;
  transition: transform 120ms var(--ease), background-color 120ms ease, border-color 120ms ease;
}
.pdl-game-list a:hover { transform: translateY(-2px); background: var(--surface-2); border-color: color-mix(in srgb, var(--card-accent) 50%, var(--border)); }
.pdl-game-list a:active { transform: translateY(1px) scale(.98); }
.pdl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent); box-shadow: 0 0 10px var(--card-accent); flex: none; }
.pdl-game-list__t { font-family: var(--font-display); font-weight: 600; }
.pdl-game-list__g { margin-left: auto; color: var(--text-dim); font-size: 13px; }

.pdl-lost { text-align: center; }
.pdl-doc .pdl-lost__code {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(80px, 14vw, 150px); line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--mint), var(--sky) 40%, var(--lilac) 70%, var(--peach));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 6px 0 10px;
}
.pdl-lost .pdl-mark--lg { margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .pdl-lost .pdl-mark--lg { animation: pdl-bob 3.2s ease-in-out infinite; }
}
@keyframes pdl-bob { 50% { transform: translateY(-8px) rotate(-6deg); } }
.pdl-lost__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pdl-lost h2 { text-align: left; }

/* ---------- pop-up: backdrop fade + panel scale-in with overshoot (≈200 ms) ---------- */
.pdl-pop-layer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.pdl-pop-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 6, 30, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.pdl-pop-panel {
  position: relative;
  width: min(100%, 400px);
  padding: 26px 26px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.82) translateY(8px);
  transition: transform 210ms var(--ease), opacity 160ms ease;
}
.pdl-pop-title { font-size: 24px; }
.pdl-pop-text { color: var(--text-dim); }
.pdl-pop-panel .pdl-btn { margin-top: 8px; min-width: 120px; }
.pdl-pop-layer.is-open .pdl-pop-backdrop { opacity: 1; }
.pdl-pop-layer.is-open .pdl-pop-panel { opacity: 1; transform: none; }
.pdl-pop-layer.is-closing .pdl-pop-backdrop { opacity: 0; transition-duration: 180ms; }
.pdl-pop-layer.is-closing .pdl-pop-panel { opacity: 0; transform: scale(.9); transition: transform 180ms ease-in, opacity 180ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .pdl-pop-panel, .pdl-pop-layer.is-closing .pdl-pop-panel { transform: none; transition: opacity 150ms ease; }
}

/* ---------- portal-out overlay (drawn in code by site.js) ---------- */
.pdl-portal { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2000; pointer-events: all; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .pdl-hero__panel { grid-template-columns: 1fr; }
  .pdl-hero__feature { width: 100%; max-width: 520px; }
  .pdl-hero__art { width: 100%; }
  .pdl-hero h1 { max-width: 18ch; }
}
@media (max-width: 640px) {
  .pdl-section__head { flex-direction: column; align-items: flex-start; }
  .pdl-filters { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  button.pdl-chip { justify-content: center; padding-inline: .4em; font-size: 14.5px; gap: .3em; }
  .pdl-hero__actions { width: 100%; }
  .pdl-hero__actions .pdl-btn { flex: 1 1 auto; }
}

/* skip link */
.pdl-skip { position: fixed; left: 12px; top: -80px; z-index: 3000; }
.pdl-skip:focus { top: 10px; }

/* ---------- bright palette extras (2026-11-12): sun-orange fill + purple outline ---------- */
[data-theme=day] .pdl-btn--primary {
  background-image: linear-gradient(180deg, #ffd23f 0%, #ffab1f 48%, #ff8a1e 100%);
  box-shadow: 0 0 0 2px #8a2be2, 0 8px 20px rgba(138, 43, 226, .28), inset 0 -2px 0 rgba(0, 0, 0, .10);
}
[data-theme=day] .pdl-btn--primary:hover {
  box-shadow: 0 0 0 2px #8a2be2, 0 14px 30px rgba(138, 43, 226, .36), inset 0 -2px 0 rgba(0, 0, 0, .10);
}

/* ---------- bright palette v2 (2026-11-12): sky page, rainbow, purple-outlined lettering and cards ---------- */
[data-theme=day] body::before {
  background:
    radial-gradient(circle at 8% 118%, transparent 0 44%, rgba(190, 110, 255, .70) 44.5% 46.5%, rgba(110, 200, 255, .72) 46.5% 48.5%, rgba(120, 235, 170, .70) 48.5% 50.5%, rgba(255, 238, 110, .80) 50.5% 52.5%, rgba(255, 180, 90, .76) 52.5% 54.5%, rgba(255, 120, 150, .70) 54.5% 56.5%, transparent 57%),
    radial-gradient(circle at 104% 96%, transparent 0 30%, rgba(190, 110, 255, .46) 30.4% 31.6%, rgba(110, 200, 255, .48) 31.6% 32.8%, rgba(120, 235, 170, .46) 32.8% 34%, rgba(255, 238, 110, .54) 34% 35.2%, rgba(255, 180, 90, .50) 35.2% 36.4%, rgba(255, 120, 150, .46) 36.4% 37.6%, transparent 38%),
    radial-gradient(40% 32% at 18% 12%, var(--aurora-1), transparent 70%),
    radial-gradient(42% 36% at 82% 8%, var(--aurora-2), transparent 70%),
    radial-gradient(38% 30% at 70% 88%, var(--aurora-3), transparent 70%);
}
[data-theme=day] .pdl-hero h1 {
  color: #ffffff;
  -webkit-text-stroke: .17em #7a2be0;
  paint-order: stroke fill;
  text-shadow: 0 .09em 0 #4a1aa8;
  letter-spacing: .012em;
  line-height: 1.14;
}
[data-theme=day] .pdl-hero h1 .pdl-glow {
  background-image: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #ffb21f; -webkit-text-fill-color: #ffb21f;
}
[data-theme=day] .pdl-card, [data-theme=day] .pdl-game-card { border: 2px solid rgba(122, 43, 224, .30); }
[data-theme=day] .pdl-hero__art {
  background:
    radial-gradient(70% 70% at 70% 30%, rgba(255, 210, 63, .45), transparent 70%),
    linear-gradient(160deg, #6fd0fa, #2aa5f5);
  box-shadow: 0 9px 0 rgba(122, 43, 224, .30), 0 24px 60px rgba(30, 70, 170, .30), 0 0 0 3px #ffffff, 0 0 0 6px #8a2be2;
}
[data-theme=day] .pdl-game-card__art, [data-theme=day] .pdl-mini__art {
  background:
    radial-gradient(80% 90% at 75% 15%, color-mix(in srgb, var(--card-accent) 55%, transparent), transparent 70%),
    linear-gradient(160deg, #8a3df0, #5b1fb8 85%);
}

/* a thin rainbow line under the header (bright look) */
[data-theme=day] .pdl-header::after, [data-theme=day] [data-pdl-header]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #ff7896, #ffb45a, #ffe85a, #6fe3a0, #6ec8ff, #be6eff);
}

/* ---------- rainbow logo (2026-11-12): the whole wordmark is one rainbow; the flask mark uses the same six colours ---------- */
.pdl-brand__word {
  background-image: linear-gradient(90deg, #ff7aa2, #ffb45a 20%, #ffe36e 40%, #7de8a8 60%, #7cc8ff 80%, #c58bff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.pdl-brand__word .pdl-brand__dream, [data-theme=day] .pdl-brand__word .pdl-brand__dream {
  background: none; background-image: none; color: transparent; -webkit-text-fill-color: transparent;
}
[data-theme=day] .pdl-brand__word {
  background-image: linear-gradient(90deg, #ff3d6e, #ff8a1e 20%, #f2a900 40%, #19b86a 60%, #1e9be9 80%, #8a2be2);
  filter: drop-shadow(0 1px 0 rgba(74, 26, 168, .28));
}

/* ---------- rainbow liquid glass (2026-11-12): translucent blurred surfaces, iridescent rims, glossy highlights ---------- */
[data-theme=day] { --blur: 22px; }
[data-theme=day] body::before {
  background:
    radial-gradient(circle at 8% 118%, transparent 0 44%, rgba(190, 110, 255, .70) 44.5% 46.5%, rgba(110, 200, 255, .72) 46.5% 48.5%, rgba(120, 235, 170, .70) 48.5% 50.5%, rgba(255, 238, 110, .80) 50.5% 52.5%, rgba(255, 180, 90, .76) 52.5% 54.5%, rgba(255, 120, 150, .70) 54.5% 56.5%, transparent 57%),
    radial-gradient(circle at 104% 96%, transparent 0 30%, rgba(190, 110, 255, .46) 30.4% 31.6%, rgba(110, 200, 255, .48) 31.6% 32.8%, rgba(120, 235, 170, .46) 32.8% 34%, rgba(255, 238, 110, .54) 34% 35.2%, rgba(255, 180, 90, .50) 35.2% 36.4%, rgba(255, 120, 150, .46) 36.4% 37.6%, transparent 38%),
    radial-gradient(40% 32% at 18% 12%, var(--aurora-1), transparent 70%),
    radial-gradient(42% 36% at 82% 8%, var(--aurora-2), transparent 70%),
    radial-gradient(38% 30% at 70% 88%, var(--aurora-3), transparent 70%),
    radial-gradient(30% 26% at 6% 60%, rgba(120, 235, 170, .42), transparent 70%),
    radial-gradient(30% 28% at 96% 52%, rgba(190, 110, 255, .40), transparent 70%);
}
/* glass cards */
[data-theme=day] .pdl-card, [data-theme=day] .pdl-game-card {
  border: 1px solid rgba(255, 255, 255, .88);
  background:
    radial-gradient(130% 70% at 0% 0%, rgba(255, 255, 255, .80), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .32));
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 10px 34px rgba(90, 60, 200, .18), 0 2px 8px rgba(90, 60, 200, .10), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -12px 26px rgba(255, 255, 255, .20);
}
[data-theme=day] .pdl-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none; opacity: .92;
  background: conic-gradient(from 210deg, #ff7aa2, #ffb45a, #ffe36e, #7de8a8, #7cc8ff, #c58bff, #ff7aa2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
[data-theme=day] .pdl-game-card:hover {
  border-color: #ffffff;
  box-shadow: 0 20px 54px rgba(90, 60, 200, .26), 0 4px 12px rgba(90, 60, 200, .12), inset 0 1px 0 #ffffff, inset 0 -12px 26px rgba(255, 255, 255, .30);
}
[data-theme=day] .pdl-doc__card {
  background:
    radial-gradient(130% 70% at 0% 0%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .64));
}
/* glass header */
[data-theme=day] .pdl-header, [data-theme=day] [data-pdl-header] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36));
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  border-bottom-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 24px rgba(90, 60, 200, .10);
}
/* glass chips; the active one is a rainbow pill */
[data-theme=day] .pdl-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .44));
  border-color: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(90, 60, 200, .10);
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
}
[data-theme=day] button.pdl-chip[aria-pressed=true] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ff8fb1, #ffbd6b 22%, #ffe676 42%, #86eab0 62%, #86cdff 80%, #c99bff);
  color: #2a0f6b; border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(150, 90, 240, .30);
}
/* glass buttons; the primary keeps the sun-orange fill, with a liquid highlight and a rainbow ring */
[data-theme=day] .pdl-btn {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .46));
  border-color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 0 #ffffff, 0 6px 18px rgba(90, 60, 200, .16);
}
[data-theme=day] .pdl-btn--primary {
  background-color: #ff9a1f;
  background-image: radial-gradient(120% 95% at 28% 0%, rgba(255, 255, 255, .80), rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #ffd23f 0%, #ffab1f 48%, #ff8a1e 100%);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 8px rgba(214, 90, 0, .35), 0 8px 22px rgba(255, 138, 30, .38);
}
[data-theme=day] .pdl-btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 8px rgba(214, 90, 0, .35), 0 14px 30px rgba(255, 138, 30, .48);
}
[data-theme=day] .pdl-btn--primary::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: linear-gradient(90deg, #ff4f86, #ff9a1f 22%, #ffd23f 42%, #3fdc8f 62%, #37b6ff 80%, #a65bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* headline: the highlighted words are filled with the rainbow, still inside the purple outline */
[data-theme=day] .pdl-hero h1 .pdl-glow { display: inline-block; position: relative; }
[data-theme=day] .pdl-hero h1 .pdl-glow::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap;
  -webkit-text-stroke: 0 transparent; text-shadow: none;
  background-image: linear-gradient(90deg, #ff4f86, #ff9a1f 22%, #ffd23f 42%, #3fdc8f 62%, #37b6ff 80%, #a65bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* the hidden skip link keeps its fixed position (the glass button rule must not pull it into the flow) */
[data-theme=day] .pdl-skip { position: fixed; }

/* ---------- game windows (2026-11-12): mixed-size grid; art fills the window, title + Play sit on a glass bar ---------- */
:root, [data-theme=night] { --cap-bg: linear-gradient(180deg, rgba(40, 20, 100, .62), rgba(24, 10, 70, .72)); --cap-border: rgba(255, 255, 255, .20); --cap-hi: rgba(255, 255, 255, .16); }
[data-theme=day] { --cap-bg: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .60)); --cap-border: rgba(255, 255, 255, .95); --cap-hi: #ffffff; }
.pdl-grid--games {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 27vh, 232px);
  grid-auto-flow: dense;
}
.pdl-grid--games .pdl-game-card { position: relative; display: block; min-width: 0; min-height: 0; }
.pdl-grid--games .pdl-game-card[data-size=big]  { grid-column: span 2; grid-row: span 2; }
.pdl-grid--games .pdl-game-card[data-size=wide] { grid-column: span 2; }
.pdl-grid--games .pdl-game-card[data-size=tall] { grid-row: span 2; }
.pdl-grid--games .pdl-game-card__art { position: absolute; inset: 0; aspect-ratio: auto; }
.pdl-grid--games .pdl-game-card__body {
  position: absolute; inset: 0; z-index: 2; flex: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto auto 10px;
  column-gap: 10px; row-gap: 0; padding: 10px;
}
.pdl-grid--games .pdl-game-card__body::before {
  content: ""; grid-column: 1 / -1; grid-row: 3 / 7; z-index: 0; border-radius: 16px;
  background: var(--cap-bg); border: 1px solid var(--cap-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: 0 6px 20px rgba(30, 14, 100, .26), inset 0 1px 0 var(--cap-hi);
}
.pdl-grid--games .pdl-game-card__head, .pdl-grid--games .pdl-game-card__foot { display: contents; }
.pdl-grid--games .pdl-chip--genre { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; z-index: 1; }
.pdl-grid--games .pdl-game-card__best {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: start; z-index: 1; max-width: 100%;
  padding: .32em .8em; border-radius: 999px; background: var(--cap-bg); border: 1px solid var(--cap-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdl-grid--games .pdl-game-card__title { grid-column: 1; grid-row: 3; z-index: 1; padding: 10px 0 0 14px; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdl-grid--games .pdl-game-card__blurb { grid-column: 1; grid-row: 4; z-index: 1; padding: 3px 0 0 14px; display: none; font-size: 13.5px; line-height: 1.35; }
.pdl-grid--games .pdl-game-card__controls { grid-column: 1; grid-row: 5; z-index: 1; padding: 5px 0 0 14px; display: none; }
.pdl-grid--games .pdl-game-card__play { grid-column: 2; grid-row: 3 / 7; align-self: center; z-index: 1; margin: 0 12px 0 0; }
.pdl-grid--games .pdl-game-card[data-size=wide] .pdl-game-card__blurb,
.pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__blurb,
.pdl-grid--games .pdl-game-card[data-size=big] .pdl-game-card__blurb { display: block; }
.pdl-grid--games .pdl-game-card[data-size=big] .pdl-game-card__controls { display: flex; }
.pdl-grid--games .pdl-game-card[data-size=wide] .pdl-game-card__title, .pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__title { font-size: 21px; }
.pdl-grid--games .pdl-game-card[data-size=big] .pdl-game-card__title { font-size: 27px; padding-top: 12px; }
.pdl-grid--games .pdl-game-card[data-size=big] .pdl-game-card__blurb { font-size: 15px; }
.pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__play { grid-row: 3 / 4; align-self: end; }
@media (max-width: 960px) {
  .pdl-grid--games { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 24vh, 210px); }
}
@media (max-width: 520px) {
  .pdl-grid--games { gap: 10px; }
  .pdl-grid--games .pdl-game-card__body { padding: 8px; column-gap: 6px; }
  .pdl-grid--games .pdl-game-card__title { font-size: 16px; padding-left: 10px; }
  .pdl-grid--games .pdl-game-card[data-size=small] .pdl-game-card__play > span:not(.pdl-ico),
  .pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__play > span:not(.pdl-ico) { display: none; }
  .pdl-grid--games .pdl-game-card__play { margin-right: 8px; padding-inline: .8em; }
  .pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__blurb { display: none; }
  .pdl-grid--games .pdl-game-card__best { display: none; }
}

/* game windows: Play sits inside the bar on tall windows; titles wrap on phones instead of being cut */
.pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__title { padding: 15px 0 7px 14px; }
.pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__play { grid-row: 3 / 4; align-self: center; margin-top: 8px; }
.pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__blurb { padding-top: 0; }
@media (max-width: 520px) {
  .pdl-grid--games .pdl-game-card__title { white-space: normal; line-height: 1.12; }
  .pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__title { padding: 10px 0 0 10px; }
  .pdl-grid--games .pdl-game-card[data-size=tall] .pdl-game-card__play { margin-top: 0; grid-row: 3 / 7; }
}

/* ---------- logo v3 (2026-11-12): game-logo lettering — rainbow fill, purple outline, glossy top; flask badge ---------- */
[data-theme] .pdl-brand__word {
  position: relative;
  font-weight: 700; letter-spacing: .015em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #6a25d6; -webkit-text-fill-color: #6a25d6;
  -webkit-text-stroke: .2em #6a25d6; paint-order: stroke fill;
  text-shadow: 0 .09em 0 #43189c;
  filter: none;
  padding: 0 .12em;
}
[data-theme] .pdl-brand__word .pdl-brand__dream { background: none; color: inherit; -webkit-text-fill-color: inherit; }
[data-theme] .pdl-brand__word::before, [data-theme] .pdl-brand__word::after {
  content: "PlayDreamLab"; position: absolute; left: .12em; top: 0; white-space: nowrap; pointer-events: none;
  -webkit-text-stroke: 0 transparent; text-shadow: none;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
[data-theme] .pdl-brand__word::before { background-image: linear-gradient(90deg, #ff5c93, #ffa63d 20%, #ffe04a 40%, #5fe39a 60%, #4fbcff 80%, #c08bff); }
[data-theme] .pdl-brand__word::after { background-image: linear-gradient(180deg, rgba(255, 255, 255, .62) 10%, rgba(255, 255, 255, 0) 52%); }
[data-theme=night] .pdl-brand__word { color: #ffffff; -webkit-text-fill-color: #ffffff; -webkit-text-stroke-color: #ffffff; text-shadow: 0 .09em 0 rgba(10, 4, 40, .55); }
.pdl-header .pdl-brand__word { font-size: 26px; }
.pdl-header .pdl-mark { width: 40px; height: 40px; }
.pdl-mark__star { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) {
  .pdl-header .pdl-brand__word { font-size: 20px; }
  .pdl-header .pdl-mark { width: 34px; height: 34px; }
}

/* ---------- smooth cursor (2026-11-12): nothing changes position on hover, and far fewer live blurs ---------- */
/* 1. hover never moves a hit box (a card that lifts slides out from under the cursor and flickers) — it glows instead */
.pdl-btn:hover, button.pdl-chip:hover, .pdl-nav__link:hover, .pdl-nav__link:active, .pdl-hero__art:hover, .pdl-hero__art:active,
.pdl-mini:hover, .pdl-game-list a:hover, .pdl-game-card:hover, .pdl-game-card:active,
.pdl-game-card:hover .pdl-game-card__play, .pdl-game-card:active .pdl-game-card__play { transform: none; }
.pdl-btn, button.pdl-chip, .pdl-nav__link, .pdl-hero__art, .pdl-mini, .pdl-game-list a, .pdl-game-card, .pdl-game-card__play {
  transition: box-shadow 180ms ease-out, filter 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}
.pdl-btn:hover { filter: brightness(1.05) saturate(1.06); }
.pdl-game-card:hover .pdl-game-card__play { filter: brightness(1.06) saturate(1.08); }
.pdl-game-card:active { filter: brightness(.96); }
.pdl-btn:active, .pdl-btn.is-pressed { transition-duration: 60ms; }
.pdl-game-card__art img { transition: transform 520ms cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.pdl-game-card:hover .pdl-game-card__art img { transform: scale(1.04); }
.pdl-hero__art img { transition: transform 520ms cubic-bezier(.22, 1, .36, 1); }
.pdl-hero__art:hover img { transform: scale(1.03); }
.pdl-game-card { contain: layout paint; }
/* 2. the backdrop no longer moves, so glass over it is drawn once instead of every frame */
body::before { animation: none !important; }
/* 3. blur only where it shows: header, hero panel and text cards. Chips, buttons, game windows and their bars are plain glass. */
[data-theme=day] .pdl-chip, [data-theme=day] .pdl-btn, .pdl-grid--games .pdl-game-card,
.pdl-grid--games .pdl-game-card__body::before, .pdl-grid--games .pdl-game-card__best { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme=day] .pdl-chip { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)); }
[data-theme=day] .pdl-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)); }
[data-theme=day] .pdl-btn--primary {
  background-color: #ff9a1f;
  background-image: radial-gradient(120% 95% at 28% 0%, rgba(255, 255, 255, .80), rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #ffd23f 0%, #ffab1f 48%, #ff8a1e 100%);
}
:root, [data-theme=night] { --cap-bg: linear-gradient(180deg, rgba(44, 22, 110, .86), rgba(26, 12, 76, .90)); }
[data-theme=day] { --cap-bg: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .80)); }
[data-theme=day] .pdl-header, [data-theme=day] [data-pdl-header] { -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
@media (prefers-reduced-motion: reduce) { .pdl-game-card:hover .pdl-game-card__art img, .pdl-hero__art:hover img { transform: none; } }

/* ---------- white header bar in the bright look (2026-11-12) ---------- */
[data-theme=day] .pdl-header, [data-theme=day] [data-pdl-header] {
  background: #ffffff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(122, 43, 224, .10);
  box-shadow: 0 4px 18px rgba(90, 60, 200, .10);
}

/* ---------- white footer bar in the bright look (2026-11-12) ---------- */
[data-theme=day] .pdl-footer, [data-theme=day] [data-pdl-footer] {
  background: #ffffff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-top: 1px solid rgba(122, 43, 224, .10);
  box-shadow: 0 -4px 18px rgba(90, 60, 200, .08);
}