/* ════════════════════════════════════════════════════════════════
   WINR v20 — Onboarding polish (cinematic layer)
   Adds:
   • SVG icon slots in role + discovery tiles (replaces emoji slots)
   • Lock badges on titles + emblems (now showing all options)
   • "Coming Soon" treatment for verification step
   • Hover/selected glow tuned to per-tile color
   • Cinematic step transitions + Back/Next button polish
   • Brand-monochrome aware (Tony retokenized --orange to #FFFFFF)
   Loads after _v9_additions.css so it can override safely.
   ════════════════════════════════════════════════════════════════ */

/* ── Role tile — iconic variant ───────────────────────────────── */
.v9-tile.v9-tile-iconic{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 16px;
  min-height:140px;
  position:relative;
  isolation:isolate
}

.v9-tile.v9-tile-iconic .v9-tile-icon{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             filter 280ms cubic-bezier(0.22, 1, 0.36, 1)
}
.v9-tile.v9-tile-iconic .v9-tile-icon svg{
  width:100%;
  height:100%;
  display:block
}

.v9-tile.v9-tile-iconic .v9-tile-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.2px;
  text-align:center
}
.v9-tile.v9-tile-iconic .v9-tile-desc{
  font-size:11px;
  color:var(--text-mid, #a3a3a8);
  line-height:1.4;
  text-align:center;
  max-width:90%
}

.v9-tile.v9-tile-iconic:hover .v9-tile-icon{
  transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 0 12px var(--tile-glow, rgba(255,255,255,0.6)))
}
.v9-tile.v9-tile-iconic.selected{
  border-color:color-mix(in srgb, var(--tile-glow, #fff) 80%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tile-glow, #fff) 40%, transparent),
             0 12px 32px color-mix(in srgb, var(--tile-glow, #fff) 18%, transparent)
}
.v9-tile.v9-tile-iconic.selected .v9-tile-icon{
  filter:drop-shadow(0 0 16px var(--tile-glow, rgba(255,255,255,0.7)))
}

/* ── Lock chip — used on locked titles + emblems ─────────────── */
.v9-lock-chip{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.5px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-transform:uppercase
}

.v9-title-card.locked,
.v9-emblem-card.locked{
  position:relative;
  cursor:not-allowed;
  opacity:0.7;
  filter:saturate(0.7)
}
.v9-title-card.locked::after,
.v9-emblem-card.locked::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(8,8,10,0.35);
  pointer-events:none;
  border-radius:inherit;
  z-index:2
}
.v9-title-card.locked:hover,
.v9-emblem-card.locked:hover{
  opacity:0.85;
  transform:none
}

/* Shake animation when locked tile clicked (reuses v8-shake but defines own
   keyframes in case _v8 styles aren't loaded yet for some surface). */
@keyframes v9Shake{
  0%,100% { transform:translateX(0) }
  20%     { transform:translateX(-6px) }
  40%     { transform:translateX(6px) }
  60%     { transform:translateX(-4px) }
  80%     { transform:translateX(4px) }
}
.v9-title-card.v8-shake,
.v9-emblem-card.v8-shake,
.v9-skin-tile.v8-shake{
  animation:v9Shake 320ms cubic-bezier(0.36, 0, 0.66, -0.56)
}

/* ── Emblem cards — bigger glow on hover/selected ────────────── */
.v9-emblem-card .v9-emblem-icon{
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
  animation:breathe 3.5s ease-in-out infinite
}
.v9-emblem-card:not(.locked):hover .v9-emblem-icon{
  transform:scale(1.12);
  filter:drop-shadow(0 0 18px var(--glow-color, rgba(255,255,255,0.7)))
}
.v9-emblem-card.selected .v9-emblem-icon{
  transform:scale(1.08);
  filter:drop-shadow(0 0 22px var(--glow-color, rgba(255,255,255,0.85)))
}

/* ── Connect step — "Soon" treatment ─────────────────────────── */
.v9-source-tile.v9-source-tile-soon{
  position:relative;
  cursor:pointer;
  opacity:0.75
}
.v9-source-tile.v9-source-tile-soon:hover{
  opacity:0.92;
  transform:translateY(-1px)
}
.v9-source-tile.v9-source-tile-soon .v9-source-soon-chip{
  position:absolute;
  top:6px;
  right:6px;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85);
  text-transform:uppercase
}

/* Primary skip — when no real action exists, skip is the primary CTA */
.v9-skip-link.v9-skip-link-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:20px auto 0;
  padding:12px 24px;
  font-size:13px;
  font-weight:700;
  background:#FFFFFF;
  color:#000000;
  border-radius:999px;
  text-decoration:none;
  transition:transform 200ms ease, box-shadow 200ms ease;
  box-shadow:0 8px 24px rgba(255,255,255,0.18)
}
.v9-skip-link.v9-skip-link-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(255,255,255,0.28);
  background:#F4F4F6
}

/* ── Discovery tile — iconic variant ─────────────────────────── */
.v10-discovery-tile.v10-discovery-tile-iconic{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 12px
}
.v10-discovery-tile.v10-discovery-tile-iconic .v10-discovery-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-mid, #a3a3a8);
  transition:color 240ms ease, transform 240ms ease
}
.v10-discovery-tile.v10-discovery-tile-iconic .v10-discovery-icon svg{
  width:100%;
  height:100%
}
.v10-discovery-tile.v10-discovery-tile-iconic .v10-discovery-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:-0.1px
}
.v10-discovery-tile.v10-discovery-tile-iconic:hover .v10-discovery-icon{
  color:#FFFFFF;
  transform:scale(1.12)
}
.v10-discovery-tile.v10-discovery-tile-iconic.selected{
  border-color:rgba(255,255,255,0.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)
}
.v10-discovery-tile.v10-discovery-tile-iconic.selected .v10-discovery-icon{
  color:#FFFFFF
}

/* ── Step-body fade-in (cinematic transitions) ───────────────── */
.v9-onb-card .v9-onb-body{
  animation:v9StepFade 420ms cubic-bezier(0.22, 1, 0.36, 1)
}
@keyframes v9StepFade{
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── Back / Next button cinematic polish ─────────────────────── */
.v9-btn-next{
  position:relative;
  overflow:hidden;
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1)
}
.v9-btn-next::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-100%;
  width:60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform:skewX(-20deg);
  pointer-events:none;
  transition:left 600ms cubic-bezier(0.22, 1, 0.36, 1)
}
.v9-btn-next:not(.disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(255,255,255,0.18)
}
.v9-btn-next:not(.disabled):hover::before{
  left:150%
}

.v9-btn-back{
  transition:transform 200ms ease, color 200ms ease
}
.v9-btn-back:hover{
  transform:translateX(-2px);
  color:#FFFFFF
}

/* ── Progress dots cinematic ─────────────────────────────────── */
.v9-onb-dots .v9-dot{
  transition:width 360ms cubic-bezier(0.22, 1, 0.36, 1),
             background 360ms ease,
             box-shadow 360ms ease
}
.v9-onb-dots .v9-dot.active{
  box-shadow:0 0 12px rgba(255,255,255,0.6)
}
.v9-onb-dots .v9-dot.done.clickable{
  cursor:pointer
}
.v9-onb-dots .v9-dot.done.clickable:hover{
  background:rgba(255,255,255,0.6)
}