/* static/soul_reveal.css
   Fullscreen SoulReveal overlay (src/components/soul_reveal.rs)
   Designed to sit above auth modal and everything else.
   Uses your palette vars from static/colors.css when available.
*/

:root{
  --sr-bg: var(--bg, #0b0f14);
  --sr-elev: var(--bg-elevated, rgba(255,255,255,.04));
  --sr-elev-2: var(--bg-elevated-2, rgba(255,255,255,.06));
  --sr-border: var(--border, rgba(255,255,255,.12));
  --sr-text: var(--text, rgba(255,255,255,.92));
  --sr-muted: var(--muted, rgba(255,255,255,.66));
  --sr-accent: var(--accent, #67e8f9);

  --sr-shadow: 0 22px 80px rgba(0,0,0,.60);
  --sr-radius: 18px;
  --sr-ring: 0 0 0 3px rgba(103,232,249,.18);
}

/* Fullscreen overlay */
.soul-overlay{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 22px;

  background:
    radial-gradient(1100px 700px at 50% 12%, rgba(103,232,249,.14), transparent 60%),
    radial-gradient(900px 560px at 20% 88%, rgba(124,58,237,.14), transparent 55%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
}

/* Main card */
.soul-panel{
  width: min(760px, 96vw);
  border-radius: var(--sr-radius);
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-bg) 84%, rgba(0,0,0,.32));
  box-shadow: var(--sr-shadow);
  overflow: hidden;
  position: relative;
}

/* Close button */
.soul-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-elev) 90%, transparent);
  color: var(--sr-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}

.soul-close:hover{
  background: color-mix(in srgb, var(--sr-elev-2) 92%, transparent);
}

/* Header */
.soul-head{
  padding: 22px 22px 14px;
  text-align: center;
}

.soul-badge{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sr-accent) 40%, var(--sr-border));
  background: color-mix(in srgb, var(--sr-accent) 10%, var(--sr-elev));
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--sr-text);
  opacity: .95;
}

.soul-title{
  margin: 10px 0 6px;
  font-size: 1.35rem;
  color: var(--sr-text);
}

.soul-sub{
  margin: 0;
  color: var(--sr-muted);
  font-size: .98rem;
}

/* Body grid */
.soul-body{
  padding: 16px 22px 22px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
}

@media (max-width: 720px){
  .soul-body{ grid-template-columns: 1fr; }
}

/* Left: big reveal */
.soul-reveal{
  border-radius: 16px;
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-elev) 92%, transparent);
  padding: 16px;
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* subtle moving sheen (no keyframes needed, but looks alive) */
.soul-reveal::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(103,232,249,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(124,58,237,.10), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  pointer-events: none;
}

.soul-reveal > *{ position: relative; z-index: 1; }

.soul-line{
  font-size: .95rem;
  color: var(--sr-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.soul-value{
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sr-text);
  letter-spacing: .02em;
}

.soul-pills{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.soul-pill{
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-elev-2) 90%, transparent);
  color: var(--sr-text);
  font-size: .85rem;
}

/* Right: explanation / CTA */
.soul-side{
  border-radius: 16px;
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-elev) 92%, transparent);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soul-side h4{
  margin: 2px 0 0;
  color: var(--sr-text);
  font-size: 1.05rem;
}

.soul-side p{
  margin: 0;
  color: var(--sr-muted);
  line-height: 1.45;
  font-size: .95rem;
}

.soul-actions{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.soul-btn{
  border: 1px solid var(--sr-border);
  background: color-mix(in srgb, var(--sr-elev) 90%, transparent);
  color: var(--sr-text);
  border-radius: 12px;
  padding: .7rem .9rem;
  cursor: pointer;
  font-weight: 700;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}

.soul-btn:hover{
  background: color-mix(in srgb, var(--sr-elev-2) 92%, transparent);
}

.soul-btn:active{
  transform: translateY(1px);
}

.soul-btn.primary{
  border-color: color-mix(in srgb, var(--sr-accent) 45%, var(--sr-border));
  background: color-mix(in srgb, var(--sr-accent) 16%, var(--sr-elev));
}

.soul-btn.primary:hover{
  background: color-mix(in srgb, var(--sr-accent) 20%, var(--sr-elev-2));
}

.soul-btn:focus{
  outline: none;
  box-shadow: var(--sr-ring);
}