/* ============================================================
   XS//SASS — DIAGNOSTIC SCANNER
   Luxury Cyberpunk Sarcasm · Rarity System
   ============================================================ */

:root {
  --black:      #050510;
  --black2:     #0a0916;
  --black3:     #0f0d1f;
  --cyan:       #38D4E0;
  --magenta:    #FF54D1;
  --violet:     #67289E;
  --yellow:     #FFD400;
  --white:      #F5F7FA;
  --white-dim:  rgba(245,247,250,0.5);

  /* Rarity colors */
  --common-color:    #FF54D1;
  --rare-color:      #50F6FF;
  --legendary-color: #FFD400;

  --glow-cyan:    0 0 10px rgba(56,212,224,0.35), 0 0 24px rgba(56,212,224,0.1);
  --glow-mag:     0 0 14px rgba(255,84,209,0.5),  0 0 32px rgba(255,84,209,0.15);
  --glow-yellow:  0 0 14px rgba(255,212,0,0.6),   0 0 32px rgba(255,212,0,0.2);

  --font-display: 'Oxanium', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;
  --radius-card:  14px;
  --radius-btn:   16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; min-height: 100vh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── ATMOSPHERE ────────────────────────────── */

.scanlines {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
}
.grid-overlay {
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background-image:
    linear-gradient(rgba(80,246,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,246,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── CORNERS ───────────────────────────────── */

.corner {
  position: fixed; z-index: 999; pointer-events: none;
  width: 24px; height: 24px;
}
.corner-tl { top: 14px; left: 14px;   border-top: 1.5px solid var(--cyan);    border-left: 1.5px solid var(--cyan); }
.corner-tr { top: 14px; right: 14px;  border-top: 1.5px solid var(--magenta); border-right: 1.5px solid var(--magenta); }
.corner-bl { bottom: 14px; left: 14px;  border-bottom: 1.5px solid var(--cyan);    border-left: 1.5px solid var(--cyan); }
.corner-br { bottom: 14px; right: 14px; border-bottom: 1.5px solid var(--magenta); border-right: 1.5px solid var(--magenta); }

/* ── PHASE ─────────────────────────────────── */

.phase { display: none; min-height: 100vh; padding: 22px 20px 36px; flex-direction: column; align-items: center; }
.phase.active { display: flex; }

/* ── LOGO ──────────────────────────────────── */

.phase-header { width: 100%; text-align: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 24px; }
.logo-lockup { display: inline-flex; align-items: baseline; margin-bottom: 6px; }
.logo-xs   { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--cyan);    text-shadow: 0 0 10px rgba(56,212,224,0.4); letter-spacing: 0.1em; }
.logo-slash{ font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--white-dim); margin: 0 3px; letter-spacing: 0; }
.logo-sass { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--magenta); text-shadow: var(--glow-mag);  letter-spacing: 0.1em; }
.header-meta { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.28em; color: rgba(180,130,255,0.9); text-transform: uppercase; font-weight: 500; }

/* ── RARITY BAR ────────────────────────────── */

.rarity-bar {
  width: 100%; text-align: center;
  margin-bottom: 10px;
  height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.rarity-label {
  font-family: var(--font-ui); font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 5px 18px; border-radius: 99px;
  border: 1.5px solid currentColor;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rarity-label.visible { opacity: 1; }
.rarity-label.common     { color: var(--common-color);    border-color: rgba(255,84,209,0.6);   background: rgba(255,84,209,0.1); }
.rarity-label.rare       { color: var(--rare-color);      border-color: rgba(80,246,255,0.6);   background: rgba(80,246,255,0.1); }
.rarity-label.legendary  { color: var(--legendary-color); border-color: rgba(255,212,0,0.5);    background: rgba(255,212,0,0.1);
  animation: legendary-pulse 2s ease-in-out infinite; }

@keyframes legendary-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,212,0,0.3); }
  50%       { box-shadow: 0 0 20px rgba(255,212,0,0.7), 0 0 40px rgba(255,212,0,0.2); }
}

/* ── SCAN PHASE ────────────────────────────── */

.scan-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }

.scan-ring-container { position: relative; width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scan-ring { position: absolute; border-radius: 50%; }
.ring-outer { width: 210px; height: 210px; border: 1px solid rgba(80,246,255,0.4); animation: spin-slow 8s linear infinite; }
.ring-mid   { width: 158px; height: 158px; border: 1px dashed rgba(255,84,209,0.35); animation: spin-slow 5s linear infinite reverse; }
.ring-inner { width: 110px; height: 110px; border: 1px solid rgba(103,40,158,0.5); animation: spin-slow 12s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.scan-sweep {
  position: absolute; width: 210px; height: 210px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(80,246,255,0.1) 30deg, transparent 60deg);
  animation: spin-slow 3s linear infinite;
}
.scan-target { position: absolute; width: 50px; height: 50px; }
.target-h { position: absolute; height: 1px; width: 100%; top: 50%; background: linear-gradient(90deg, transparent, rgba(80,246,255,0.7), transparent); }
.target-v { position: absolute; width: 1px; height: 100%; left: 50%; background: linear-gradient(180deg, transparent, rgba(80,246,255,0.7), transparent); }
.scan-center-glyph { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--cyan); text-shadow: var(--glow-cyan); letter-spacing: 0.15em; animation: glyph-pulse 2.5s ease-in-out infinite; }
@keyframes glyph-pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

.scan-readout {
  width: 100%; background: rgba(80,246,255,0.03); border: 1px solid rgba(80,246,255,0.14); border-radius: var(--radius-card); padding: 20px 22px; position: relative; overflow: hidden;
}
.scan-readout::before { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(80,246,255,0.04),transparent); animation:shimmer 2.5s linear infinite; }
.scan-readout::after  { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0.4; }
@keyframes shimmer { to { left:200%; } }

.readout-label { font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 0.3em; color: rgba(80,246,255,0.6); font-weight: 600; text-transform: uppercase; margin-bottom: 12px; }
.scan-message  { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; color: var(--white); min-height: 1.4em; margin-bottom: 18px; position: relative; }
.scan-message.glitching::before { content:attr(data-text); position:absolute; top:0; left:2px; color:var(--cyan); opacity:0.7; clip-path:inset(40% 0 30% 0); animation:glitch-a 0.15s step-end forwards; }
.scan-message.glitching::after  { content:attr(data-text); position:absolute; top:0; left:-2px; color:var(--magenta); opacity:0.6; clip-path:inset(60% 0 10% 0); animation:glitch-b 0.15s step-end forwards; }
@keyframes glitch-a { 0%{transform:translateX(0);opacity:0.7;} 50%{transform:translateX(-3px);opacity:0.9;} 100%{transform:translateX(0);opacity:0;} }
@keyframes glitch-b { 0%{transform:translateX(0);opacity:0.6;} 50%{transform:translateX(3px);opacity:0.8;}  100%{transform:translateX(0);opacity:0;} }

.progress-track { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.progress-fill  { height: 100%; width: 0%; background: linear-gradient(90deg, var(--violet), var(--cyan), var(--magenta)); border-radius: 2px; transition: width 0.12s linear; position: relative; }
.progress-fill::after { content:''; position:absolute; right:0; top:-2px; width:6px; height:7px; background:var(--white); border-radius:50%; box-shadow:0 0 8px var(--cyan); }
.progress-meta { display:flex; justify-content:space-between; align-items:center; }
.progress-pct  { font-family:var(--font-ui); font-size:0.68rem; color:var(--cyan); font-weight:700; letter-spacing:0.1em; }
.progress-tag  { font-family:var(--font-ui); font-size:0.58rem; color:rgba(245,247,250,0.75); letter-spacing:0.2em; text-transform:uppercase; }

.scan-telemetry { width:100%; display:flex; flex-direction:column; gap:8px; }
.telem-row { display:flex; justify-content:space-between; align-items:center; padding:9px 16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; }
.telem-label { font-family:var(--font-ui); font-size:0.6rem; letter-spacing:0.2em; color:rgba(245,247,250,0.75); font-weight:500; text-transform:uppercase; }
.telem-val { font-family:var(--font-ui); font-size:0.65rem; letter-spacing:0.12em; font-weight:700; color:var(--white-dim); }
.telem-val.acquired  { color:var(--cyan);    text-shadow:0 0 8px rgba(80,246,255,0.5); }
.telem-val.warning   { color:var(--yellow);  text-shadow:0 0 8px rgba(255,212,0,0.5); animation:val-flicker 3s step-end infinite; }
.telem-val.confirmed { color:var(--magenta); text-shadow:0 0 8px rgba(255,84,209,0.4); }
@keyframes val-flicker { 0%,88%,100%{opacity:1;} 89%,93%{opacity:0.3;} 90%,94%{opacity:1;} }

.scan-disclaimer { font-family:var(--font-body); font-size:0.62rem; font-weight:400; color:rgba(180,130,255,0.75); text-align:center; letter-spacing:0.06em; font-style:italic; padding:0 10px; }

/* ── BADGE ─────────────────────────────────── */

.badge-zone { width:100%; position:relative; display:flex; align-items:center; justify-content:center; padding:16px 0 14px; }

.badge-outer-ring { position:absolute; border-radius:50%; border:1px dashed rgba(255,84,209,0.2); width:260px; height:260px; top:50%; left:50%; transform:translate(-50%,-50%); animation:badge-spin 10s linear infinite; }
.badge-ring-2 { width:290px; height:290px; border-color:rgba(80,246,255,0.12); animation-duration:16s; animation-direction:reverse; }
@keyframes badge-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Legendary rings override */
.legendary .badge-outer-ring { border-color:rgba(255,212,0,0.35); animation-duration:6s; }
.legendary .badge-ring-2     { border-color:rgba(255,212,0,0.2);  animation-duration:9s; }

.badge-panel {
  position:relative; z-index:3;
  background:linear-gradient(160deg,#110020 0%,#08000f 60%,#050510 100%);
  border:1px solid rgba(255,84,209,0.5);
  border-radius:18px; padding:20px 20px 18px; text-align:center; width:100%; max-width:360px;
  box-shadow: 0 0 0 1px rgba(255,84,209,0.1), 0 0 30px rgba(255,84,209,0.08), inset 0 1px 0 rgba(255,84,209,0.12);
  animation: badge-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.badge-panel::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--magenta),transparent); opacity:0.5; border-radius:1px; }

/* Rare badge override */
.badge-panel.rare-badge {
  border-color: rgba(56,212,224,0.5);
  box-shadow: 0 0 0 1px rgba(56,212,224,0.1), 0 0 24px rgba(56,212,224,0.08), inset 0 1px 0 rgba(56,212,224,0.12);
  animation: badge-in 0.7s cubic-bezier(0.22,1,0.36,1) both, rare-border-pulse 3s ease-in-out infinite 0.7s;
}
.badge-panel.rare-badge::before { background:linear-gradient(90deg,transparent,var(--cyan),transparent); }

/* Legendary badge override */
.badge-panel.legendary-badge {
  border-color: rgba(255,212,0,0.6);
  box-shadow: 0 0 0 1px rgba(255,212,0,0.12), 0 0 40px rgba(255,212,0,0.12), 0 0 80px rgba(255,212,0,0.05), inset 0 1px 0 rgba(255,212,0,0.15);
  animation: badge-in-legendary 1.1s cubic-bezier(0.22,1,0.36,1) both, legendary-border-pulse 3s ease-in-out infinite 1.1s;
}
.badge-panel.legendary-badge::before { background:linear-gradient(90deg,transparent,var(--yellow),transparent); }

@keyframes badge-in { from{transform:scale(0.85) translateY(12px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
@keyframes badge-in-legendary { from{transform:scale(0.7) translateY(20px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
@keyframes rare-border-pulse {
  0%,100% { box-shadow:0 0 0 1px rgba(56,212,224,0.15),0 0 20px rgba(56,212,224,0.08),inset 0 1px 0 rgba(56,212,224,0.1); }
  50%      { box-shadow:0 0 0 1px rgba(56,212,224,0.3), 0 0 40px rgba(56,212,224,0.15),inset 0 1px 0 rgba(56,212,224,0.2); }
}
@keyframes legendary-border-pulse {
  0%,100% { box-shadow:0 0 0 1px rgba(255,212,0,0.12),0 0 30px rgba(255,212,0,0.12),inset 0 1px 0 rgba(255,212,0,0.15); }
  50%      { box-shadow:0 0 0 1px rgba(255,212,0,0.25),0 0 60px rgba(255,212,0,0.22),0 0 100px rgba(255,212,0,0.08),inset 0 1px 0 rgba(255,212,0,0.25); }
}

.badge-eyebrow { font-family:var(--font-ui); font-size:0.58rem; letter-spacing:0.3em; color:rgba(255,84,209,0.65); font-weight:600; text-transform:uppercase; margin-bottom:10px; }
.badge-eyebrow.legendary-eyebrow { color:rgba(255,212,0,0.8); animation:legendary-pulse 2s ease-in-out infinite; }

.badge-classification {
  font-family:var(--font-display); font-size:1.4rem; font-weight:800; line-height:1.15; letter-spacing:0.05em; margin-bottom:8px;
  background:linear-gradient(135deg,var(--yellow) 0%,var(--magenta) 50%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.badge-classification.legendary-text {
  background:linear-gradient(135deg,#fff8c0 0%,var(--yellow) 40%,#ffaa00 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 8px rgba(255,212,0,0.4));
}

.badge-subtext { font-family:var(--font-body); font-size:0.7rem; color:rgba(245,247,250,0.65); font-weight:300; font-style:italic; letter-spacing:0.04em; margin-top:8px; }

/* ── STAT CARDS ────────────────────────────── */

.stats-grid { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.stat-card {
  background:linear-gradient(150deg,#0d0a1e 0%,#110d26 100%);
  border:1px solid rgba(103,40,158,0.4); border-radius:var(--radius-card); padding:14px 16px 12px;
  position:relative; overflow:hidden; opacity:0; transform:translateY(14px);
  transition:opacity 0.45s ease,transform 0.45s ease;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.stat-card.revealed { opacity:1; transform:translateY(0); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent); opacity:0.3; }
.stat-wide { grid-column:1/-1; }
.stat-eyebrow { font-family:var(--font-ui); font-size:0.6rem; letter-spacing:0.2em; font-weight:700; color:rgba(190,150,255,0.95); text-transform:uppercase; margin-bottom:10px; }
.stat-bar-track { height:5px; background:rgba(255,255,255,0.12); border-radius:2px; overflow:hidden; margin-bottom:12px; }
.stat-bar-fill  { height:100%; width:0%; border-radius:2px; transition:width 1.1s cubic-bezier(0.16,1,0.3,1); }
#bar-sass   { background:linear-gradient(90deg,var(--violet),var(--magenta)); }
#bar-eye    { background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
#bar-social { background:linear-gradient(90deg,var(--magenta),var(--violet)); }
#bar-petty  { background:linear-gradient(90deg,var(--yellow),var(--magenta)); }
#bar-drama  { background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta)); }
.stat-bottom { display:flex; justify-content:space-between; align-items:baseline; }
.stat-value  { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--white); letter-spacing:0.02em; }
.stat-pct    { font-family:var(--font-ui); font-size:0.72rem; color:rgba(80,246,255,0.5); font-weight:600; letter-spacing:0.1em; }

/* ── CLINICAL NOTE ──────────────────────────── */

.clinical-note { width:100%; margin-top:12px; border:1px solid rgba(255,212,0,0.18); border-radius:8px; padding:12px 16px; display:flex; align-items:flex-start; gap:10px; background:rgba(255,212,0,0.03); }
.clinical-icon { color:rgba(255,212,0,0.8); font-size:0.8rem; flex-shrink:0; margin-top:1px; }
#clinical-text { font-family:var(--font-body); font-size:0.67rem; color:rgba(255,212,0,0.85); line-height:1.6; font-weight:300; font-style:italic; letter-spacing:0.03em; }

/* ── BUTTONS ────────────────────────────────── */

.action-row { width:100%; margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 24px; border-radius:var(--radius-btn); font-family:var(--font-display); font-size:0.82rem; font-weight:700; letter-spacing:0.16em; cursor:pointer; text-decoration:none; border:none; position:relative; overflow:hidden; transition:box-shadow 0.25s ease,transform 0.1s ease; }
.btn:active { transform:scale(0.98); }
.btn::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent); transition:left 0.5s ease; }
.btn:hover::after { left:160%; }
.btn-icon { font-size:1rem; }
.btn-primary   { background:transparent; color:var(--yellow); border:1.5px solid var(--yellow); box-shadow:var(--glow-yellow); }
.btn-primary:hover   { box-shadow:0 0 24px rgba(255,212,0,0.6),0 0 48px rgba(255,212,0,0.2); }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-secondary { background:transparent; color:var(--cyan); border:1.5px solid rgba(80,246,255,0.4); }
.btn-secondary:hover { border-color:var(--cyan); box-shadow:var(--glow-cyan); }

/* ── FOOTER ─────────────────────────────────── */

.result-footer { width:100%; margin-top:16px; text-align:center; }
.footer-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); margin-bottom:16px; }
.footer-ticker  { font-family:var(--font-ui); font-size:0.62rem; letter-spacing:0.25em; color:rgba(190,150,255,0.85); text-transform:uppercase; margin-bottom:8px; transition:opacity 0.5s ease; }
.footer-url     { font-family:var(--font-display); font-size:0.7rem; font-weight:600; letter-spacing:0.18em; background:linear-gradient(90deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── TOAST ──────────────────────────────────── */

.share-toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--cyan); color:#000; font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; padding:12px 26px; border-radius:40px; z-index:2000; opacity:0; transition:transform 0.3s ease,opacity 0.3s ease; white-space:nowrap; }
.share-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── CONFETTI ───────────────────────────────── */

#confetti-container { position:fixed; inset:0; pointer-events:none; z-index:500; overflow:hidden; }
.confetti-piece { position:absolute; top:-10px; opacity:0; animation:confetti-fall linear forwards; }
@keyframes confetti-fall { 0%{opacity:1;transform:translateY(0) rotate(0deg);} 100%{opacity:0;transform:translateY(100vh) rotate(720deg);} }

/* ── GLITCH BURSTS ──────────────────────────── */

.glitch-burst { position:fixed; inset:0; z-index:800; pointer-events:none; animation:burst-common 0.35s step-end forwards; }
.glitch-burst.legendary { animation:burst-legendary 0.7s step-end forwards; }
@keyframes burst-common {
  0%  { background:rgba(80,246,255,0.08); }
  33% { background:rgba(255,84,209,0.08); }
  66% { background:rgba(103,40,158,0.06); }
  100%{ background:transparent; }
}
@keyframes burst-legendary {
  0%  { background:rgba(255,212,0,0.18); }
  15% { background:rgba(255,255,255,0.12); }
  30% { background:rgba(255,212,0,0.14); }
  45% { background:rgba(80,246,255,0.1); }
  60% { background:rgba(255,84,209,0.08); }
  75% { background:rgba(255,212,0,0.06); }
  100%{ background:transparent; }
}

/* ── RESPONSIVE ─────────────────────────────── */

@media (min-width:390px) { .badge-classification{font-size:1.65rem;} .stat-value{font-size:1.2rem;} }
@media (min-width:600px) { .phase{padding:36px 32px 52px;max-width:520px;margin:0 auto;} .badge-classification{font-size:1.8rem;} .stat-value{font-size:1.3rem;} }