/* ===========================================================================
 * Neural Glass skin — spin-to-win pilot.
 *
 * Loaded ONLY on the spin page, AFTER app.css, and scoped to body.glass-skin so
 * the prize-draw and instant-win demos are left completely untouched.
 *
 * app.css is token-driven: its component styles read --d-* design tokens. The
 * white demo theme sets those tokens light. Here we re-point them to a dark
 * palette, so every token-driven component (steps, proofs, audit trail, rules
 * box, stubs) re-themes for a dark field automatically. On top of that we add
 * the glassmorphism: an animated gradient background, floating geometric shapes,
 * neural lines, glass panels, a gradient headline and gradient CTA pills.
 *
 * Adapted from TemplateMo 597 "Neural Glass" (free for commercial use) into the
 * integriMark palette: violet primary with gold + green accents, on a dark
 * field — coherent with the purple brand chrome, without the cyberpunk tone.
 * No inline styles, no CDN, no external fonts: strict-CSP clean.
 * ========================================================================= */

/* ---- 1. background field: animated gradient + floating shapes + lines ---- */
body.glass-skin { background: #07060d; }

body.glass-skin .neural-background,
body.glass-skin .geometric-shapes,
body.glass-skin .neural-lines { position: fixed; inset: 0; pointer-events: none; }

body.glass-skin .neural-background {
  z-index: -3;
  background:
    radial-gradient(circle at 15% 85%, rgba(108, 92, 231, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(124, 58, 173, 0.50) 0%, transparent 50%),
    radial-gradient(circle at 45% 62%, rgba(88, 60, 200, 0.40) 0%, transparent 50%),
    radial-gradient(circle at 72% 42%, rgba(29, 157, 114, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 26% 32%, rgba(230, 198, 110, 0.14) 0%, transparent 55%),
    linear-gradient(135deg, #0a0812 0%, #1a1330 52%, #05040a 100%);
  animation: ngPulse 16s ease-in-out infinite;
}
@keyframes ngPulse {
  0%, 100% { filter: brightness(0.9) saturate(1.35); }
  33% { filter: brightness(1.08) saturate(1.6) hue-rotate(12deg); }
  66% { filter: brightness(1.0) saturate(1.45) hue-rotate(-8deg); }
}

body.glass-skin .geometric-shapes { z-index: -2; overflow: hidden; }
body.glass-skin .shape { position: absolute; top: 0; border: 1px solid rgba(185, 167, 255, 0.35); animation: ngFloat 22s linear infinite; }
body.glass-skin .shape:nth-child(1) { width: 100px; height: 100px; left: 10%; animation-delay: 0s; border-color: rgba(230, 198, 110, 0.35); }
body.glass-skin .shape:nth-child(2) { width: 60px; height: 60px; left: 70%; animation-delay: -6s; border-radius: 50%; border-color: rgba(185, 167, 255, 0.40); }
body.glass-skin .shape:nth-child(3) { width: 84px; height: 84px; left: 32%; animation-delay: -12s; transform: rotate(45deg); border-color: rgba(53, 199, 143, 0.35); }
body.glass-skin .shape:nth-child(4) { width: 120px; height: 120px; left: 52%; animation-delay: -18s; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: linear-gradient(45deg, rgba(185, 167, 255, 0.10), transparent); border: 0; }
@keyframes ngFloat {
  from { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%, 90% { opacity: 1; }
  to { transform: translateY(-140px) rotate(360deg); opacity: 0; }
}

body.glass-skin .neural-lines { z-index: -2; }
body.glass-skin .neural-line { position: absolute; left: 0; width: 100%; height: 1px; animation: ngLine 3.4s ease-in-out infinite; }
body.glass-skin .neural-line:nth-child(1) { top: 22%; background: linear-gradient(90deg, transparent, rgba(185, 167, 255, 0.70), transparent); animation-delay: 0s; }
body.glass-skin .neural-line:nth-child(2) { top: 58%; background: linear-gradient(90deg, transparent, rgba(230, 198, 110, 0.60), transparent); animation-delay: -1.1s; }
body.glass-skin .neural-line:nth-child(3) { top: 40%; background: linear-gradient(90deg, transparent, rgba(53, 199, 143, 0.55), transparent); animation-delay: -2.2s; }
@keyframes ngLine { 0%, 100% { opacity: 0.15; transform: scaleX(0.5); } 50% { opacity: 0.9; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  body.glass-skin .neural-background,
  body.glass-skin .shape,
  body.glass-skin .neural-line { animation: none; }
}

/* let the field show through the template's opaque wrappers */
body.glass-skin #wrapper,
body.glass-skin .wrapper,
body.glass-skin .demo-stage,
body.glass-skin .demo-stage .inner { background: transparent !important; }

/* ---- 2. header: floating glass pill (keeps the brand + menu markup) ---- */
body.glass-skin .im-page-top {
  position: fixed; top: 16px; left: 50%; right: auto; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1120px; height: auto; padding: 12px 24px;
  background: rgba(185, 167, 255, 0.08);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(185, 167, 255, 0.16); border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.glass-skin .im-page-top.im-scrolled {
  background: rgba(185, 167, 255, 0.13);
  border-color: rgba(185, 167, 255, 0.24);
}
body.glass-skin.no-sidebar #wrapper { padding-top: 92px; }

/* ---- 3. footer: dark glass ---- */
body.glass-skin #footer.wrapper.style1-alt,
body.glass-skin #footer {
  background: rgba(6, 5, 14, 0.55) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(185, 167, 255, 0.14);
}

/* ---- 4. re-point the demo design tokens to a dark-glass palette ---- */
body.glass-skin[data-demo] {
  --d-surface: transparent;
  --d-inset: rgba(255, 255, 255, 0.05); --d-inset2: rgba(255, 255, 255, 0.05);
  --d-line: rgba(255, 255, 255, 0.12); --d-ctl: rgba(255, 255, 255, 0.22);
  --d-text: #f5f2ff; --d-body: rgba(240, 237, 252, 0.84); --d-muted: rgba(240, 237, 252, 0.64);
  --d-gold: #e6c66e; --d-gold-soft: rgba(230, 198, 110, 0.14); --d-gold-line: rgba(230, 198, 110, 0.40); --d-gold-ink: #f0d590;
  --d-green: #35c78f; --d-green-deep: #35c78f; --d-green-soft: rgba(53, 199, 143, 0.14); --d-green-line: rgba(53, 199, 143, 0.40);
  --d-purple: #b9a7ff; --d-purple-soft: rgba(185, 167, 255, 0.14);
  --d-ring: rgba(185, 167, 255, 0.40);
}
/* per-group accents on a dark field: Operator (and spin) = gold, Players = green */
body.glass-skin[data-demo] .dash[data-group="gold"],
body.glass-skin[data-demo] .dash[data-group="operator"] {
  --acc: #e6c66e; --acc-soft: rgba(230, 198, 110, 0.16); --acc-ink: #f0d590; --acc-on: #241b02; --acc-line: rgba(230, 198, 110, 0.45);
}
body.glass-skin[data-demo] .dash[data-group="green"],
body.glass-skin[data-demo] .dash[data-group="tickets"] {
  --acc: #35c78f; --acc-soft: rgba(53, 199, 143, 0.16); --acc-ink: #7ee0b8; --acc-on: #04180f; --acc-line: rgba(53, 199, 143, 0.42);
}

/* ---- 5. the module becomes a glass panel ---- */
body.glass-skin[data-demo] #wrapper > .wrapper.demo-stage > .inner {
  max-width: 1120px; margin: 0 auto; padding: 40px 24px 64px;
}
body.glass-skin[data-demo] .dash {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
body.glass-skin[data-demo] .dash-mainhead {
  padding: 28px 34px 0;
}
body.glass-skin[data-demo] .dash-title {
  font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  background: linear-gradient(135deg, #e6c66e 0%, #e0a3ff 45%, #b9a7ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.glass-skin[data-demo] .dash-subtitle { color: rgba(238, 235, 252, 0.70); font-size: 14.5px; }
body.glass-skin[data-demo] .dash-pane { padding: 26px 34px 34px; min-height: 0; }

/* eyebrow: small tracked caps flanked by fading lines */
body.glass-skin .ng-eyebrow {
  display: inline-block; position: relative; margin: 0 0 15px;
  font: 600 11px var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: #cbb8ff;
}
body.glass-skin .ng-eyebrow::before,
body.glass-skin .ng-eyebrow::after {
  content: ""; position: absolute; top: 50%; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, #cbb8ff, transparent);
}
body.glass-skin .ng-eyebrow::before { left: -42px; }
body.glass-skin .ng-eyebrow::after { right: -42px; }

/* glass stat cards */
body.glass-skin .ng-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding: 22px 34px 2px;
}
body.glass-skin .ng-stat {
  text-align: center; padding: 18px 12px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(185, 167, 255, 0.08), rgba(230, 198, 110, 0.05));
  border: 1px solid rgba(185, 167, 255, 0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
body.glass-skin .ng-stat:hover { transform: translateY(-4px); border-color: rgba(230, 198, 110, 0.40); }
body.glass-skin .ng-stat-num {
  display: block; font: 800 26px var(--sans); color: #f0e6c8; line-height: 1;
  text-shadow: 0 0 16px rgba(230, 198, 110, 0.30); margin-bottom: 7px;
}
body.glass-skin .ng-stat-label { font: 600 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238, 235, 252, 0.55); }
@media (max-width: 640px) { body.glass-skin .ng-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- 6. gradient CTA pills (primary actions only; the quiet reset stays small) ---- */
body.glass-skin[data-demo] .dash .btn-gold,
body.glass-skin[data-demo] .dash .btn-primary {
  border-radius: 40px; padding: 14px 34px;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  border: 1px solid transparent !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
/* the pill's gradient follows the active group (Operator/spin gold, Players green) */
body.glass-skin[data-demo] .dash[data-group="gold"] .btn-gold,
body.glass-skin[data-demo] .dash[data-group="gold"] .btn-primary,
body.glass-skin[data-demo] .dash[data-group="operator"] .btn-gold,
body.glass-skin[data-demo] .dash[data-group="operator"] .btn-primary {
  background: linear-gradient(135deg, #e6c66e, #e0a3ff) !important; color: #241b02 !important;
}
body.glass-skin[data-demo] .dash[data-group="green"] .btn-gold,
body.glass-skin[data-demo] .dash[data-group="green"] .btn-primary,
body.glass-skin[data-demo] .dash[data-group="tickets"] .btn-gold,
body.glass-skin[data-demo] .dash[data-group="tickets"] .btn-primary {
  background: linear-gradient(135deg, #2fd39a, #7fe6ff) !important; color: #04180f !important;
}
body.glass-skin[data-demo] .dash .btn-gold:hover:not(:disabled),
body.glass-skin[data-demo] .dash .btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-2px); }
/* "Start fresh" sits on its own row directly under the spin button */
body.glass-skin .dash-freshrow { margin-top: 12px; }

/* ---- 7. hardcoded-light bits app.css sets for the white theme ---- */
body.glass-skin[data-demo] .dash-reset { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18); }
body.glass-skin[data-demo] .dash-reset:hover { background: rgba(255, 255, 255, 0.12) !important; }
body.glass-skin[data-demo] .copy-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }
body.glass-skin[data-demo] .copy-btn:active { background: rgba(53, 199, 143, 0.18); }

/* ---- 8. mobile: tighter gutters + smaller headline so nothing is cramped ---- */
@media (max-width: 640px) {
  body.glass-skin[data-demo] #wrapper > .wrapper.demo-stage > .inner { padding: 24px 14px 48px; }
  /* stack the header so the reset (dashboards) sits below the title, never beside
   * it — a side-by-side reset squeezed the title into a narrow column on mobile */
  body.glass-skin[data-demo] .dash-mainhead { padding: 22px 18px 0; flex-direction: column; align-items: stretch; }
  body.glass-skin[data-demo] .dash-reset { align-self: flex-start; }
  body.glass-skin[data-demo] .dash-title { font-size: 27px; }
  body.glass-skin[data-demo] .dash-pane { padding: 22px 20px 28px; }
  body.glass-skin .ng-stats { padding: 18px 20px 2px; gap: 12px; }
}

/* ---- 9. prize + instant dashboards: keep the sidebar, dark-glass the chrome ---- */
body.glass-skin[data-demo] .dash-sidebar { background: rgba(255, 255, 255, 0.03); border-right-color: rgba(255, 255, 255, 0.10); }
body.glass-skin[data-demo] .nav-link:hover { background: rgba(255, 255, 255, 0.07); }
body.glass-skin[data-demo] .nav-arrow { background: rgba(255, 255, 255, 0.06); }
body.glass-skin[data-demo] .draw-card { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
body.glass-skin[data-demo] .select-clean option { background: #1a1330; color: #f3effe; }
body.glass-skin[data-demo] .flash { background: rgba(255, 138, 122, 0.14); border-color: rgba(255, 138, 122, 0.40); color: #ffb3a7; }