/* The "click to enter" screen's styles (assets/splash.js draws the markup). Shared by the profile
   page, where .pf-splash holds it over the page (profile.css), and the Customize page's picker.
   --sp-c is the colour the owner picked from their theme, --sp-c2 a second one to go with it. */
.sp {
  --sp-ease: var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  container-type: size; color: #fff; font-family: 'Sora', 'Manrope', system-ui, sans-serif; text-align: center;
  -webkit-user-select: none; user-select: none;
}
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-core { position: relative; z-index: 1; padding: 24px; max-width: 100%; transition: transform 280ms var(--sp-ease); }
.sp-in { animation: sp-in 520ms var(--sp-ease) both; }
.sp-who { font-weight: 800; font-size: 20px; color: #fff; overflow-wrap: anywhere; }
.sp-hint { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-c); margin-top: 6px; overflow-wrap: anywhere; }
.sp-caret { display: inline-block; width: .6em; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--sp-c); animation: sp-blink 1s steps(1) infinite; }
@keyframes sp-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes sp-blink { 50% { opacity: 0; } }

/* Classic */
.sp-plain { background: rgba(3,1,6,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sp-ring {
  width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--sp-c) 40%, transparent); color: var(--sp-c);
  animation: sp-ring 2.4s ease-in-out infinite;
}
.sp-ring svg { width: 28px; height: 28px; }
@keyframes sp-ring { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-c) 40%, transparent); } 50% { box-shadow: 0 0 0 18px transparent; } }

/* Minimal */
.sp-minimal { background: #050308; }
.sp-minimal .sp-who { font-size: clamp(22px, 6cqw, 34px); letter-spacing: -.02em; }
.sp-minimal .sp-hint { color: rgba(255,255,255,.55); margin-top: 14px; }
.sp-minimal .sp-hint::after {
  content: ''; display: block; height: 1px; width: 44px; margin: 12px auto 0; background: var(--sp-c);
  transform-origin: center; animation: sp-line 900ms var(--sp-ease) 200ms both;
}
@keyframes sp-line { from { transform: scaleX(0); } }

/* Typewriter */
.sp-typewriter { background: rgba(4,2,8,.94); font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; text-align: left; }
.sp-tw-l1 { font-size: clamp(20px, 5.5cqw, 30px); font-weight: 700; color: #fff; min-height: 1.4em; }
.sp-tw-l2 { font-size: 14px; color: var(--sp-c); margin-top: 6px; min-height: 1.4em; }
.sp-tw-p { opacity: .6; }

/* See-through: the profile shows, softly blurred, behind a glass pill */
.sp-blur { background: rgba(5,3,10,.3); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.sp-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid color-mix(in srgb, var(--sp-c) 45%, transparent);
  box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--sp-c) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
  animation: sp-breathe 3s ease-in-out infinite;
}
.sp-pill .sp-who { font-size: 15px; }
.sp-pill .sp-hint { margin: 0; font-size: 11px; }
@keyframes sp-breathe { 50% { box-shadow: 0 10px 56px -8px color-mix(in srgb, var(--sp-c) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.08); } }

/* Glitch */
.sp-gl { position: relative; }
.sp.sp-glitch { background: #050308 repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.sp-in > .sp-gl {
  font-weight: 800; font-size: clamp(30px, 10cqw, 68px); letter-spacing: -.02em; line-height: 1.1;
  animation: sp-jitter 3.2s steps(1) infinite;
}
.sp-in > .sp-gl::before, .sp-in > .sp-gl::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
}
.sp-in > .sp-gl::before { color: var(--sp-c); transform: translateX(-3px); animation: sp-slice 2.4s steps(1) infinite; }
.sp-in > .sp-gl::after { color: var(--sp-c2); transform: translateX(3px); animation: sp-slice 1.9s steps(1) infinite reverse; }
.sp.sp-glitch .sp-hint { margin-top: 12px; }
@keyframes sp-slice {
  0% { clip-path: inset(0 0 85% 0); } 10% { clip-path: inset(40% 0 35% 0); } 20% { clip-path: inset(75% 0 5% 0); }
  30% { clip-path: inset(10% 0 70% 0); } 45% { clip-path: inset(55% 0 20% 0); } 60% { clip-path: inset(0 0 100% 0); }
  80% { clip-path: inset(25% 0 50% 0); } 90% { clip-path: inset(85% 0 0 0); }
}
@keyframes sp-jitter { 0%, 88%, 100% { transform: none; } 90% { transform: translate(2px, -1px) skewX(-6deg); } 93% { transform: translate(-3px, 1px); } 96% { transform: skewX(4deg); } }

/* Ender swirl */
.sp-swirl { background: #06030C; }
.sp-swirl .sp-core::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; translate: -50% -50%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-c) 35%, transparent), transparent);
}
.sp-swirl .sp-who { font-size: clamp(22px, 6cqw, 32px); text-shadow: 0 0 24px var(--sp-c); }

/* Loading terrain */
.sp-terrain { background: #2B1E14; font-family: 'Silkscreen', 'JetBrains Mono', ui-monospace, monospace; }
.sp-mc-title { font-size: clamp(16px, 4.4cqw, 22px); color: #fff; text-shadow: 2px 2px 0 #3F3F3F; }
.sp-bar { width: min(240px, 70cqw); height: 10px; margin: 16px auto 18px; border: 2px solid #808080; background: #1A1A1A; padding: 1px; }
.sp-bar i { display: block; height: 100%; background: var(--sp-c); transform-origin: left; animation: sp-load 1.5s var(--sp-ease) 250ms both; }
.sp-terrain .sp-who { font-size: 14px; font-weight: 400; color: #E0E0E0; text-shadow: 2px 2px 0 #3F3F3F; }
.sp-terrain .sp-hint { font-size: 12px; letter-spacing: .06em; color: #FFFF55; text-shadow: 2px 2px 0 #3F3F15; margin-top: 8px; animation: sp-ready 400ms var(--sp-ease) 1.6s both; }
@keyframes sp-load { from { transform: scaleX(0); } }
@keyframes sp-ready { from { opacity: 0; transform: translateY(4px); } }

/* End portal */
.sp-portal { background: #04070C; }
.sp-portal .sp-who { font-size: clamp(22px, 6cqw, 32px); text-shadow: 0 0 18px var(--sp-c), 0 0 2px #000; }
.sp-portal .sp-hint { color: #fff; opacity: .8; text-shadow: 0 0 10px var(--sp-c); }

/* CRT */
.sp-crt { background: radial-gradient(120% 100% at 50% 50%, #0A140C, #010201 70%); font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
.sp-crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.7));
}
.sp-crt .sp-in { animation: sp-on 460ms var(--sp-ease) both, sp-flicker 4s steps(1) 500ms infinite; }
.sp-crt .sp-who { font-size: clamp(22px, 6cqw, 30px); font-weight: 700; color: var(--sp-c); text-shadow: 0 0 10px var(--sp-c); }
.sp-crt .sp-hint { letter-spacing: .1em; text-shadow: 0 0 8px var(--sp-c); }
@keyframes sp-on { from { opacity: 0; transform: scale(1.2, .01); } 50% { opacity: 1; transform: scale(1, .02); } }
@keyframes sp-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 48% { opacity: 1; } 72% { opacity: .9; } }

/* ---------- the picker on dashboard/customize.html ---------- */
.splash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.splash-opt {
  position: relative; aspect-ratio: 400 / 260; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: #000; border: 2px solid transparent; outline: 1px solid var(--line-soft, #251B40);
  transition: transform 200ms var(--ease-out), border-color 150ms;
}
@media (hover: hover) { .splash-opt:hover { transform: translateY(-2px); } }
.splash-opt:active { transform: scale(.97); }
.splash-opt.active { border-color: var(--accent, #B388FF); outline-color: transparent; box-shadow: 0 10px 24px -12px var(--accent, #B388FF); }
.splash-opt .sp-stage {
  position: absolute; left: 0; top: 0; width: 400px; height: 260px; transform-origin: 0 0; transform: scale(var(--k, .4));
  pointer-events: none; background: var(--sp-page, #0D0715);
}
.splash-opt .sp-host { position: absolute; inset: 0; }
/* a stand-in profile behind the screen, so the see-through style has something to show */
.sp-fake { position: absolute; left: 50%; top: 50%; width: 180px; translate: -50% -50%; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: grid; justify-items: center; gap: 8px; }
.sp-fake i { width: 46px; height: 46px; border-radius: 10px; background: var(--sp-fake-c, #B388FF); }
.sp-fake b { width: 110px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.7); }
.sp-fake span { width: 140px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.3); }
.splash-opt .lbl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 8px 6px; text-align: left;
  font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.splash-opt .lock {
  position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #1A0F2E; background: var(--accent, #B388FF);
}
.splash-opt .lock svg { width: 11px; height: 11px; }
.splash-opt.locked .sp-stage { filter: saturate(.6) brightness(.75); }
.splash-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.splash-color {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text, #F2E8FF);
  background: var(--panel-2, #1F1738); border: 1px solid var(--line, #332650); transition: transform 160ms var(--ease-out), border-color 150ms;
}
.splash-color:active { transform: scale(.97); }
.splash-color i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.splash-color.active { border-color: var(--accent, #B388FF); }

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after, .sp::after { animation: none !important; }
  .splash-opt, .splash-opt:hover, .splash-opt:active, .splash-color:active { transform: none; }
}