/* 8.A.P Labs — shared visual polish layer
   Opt-in via body classes: sap-horror | sap-neon | sap-cute | sap-pixel | sap-ui | sap-lofi
   Auto-applies vignette + grain when body has .sap-polish
*/
:root {
  --sap-gold: #c8a84b;
  --sap-gold-bright: #f0d880;
  --sap-blood: #8b0000;
  --sap-blood-bright: #c41e3a;
  --sap-ink: #050308;
  --sap-neon: #00f0ff;
  --sap-pink: #ff40a0;
  --sap-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sap-polish *,
  .sap-polish *::before,
  .sap-polish *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Atmosphere layers (kept soft — no sparkles / grain flicker) ── */
body.sap-polish {
  position: relative;
  isolation: isolate;
}

body.sap-polish::before,
body.sap-polish::after {
  display: none !important;
}

/* Theme accents */
body.sap-horror {
  background-color: #050102 !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(139, 0, 0, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(200, 168, 75, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at center, #0a0404 0%, #000 100%) !important;
}

body.sap-neon {
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(255, 64, 160, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(0, 240, 255, 0.16) 0%, transparent 50%) !important;
}

body.sap-cute {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 180, 210, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160, 200, 255, 0.35) 0%, transparent 45%) !important;
}

body.sap-pixel {
  image-rendering: pixelated;
}

body.sap-lofi {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(128, 96, 192, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at center, #120c20 0%, #080610 100%) !important;
}

body.sap-ui::before {
  opacity: 0.25;
}

body.sap-ui::after {
  opacity: 0.02;
}

/* Soft entrance for main shells */
body.sap-polish > *:first-child {
  animation: sap-rise 0.55s var(--sap-ease) both;
}

@keyframes sap-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons / interactive polish when unmarked */
body.sap-polish button:not([class*='hub-']):not(.pg-port),
body.sap-polish [role='button'] {
  transition: transform 0.15s var(--sap-ease), box-shadow 0.2s ease, filter 0.2s ease;
}

body.sap-polish button:not([disabled]):hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

body.sap-polish button:not([disabled]):active {
  transform: translateY(1px) scale(0.98);
}

/* Canvas screens — soft frame, no glow filters */
body.sap-polish canvas {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body.sap-horror canvas,
body.sap-neon canvas {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Utility classes games can use */
.sap-title-glow {
  text-shadow:
    0 0 18px rgba(196, 30, 58, 0.45),
    0 0 40px rgba(200, 168, 75, 0.2);
}

.sap-panel {
  background: linear-gradient(160deg, rgba(20, 10, 12, 0.92), rgba(4, 2, 4, 0.96));
  border: 1px solid rgba(200, 168, 75, 0.28);
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.sap-scanlines {
  position: relative;
}

.sap-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.45;
  border-radius: inherit;
}