:root {
  --bg: #a487c9;
  --ink: #4b2a6b;            /* plum text on the milky buttons */
  --glass: rgba(255, 255, 255, .64);
  --glass-hi: rgba(255, 255, 255, .86);
  --rim: rgba(255, 255, 255, .96);
  --pink: #ff86c8;
  --lavender: #b78bff;
  --blue: #8fc0ff;
  --glow: rgba(196, 72, 150, .42);
  --brand: var(--lavender);
}

* { box-sizing: border-box; margin: 0; }

html {
  /* Shown past the page edge if the browser rubber-bands; matches the sky's top */
  background-color: var(--bg);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { min-height: 100%; }

body {
  font-family: "Fredoka", system-ui, -apple-system, sans-serif;
  color: #fff;
  /* Fallback for when the animated sky (sky.js) can't run */
  background: linear-gradient(180deg, #a487c9 0%, #c08fc4 32%, #f9b2a8 47%, #f59ab0 53%, #a585c6 70%, #f2709f 100%);
  display: flex;
  justify-content: center;
  padding: 56px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Animated pastel sky, drawn by sky.js */
.sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* As tall as the viewport ever gets, so no gap opens at the bottom when a
     phone browser's toolbars slide away */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sky canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.sprite { position: absolute; }

/* Profile */
.avatar-ring {
  display: inline-block;
  padding: 5px;
  border-radius: 50%;
  /* pastel rainbow, echoing the fringe on the stars */
  background: conic-gradient(from 200deg, #ff9ed8, #ffe98a, #b6ffd9, #a9d4ff, #d2b6ff, #ff9ed8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 12px 30px -8px var(--glow);
  transition: transform .25s ease;
}
@media (hover: hover) {
  .avatar-ring:hover { transform: scale(1.04) rotate(-2deg); }
}
.avatar {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
  background: #fff;
}

/* Bubbly title: white face with a candy-coloured 3D edge */
h1 {
  margin-top: 16px;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
  text-shadow:
    0 1px 0 #ffd3ec,
    0 2px 0 #ff9fd2,
    0 3px 0 #f584c4,
    0 4px 0 #cf8bea,
    0 5px 0 #a98be6,
    0 10px 22px rgba(120, 40, 140, .45);
}
.tagline {
  margin-top: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(120, 50, 130, .75);
}

/* Links: milky candy-glass pills */
.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 2px solid var(--rim);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .01em;
  /* soft pink lift underneath, plus a darker lip along the bottom edge */
  box-shadow: 0 8px 20px -8px var(--glow), inset 0 -3px 0 rgba(255, 150, 205, .32);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.link > span { flex: 1; text-align: center; margin-right: 38px; /* balances the icon */ }
/* Each icon sits in its own tinted bead */
.link .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  /* Without this the round corners also clip the drawing itself, cutting the
     corners off square logos like Instagram's */
  overflow: visible;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 30%, #fff);
}
.link:hover,
.link:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #fff, var(--glass-hi));
  border-color: color-mix(in srgb, var(--brand) 45%, #fff);
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--brand) 55%, transparent),
    inset 0 -3px 0 color-mix(in srgb, var(--brand) 28%, transparent);
  outline: none;
}
.link:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px -6px var(--glow), inset 0 -1px 0 rgba(255, 150, 205, .32);
}

.link.yt { --brand: #ff3b3b; }
.link.tt { --brand: #fe2c55; }
.link.ig { --brand: #e1306c; }
.link.tw { --brand: #2b1740; }
.link.dc { --brand: #5865f2; }

/* The main call to action gets the full candy gradient */
.link.primary {
  --brand: #9146ff;
  background: linear-gradient(120deg, var(--pink), var(--lavender) 55%, var(--blue));
  color: #fff;
  text-shadow: 0 1px 6px rgba(110, 40, 150, .55);
  box-shadow: 0 10px 24px -8px rgba(170, 80, 220, .7), inset 0 -3px 0 rgba(120, 70, 200, .3),
    inset 0 2px 0 rgba(255, 255, 255, .45);
}
.link.primary .icon { background: #fff; box-shadow: none; }
.link.primary::after {
  content: "✦";
  position: absolute;
  right: 20px;
  font-size: .9rem;
  text-shadow: none;
  opacity: .95;
}
.link.primary:hover,
.link.primary:focus-visible {
  background: linear-gradient(120deg, #ff9bd2, #c4a0ff 55%, #a5ccff);
  border-color: var(--rim);
  box-shadow: 0 14px 28px -8px rgba(170, 80, 220, .8), inset 0 -3px 0 rgba(120, 70, 200, .3),
    inset 0 2px 0 rgba(255, 255, 255, .45);
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}

/* Support */
.support {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid var(--rim);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 6px 14px -8px var(--glow), inset 0 -2px 0 rgba(255, 150, 205, .32);
  transition: transform .16s ease, background .16s ease;
}
.pill .icon { width: 16px; height: 16px; color: #ff5fa2; }
.pill:hover, .pill:focus-visible { transform: translateY(-1px); background: #fff; outline: none; }

footer {
  margin-top: 32px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 500;
}
footer p {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  border: 2px solid rgba(255, 255, 255, .7);
}
footer a { color: inherit; }
footer a:hover { color: #c0368a; }

/* Maker credit: pinned to the bottom-right corner; on narrow screens it sits
   under the footer instead so it can't cover the email line */
.credit {
  position: fixed;
  right: 14px;
  bottom: 10px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: #c4bfd2;
  opacity: .7;
}
@media (max-width: 640px) {
  body { padding-top: 36px; }
  h1 { font-size: 2.4rem; }
  .links { margin-top: 24px; }
  footer { margin-top: 24px; }
  .credit {
    position: static;
    margin-top: 16px;
    text-align: right;
  }
}

/* On touch screens a tapped link would otherwise stay stuck in its hover look */
@media (hover: none) {
  .link:hover {
    transform: none;
    background: linear-gradient(180deg, var(--glass-hi), var(--glass));
    border-color: var(--rim);
    box-shadow: 0 8px 20px -8px var(--glow), inset 0 -3px 0 rgba(255, 150, 205, .32);
  }
  .link.primary:hover {
    background: linear-gradient(120deg, var(--pink), var(--lavender) 55%, var(--blue));
    box-shadow: 0 10px 24px -8px rgba(170, 80, 220, .7), inset 0 -3px 0 rgba(120, 70, 200, .3),
      inset 0 2px 0 rgba(255, 255, 255, .45);
  }
  .pill:hover { transform: none; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); }
  footer a:hover { color: inherit; }
}

/* Live indicator: live.js adds .is-live to <html> while the stream is on */
.avatar-ring { position: relative; }
.live-badge {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: linear-gradient(120deg, #ff3b6b, #ff5fa2);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  box-shadow: 0 4px 12px -2px rgba(255, 59, 107, .7);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .25; } }
.is-live .live-badge { display: inline-flex; }
.is-live .avatar-ring {
  background: conic-gradient(from 200deg, #ff3b6b, #ff9ed8, #ffd36b, #ff5fa2, #ff3b6b);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 0 26px 2px rgba(255, 70, 130, .75);
}
.is-live h1 { margin-top: 24px; } /* room for the badge */
.live-detail {
  display: block;
  margin-top: 1px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.live-detail[hidden] { display: none; }

/* Retro pixel cursor (cursor.js) */
.cursor-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
.retro-cursor,
.retro-cursor * { cursor: none !important; }

@media (prefers-reduced-motion: reduce) {
  .link, .pill, .avatar-ring { transition: none; }
  .live-dot { animation: none; }
}