/*
Theme Name: Promptifi Core
Theme URI: https://gud-boy.com/
Author: Promptifi
Author URI: https://gud-boy.com/
Description: Distributed companion-site theme framework for Gud-Girl and Gud-Boy.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: promptifi-core
*/

/*!
 * style.css
 * Promptifi Core — Living Glass Object Governor
 *
 * CODE STATUS: SYMBIOTIC CODE
 * SCOPE:
 * - gud-girl.com
 * - gud-boy.com
 *
 * COPY RULE:
 * - Use this exact file on both sites.
 *
 * TARGET:
 * /wp-content/themes/promptifi-core/style.css
 *
 * FULL FILE REWRITE — SPIRIT OVERHAUL / LIVING GLASS TECH OBJECT / CORNER ARTIFACT KILL / BRIGHT PINK BLUE LIFEBLOOD / SITEWIDE VISUAL UNITY
 */

/* =========================================================
   001 — ROOT SYSTEM TOKENS
========================================================= */

:root {
  color-scheme: dark;

  --pf-black: #000000;
  --pf-void: #030006;
  --pf-depth: #070012;

  --pf-text: #ffffff;
  --pf-text-soft: rgba(255, 255, 255, 0.82);
  --pf-text-faint: rgba(255, 255, 255, 0.58);

  --pf-accent: #18bfff;
  --pf-accent-hot: #00eaff;
  --pf-accent-core: #efffff;
  --pf-accent-deep: #005cff;

  --pf-accent-rgb: 24, 191, 255;
  --pf-accent-hot-rgb: 0, 234, 255;
  --pf-accent-core-rgb: 239, 255, 255;
  --pf-accent-deep-rgb: 0, 92, 255;

  --pf-cross-rgb: 255, 20, 157;
  --pf-blood-a-rgb: var(--pf-accent-rgb);
  --pf-blood-b-rgb: var(--pf-accent-hot-rgb);
  --pf-blood-c-rgb: var(--pf-accent-deep-rgb);

  --pf-shell: rgba(4, 10, 28, 0.66);
  --pf-shell-bright: rgba(var(--pf-accent-core-rgb), 0.15);
  --pf-glass: rgba(255, 255, 255, 0.12);
  --pf-glass-strong: rgba(255, 255, 255, 0.19);
  --pf-glass-deep: rgba(0, 0, 0, 0.22);

  --pf-border: rgba(255, 255, 255, 0.15);
  --pf-border-hot: rgba(var(--pf-accent-hot-rgb), 0.64);
  --pf-border-core: rgba(var(--pf-accent-core-rgb), 0.42);

  --pf-shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.38);
  --pf-shadow-heavy: 0 34px 110px rgba(0, 0, 0, 0.54);
  --pf-shadow-glow: 0 0 52px rgba(var(--pf-blood-a-rgb), 0.38);
  --pf-shadow-glow-hot: 0 0 96px rgba(var(--pf-blood-b-rgb), 0.32);

  --pf-radius-sm: 12px;
  --pf-radius-md: 20px;
  --pf-radius-lg: 32px;
  --pf-radius-xl: 48px;
  --pf-radius-device: clamp(30px, 4.4vw, 64px);
  --pf-radius-screen: clamp(22px, 3.2vw, 44px);

  --pf-header-height: 220px;
  --pf-stage-width: min(calc(100vw - 26px), 1260px);

  --pf-gap-viewer-submission: clamp(22px, 3vw, 44px);
  --pf-gap-submission-bridge: clamp(26px, 3.4vw, 52px);

  --pf-z-background: -5;
  --pf-z-background-image: -4;
  --pf-z-atmosphere: -3;
  --pf-z-shell: 1;
  --pf-z-bridge: 3;
  --pf-z-submission: 4;
  --pf-z-viewer: 5;
  --pf-z-header: 2147483000;

  --pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pf-ease-charge: cubic-bezier(0.16, 1, 0.3, 1);
  --pf-fast: 180ms var(--pf-ease);
  --pf-medium: 340ms var(--pf-ease);
  --pf-slow: 720ms var(--pf-ease-charge);
}

/* =========================================================
   002 — GUD-GIRL PALETTE
========================================================= */

html[data-site-mode="gud_girl"],
body[data-site-mode="gud_girl"],
body.promptifi-site-mode-girl,
.promptifi-site-shell--gud-girl {
  --pf-accent: #ff4fd8;
  --pf-accent-hot: #ff149d;
  --pf-accent-core: #fff3fb;
  --pf-accent-deep: #b000ff;

  --pf-accent-rgb: 255, 79, 216;
  --pf-accent-hot-rgb: 255, 20, 157;
  --pf-accent-core-rgb: 255, 243, 251;
  --pf-accent-deep-rgb: 176, 0, 255;

  --pf-cross-rgb: 0, 234, 255;
  --pf-blood-a-rgb: 255, 20, 157;
  --pf-blood-b-rgb: 255, 79, 216;
  --pf-blood-c-rgb: 176, 0, 255;

  --pf-void: #09000e;
  --pf-depth: #180020;
  --pf-shell: rgba(58, 0, 72, 0.58);
  --pf-shell-bright: rgba(255, 243, 251, 0.18);
  --pf-glass: rgba(255, 122, 232, 0.16);
  --pf-glass-strong: rgba(255, 190, 244, 0.22);
  --pf-glass-deep: rgba(38, 0, 48, 0.22);

  --pf-border-hot: rgba(255, 79, 216, 0.74);
  --pf-border-core: rgba(255, 243, 251, 0.48);
}

/* =========================================================
   003 — GUD-BOY PALETTE
========================================================= */

html[data-site-mode="gud_boy"],
body[data-site-mode="gud_boy"],
body.promptifi-site-mode-boy,
.promptifi-site-shell--gud-boy {
  --pf-accent: #18bfff;
  --pf-accent-hot: #00eaff;
  --pf-accent-core: #efffff;
  --pf-accent-deep: #005cff;

  --pf-accent-rgb: 24, 191, 255;
  --pf-accent-hot-rgb: 0, 234, 255;
  --pf-accent-core-rgb: 239, 255, 255;
  --pf-accent-deep-rgb: 0, 92, 255;

  --pf-cross-rgb: 255, 20, 157;
  --pf-blood-a-rgb: 0, 234, 255;
  --pf-blood-b-rgb: 24, 191, 255;
  --pf-blood-c-rgb: 0, 92, 255;

  --pf-void: #000611;
  --pf-depth: #001034;
  --pf-shell: rgba(0, 42, 116, 0.58);
  --pf-shell-bright: rgba(239, 255, 255, 0.18);
  --pf-glass: rgba(95, 224, 255, 0.16);
  --pf-glass-strong: rgba(178, 250, 255, 0.22);
  --pf-glass-deep: rgba(0, 20, 64, 0.22);

  --pf-border-hot: rgba(0, 234, 255, 0.74);
  --pf-border-core: rgba(239, 255, 255, 0.48);
}

/* =========================================================
   004 — ROOT NORMALIZATION
========================================================= */

html {
  box-sizing: border-box;
  min-width: 320px;
  min-height: 100%;
  overflow-x: clip;
  scroll-padding-top: var(--pf-header-height);
  background: var(--pf-void);
  color: var(--pf-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: geometricPrecision;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  min-width: 0;
}

body {
  position: relative;
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: auto;
  isolation: isolate;
  color: var(--pf-text);
  background:
    radial-gradient(circle at 50% -12%, rgba(var(--pf-accent-core-rgb), 0.30), transparent 29%),
    radial-gradient(circle at 15% 14%, rgba(var(--pf-blood-a-rgb), 0.34), transparent 36%),
    radial-gradient(circle at 86% 12%, rgba(var(--pf-blood-b-rgb), 0.28), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(var(--pf-blood-c-rgb), 0.18), transparent 54%),
    radial-gradient(circle at 50% 115%, rgba(var(--pf-cross-rgb), 0.16), transparent 48%),
    linear-gradient(180deg, var(--pf-depth) 0%, var(--pf-void) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: var(--pf-z-atmosphere);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(var(--pf-accent-core-rgb), 0.16), transparent 34%),
    radial-gradient(ellipse at 28% 42%, rgba(var(--pf-blood-a-rgb), 0.22), transparent 42%),
    radial-gradient(ellipse at 72% 48%, rgba(var(--pf-blood-b-rgb), 0.20), transparent 44%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--pf-blood-c-rgb), 0.14), transparent 48%),
    conic-gradient(
      from 210deg at 50% 52%,
      transparent,
      rgba(var(--pf-blood-a-rgb), 0.10),
      transparent,
      rgba(var(--pf-blood-b-rgb), 0.12),
      transparent,
      rgba(var(--pf-cross-rgb), 0.08),
      transparent
    );
  opacity: 0.94;
  mix-blend-mode: screen;
  filter: saturate(1.15);
  animation: pfLivingAtmosphere 22s var(--pf-ease) infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--pf-z-atmosphere);
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(var(--pf-accent-core-rgb), 0.075) 48%, transparent 63%),
    linear-gradient(rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 13px);
  background-size: 260% 100%, auto;
  opacity: 0.44;
  mix-blend-mode: screen;
  animation: pfSiteSheen 15s var(--pf-ease) infinite;
}

/* =========================================================
   005 — HARD CORNER ARTIFACT KILL
========================================================= */

[data-field],
[data-zone],
[data-field-boundary],
[data-visual-field],
[data-corner-lines],
[data-field-lines],
[class*="corner-line"],
[class*="corner_lines"],
[class*="field-line"],
[class*="field_lines"],
[class*="boundary-line"],
[class*="boundary_lines"],
.pf-field-lines,
.pf-corner-lines,
.pf-field-boundary,
.promptifi-visual-field,
.promptifi-field-boundary,
.promptifi-corner-lines,
.promptifi-primary-home__viewing-zone,
.promptifi-primary-home__submission-zone,
.promptifi-primary-home__bridge-zone,
.pf-viewing-window,
.pf-viewing-window__image-zone,
.pf-viewing-window__media-frame {
  outline: 0 !important;
}

[data-field]::before,
[data-field]::after,
[data-zone]::before,
[data-zone]::after,
[data-field-boundary]::before,
[data-field-boundary]::after,
[data-visual-field]::before,
[data-visual-field]::after,
[data-corner-lines]::before,
[data-corner-lines]::after,
[data-field-lines]::before,
[data-field-lines]::after,
[class*="corner-line"]::before,
[class*="corner-line"]::after,
[class*="corner_lines"]::before,
[class*="corner_lines"]::after,
[class*="field-line"]::before,
[class*="field-line"]::after,
[class*="field_lines"]::before,
[class*="field_lines"]::after,
[class*="boundary-line"]::before,
[class*="boundary-line"]::after,
[class*="boundary_lines"]::before,
[class*="boundary_lines"]::after,
.pf-field-lines::before,
.pf-field-lines::after,
.pf-corner-lines::before,
.pf-corner-lines::after,
.pf-field-boundary::before,
.pf-field-boundary::after,
.promptifi-visual-field::before,
.promptifi-visual-field::after,
.promptifi-field-boundary::before,
.promptifi-field-boundary::after,
.promptifi-corner-lines::before,
.promptifi-corner-lines::after,
.promptifi-primary-home__viewing-zone::before,
.promptifi-primary-home__viewing-zone::after,
.promptifi-primary-home__submission-zone::before,
.promptifi-primary-home__submission-zone::after,
.promptifi-primary-home__bridge-zone::before,
.promptifi-primary-home__bridge-zone::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   006 — BACKGROUND SYSTEM RESTORE
========================================================= */

.promptifi-primary-home__background-zone,
[data-background-zone="true"],
.pf-background-asset,
[data-background-asset="true"],
#pf-background-asset {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--pf-z-background-image) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  isolation: isolate !important;
  contain: layout paint style !important;
}

.pf-background-asset,
[data-background-asset="true"],
#pf-background-asset {
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--pf-accent-core-rgb), 0.18), transparent 30%),
    radial-gradient(circle at 50% 42%, rgba(var(--pf-blood-a-rgb), 0.18), transparent 46%),
    radial-gradient(circle at 50% 82%, rgba(var(--pf-blood-b-rgb), 0.12), transparent 52%),
    linear-gradient(180deg, var(--pf-depth), var(--pf-void)) !important;
}

.pf-background-asset__layer,
[data-background-layer] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.pf-background-asset__layer--image,
[data-background-layer="image"],
[data-background-layer="fallback-image"] {
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  mix-blend-mode: normal !important;
}

.pf-background-asset__image,
.pf-background-asset__layer--image img,
[data-background-image="true"],
[data-background-layer="image"] img,
[data-background-layer="fallback-image"] img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: clamp(112vh, 158vw, 180vh) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0.86 !important;
  filter:
    saturate(1.32)
    contrast(1.05)
    brightness(1.12)
    drop-shadow(0 0 44px rgba(var(--pf-blood-a-rgb), 0.34))
    drop-shadow(0 0 92px rgba(var(--pf-blood-b-rgb), 0.18)) !important;
  mix-blend-mode: normal !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.pf-background-asset__layer--shader,
[data-star-nest-layer="true"] {
  z-index: 2 !important;
  display: block !important;
  opacity: 0.20 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.12) contrast(0.94) brightness(0.9) !important;
}

.pf-background-asset__layer--aura {
  z-index: 6 !important;
  opacity: 0.76 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(var(--pf-accent-core-rgb), 0.14), transparent 26%),
    radial-gradient(circle at 50% 54%, rgba(var(--pf-blood-a-rgb), 0.18), transparent 42%),
    radial-gradient(circle at 50% 78%, rgba(var(--pf-blood-b-rgb), 0.12), transparent 52%) !important;
  mix-blend-mode: screen !important;
}

.pf-background-asset__layer--glass {
  z-index: 8 !important;
  opacity: 0.42 !important;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(var(--pf-accent-core-rgb), 0.12) 48%, transparent 63%),
    linear-gradient(rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 12px) !important;
  background-size: 260% 100%, auto !important;
  mix-blend-mode: screen !important;
  animation: pfSiteSheen 13s var(--pf-ease) infinite !important;
}

/* =========================================================
   007 — BASE MEDIA + ACCESSIBILITY
========================================================= */

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(var(--pf-accent-core-rgb), 0.96);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   008 — PAGE SHELL + STAGE
========================================================= */

#page,
.promptifi-site,
.wp-site-blocks,
.site {
  position: relative;
  z-index: var(--pf-z-shell);
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  isolation: isolate;
}

.promptifi-site-shell,
.promptifi-primary-home {
  position: relative;
  z-index: var(--pf-z-shell);
  width: 100%;
  min-height: 100vh;
  padding-bottom: 88px;
  isolation: isolate;
}

.promptifi-primary-home__stage,
.promptifi-primary-home {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 8px 10px 0;
  isolation: isolate;
}

.promptifi-primary-home__viewing-zone,
.promptifi-primary-home__submission-zone,
.promptifi-primary-home__bridge-zone {
  position: relative;
  width: 100%;
  max-width: var(--pf-stage-width);
  margin-inline: auto;
  isolation: isolate;
}

.promptifi-primary-home__viewing-zone {
  z-index: var(--pf-z-viewer);
}

.promptifi-primary-home__submission-zone {
  z-index: var(--pf-z-submission);
  margin-top: var(--pf-gap-viewer-submission);
}

.promptifi-primary-home__bridge-zone {
  z-index: var(--pf-z-bridge);
  display: grid;
  place-items: center;
  margin-top: var(--pf-gap-submission-bridge);
}

/* =========================================================
   009 — SHARED GLASS OBJECT LANGUAGE
========================================================= */

.pf-liquid-glass,
.pf-viewing-window__shell,
.pf-viewing-window__surface,
.pf-submission-form__module-boundary,
.pf-submission-form__boundary,
.pf-companion-bridge__button,
.pf-gud-boy-bridge__button,
.pf-gud-girl-bridge__button {
  border: 1px solid var(--pf-border-hot);
  background:
    radial-gradient(circle at 50% -16%, rgba(var(--pf-accent-core-rgb), 0.34), transparent 31%),
    radial-gradient(circle at 12% 18%, rgba(var(--pf-blood-a-rgb), 0.24), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(var(--pf-blood-b-rgb), 0.18), transparent 36%),
    radial-gradient(circle at 50% 118%, rgba(var(--pf-blood-c-rgb), 0.26), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    var(--pf-shell) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 42px rgba(var(--pf-blood-a-rgb), 0.18),
    inset 0 -30px 68px rgba(0, 0, 0, 0.20),
    0 0 24px rgba(var(--pf-blood-a-rgb), 0.42),
    0 0 72px rgba(var(--pf-blood-b-rgb), 0.24),
    var(--pf-shadow-heavy) !important;
  backdrop-filter: blur(20px) saturate(1.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
}

/* =========================================================
   010 — VIEWING WINDOW REAL OVERHAUL
========================================================= */

.pf-viewing-window {
  --pf-vw-image-height: clamp(360px, 56vw, 700px);
  position: relative;
  width: 100%;
  max-width: min(100%, 1160px);
  margin: 0 auto;
  isolation: isolate;
  contain: layout paint;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pf-viewing-window::before,
.pf-viewing-window::after,
.pf-viewing-window__image-zone::before,
.pf-viewing-window__image-zone::after {
  content: none !important;
  display: none !important;
}

.pf-viewing-window__shell {
  position: relative;
  width: 100%;
  padding: clamp(10px, 1.25vw, 15px);
  overflow: hidden;
  border-radius: var(--pf-radius-device);
}

.pf-viewing-window__shell::before,
.pf-viewing-window__shell::after {
  content: none !important;
  display: none !important;
}

.pf-viewing-window__surface {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: calc(var(--pf-radius-device) - 10px);
}

.pf-viewing-window__surface::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 24%, rgba(var(--pf-accent-core-rgb), 0.20), transparent 26%),
    radial-gradient(circle at 70% 78%, rgba(var(--pf-blood-b-rgb), 0.22), transparent 36%),
    conic-gradient(
      from 180deg,
      transparent,
      rgba(var(--pf-blood-a-rgb), 0.18),
      transparent,
      rgba(var(--pf-blood-b-rgb), 0.16),
      transparent
    );
  opacity: 0.78;
  mix-blend-mode: screen;
  filter: blur(18px);
  animation: pfInternalFlow 18s linear infinite;
}

.pf-viewing-window__machine {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  width: 100%;
  padding: clamp(12px, 1.4vw, 18px);
}

.pf-viewing-window__title {
  margin: 0;
  color: var(--pf-text);
  font-size: clamp(1.2rem, 2.6vw, 2.7rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.062em;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.52),
    0 0 26px rgba(var(--pf-accent-core-rgb), 0.78),
    0 0 62px rgba(var(--pf-blood-a-rgb), 0.56);
}

.pf-viewing-window__image-zone {
  position: relative;
  width: 100%;
  min-height: var(--pf-vw-image-height);
  overflow: hidden;
  border-radius: clamp(26px, 3vw, 42px);
  isolation: isolate;
}

.pf-viewing-window__media-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--pf-vw-image-height);
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid rgba(var(--pf-accent-core-rgb), 0.24);
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--pf-accent-core-rgb), 0.20), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(var(--pf-blood-a-rgb), 0.30), transparent 52%),
    radial-gradient(circle at 0% 100%, rgba(var(--pf-blood-b-rgb), 0.16), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.24));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -34px 88px rgba(0, 0, 0, 0.20),
    inset 0 0 44px rgba(var(--pf-blood-a-rgb), 0.16),
    0 0 58px rgba(var(--pf-blood-a-rgb), 0.30);
}

.pf-viewing-window__media-frame::before,
.pf-viewing-window__media-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 0 !important;
  box-shadow: none !important;
}

.pf-viewing-window__media-frame::before {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(var(--pf-blood-a-rgb), 0.12) 100%),
    linear-gradient(90deg, transparent, rgba(var(--pf-accent-core-rgb), 0.08), transparent);
  opacity: 0.70;
  mix-blend-mode: screen;
}

.pf-viewing-window__media-frame::after {
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--pf-blood-a-rgb), 0.18), transparent 48%);
  filter: blur(28px);
  opacity: 0.68;
}

.pf-viewing-window__dog-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--pf-vw-image-height);
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  filter: saturate(1.16) contrast(1.05) brightness(1.08);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    opacity var(--pf-medium),
    transform var(--pf-medium),
    filter var(--pf-medium);
}

.pf-viewing-window.is-changing-dog .pf-viewing-window__dog-image {
  opacity: 0.78;
  transform: scale(1.014);
  filter: saturate(1.24) contrast(1.06) brightness(1.13);
}

/* =========================================================
   011 — CAPTION + METRICS
========================================================= */

.pf-viewing-window__caption,
.pf-attention-span,
.pf-attention-score,
[data-attention-span-card="true"],
[data-attention-score-card="true"] {
  border: 1px solid rgba(var(--pf-accent-core-rgb), 0.23);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--pf-accent-core-rgb), 0.15), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(var(--pf-blood-b-rgb), 0.12), transparent 44%),
    linear-gradient(135deg, rgba(var(--pf-blood-a-rgb), 0.20), rgba(0, 0, 0, 0.20));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 28px rgba(var(--pf-blood-a-rgb), 0.12),
    0 0 34px rgba(var(--pf-blood-a-rgb), 0.20);
}

.pf-viewing-window__caption {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 1rem 1.2rem;
  border-radius: clamp(22px, 2.5vw, 32px);
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.96rem, 1.55vw, 1.18rem);
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
  transition:
    opacity var(--pf-medium),
    transform var(--pf-medium),
    filter var(--pf-medium);
}

.pf-viewing-window__metrics,
.pf-viewing-window__metrics-dock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  width: 100%;
}

.pf-attention-span,
.pf-attention-score,
[data-attention-span-card="true"],
[data-attention-score-card="true"] {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.74rem;
  min-height: 80px;
  padding: 1rem;
  overflow: hidden;
  border-radius: clamp(22px, 2.5vw, 32px);
}

.pf-attention-span::before,
.pf-attention-score::before,
[data-attention-span-card="true"]::before,
[data-attention-score-card="true"]::before {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--pf-accent-core-rgb), 0.58), transparent 62%),
    rgba(var(--pf-blood-a-rgb), 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 26px rgba(var(--pf-blood-a-rgb), 0.52);
  font-size: 1.2rem;
}

.pf-attention-span::before,
[data-attention-span-card="true"]::before {
  content: "👁";
}

.pf-attention-score::before,
[data-attention-score-card="true"]::before {
  content: "♥";
}

.pf-attention-span__label,
.pf-attention-score__label {
  color: var(--pf-text-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pf-attention-span__value,
.pf-attention-score__value,
[data-attention-span-value="true"],
[data-attention-score-value="true"],
[data-viewer-count-value="true"],
[data-live-count-value="true"],
[data-live-viewers-value="true"],
[data-firebase-viewer-count="true"],
[data-score-value="true"] {
  color: var(--pf-text);
  font-size: clamp(1.42rem, 3.5vw, 2.55rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.42),
    0 0 24px rgba(var(--pf-blood-a-rgb), 0.82),
    0 0 54px rgba(var(--pf-blood-b-rgb), 0.38);
}

.pf-viewing-window__metric-footnote {
  color: var(--pf-text-faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================================
   012 — SUBMISSION FORM SITEWIDE LIFT
========================================================= */

.pf-submission-form {
  width: min(calc(100% - 28px), 570px) !important;
}

.pf-submission-form__module-boundary,
.pf-submission-form__boundary {
  border-radius: var(--pf-radius-device) !important;
}

.pf-submission-form__module-boundary::before,
.pf-submission-form__boundary::before {
  opacity: 0.46 !important;
  filter: blur(18px) saturate(1.4) !important;
}

.pf-submission-form__title {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.50),
    0 0 26px rgba(var(--pf-blood-a-rgb), 0.86),
    0 0 62px rgba(var(--pf-blood-b-rgb), 0.44) !important;
}

.pf-submission-form__preview-frame,
[data-submission-preview-frame="true"],
[data-upload-preview-frame="true"] {
  border-color: rgba(var(--pf-accent-core-rgb), 0.26) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 28px rgba(var(--pf-blood-a-rgb), 0.18),
    0 0 42px rgba(var(--pf-blood-a-rgb), 0.24) !important;
}

/* =========================================================
   013 — BRIDGE SITEWIDE LIFT
========================================================= */

.pf-companion-bridge,
.pf-gud-boy-bridge,
.pf-gud-girl-bridge,
[data-companion-bridge="true"],
[data-gud-boy-bridge="true"],
[data-gud-girl-bridge="true"] {
  position: relative !important;
  z-index: var(--pf-z-bridge) !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(100%, 780px) !important;
  margin-inline: auto !important;
  pointer-events: auto !important;
}

.pf-companion-bridge__button,
.pf-gud-boy-bridge__button,
.pf-gud-girl-bridge__button {
  width: min(100%, 660px) !important;
  min-height: clamp(220px, 32vw, 370px) !important;
  border-radius: var(--pf-radius-device) !important;
  text-decoration: none !important;
}

.pf-companion-bridge__counter-number {
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.38),
    0 0 30px rgba(var(--pf-blood-a-rgb), 0.84),
    0 0 60px rgba(var(--pf-blood-b-rgb), 0.34);
}

/* =========================================================
   014 — LEGACY DISPLAY CLEANUP
========================================================= */

[data-display-count],
.pf-display-count,
.pf-viewing-window__display-count {
  display: none !important;
}

/* =========================================================
   015 — ANIMATIONS
========================================================= */

@keyframes pfLivingAtmosphere {
  0% {
    transform: translate3d(-1.2%, -0.8%, 0) scale(1);
    filter: saturate(1.08) brightness(1);
  }

  100% {
    transform: translate3d(1.2%, 0.8%, 0) scale(1.026);
    filter: saturate(1.24) brightness(1.06);
  }
}

@keyframes pfInternalFlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pfSiteSheen {
  0%,
  100% {
    background-position: -120% 0, 0 0;
  }

  50% {
    background-position: 150% 0, 0 0;
  }
}

/* =========================================================
   016 — RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  :root {
    --pf-header-height: 205px;
  }

  .pf-viewing-window {
    --pf-vw-image-height: clamp(320px, 62vw, 540px);
  }

  .pf-background-asset__image,
  .pf-background-asset__layer--image img,
  [data-background-image="true"] {
    height: clamp(118vh, 190vw, 168vh) !important;
    opacity: 0.80 !important;
  }
}

@media (max-width: 720px) {
  :root {
    --pf-header-height: 168px;
  }

  .pf-viewing-window {
    --pf-vw-image-height: clamp(280px, 76vw, 450px);
  }

  .pf-viewing-window__machine {
    gap: 12px;
    padding: 12px;
  }

  .pf-viewing-window__metrics,
  .pf-viewing-window__metrics-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .promptifi-primary-home,
  .promptifi-primary-home__stage {
    padding-inline: 8px;
  }
}

@media (max-width: 420px) {
  :root {
    --pf-header-height: 154px;
  }

  .pf-viewing-window {
    --pf-vw-image-height: clamp(250px, 82vw, 375px);
  }

  .pf-viewing-window__title {
    font-size: clamp(1rem, 6vw, 1.54rem);
  }

  .pf-background-asset__image,
  .pf-background-asset__layer--image img,
  [data-background-image="true"] {
    height: clamp(112vh, 230vw, 150vh) !important;
    opacity: 0.74 !important;
  }
}

/* =========================================================
   017 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}