:root {
  --brand-pink: #ff00ae;
  --text: #f5f7ff;
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: #090910;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 0, 174, 0.15), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(118, 49, 255, 0.18), transparent 40%),
    linear-gradient(160deg, #090910 0%, #0d1021 70%, #07070b 100%);
  background-size: 170% 170%, 170% 170%, 140% 140%;
  background-position: 16% 12%, 78% 22%, 100% 100%;
  animation: pageFlow 14s ease-in-out infinite alternate;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Inter", sans-serif;
  cursor: default;
  background-color: #090910;
  background: transparent;
  color: var(--text);
  padding: 2rem 1rem 3rem;
  overscroll-behavior: none;
}

.bg-glow {
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 75% 65%, rgba(255, 0, 174, 0.16), transparent 42%),
    radial-gradient(circle at 15% 85%, rgba(78, 18, 222, 0.18), transparent 40%);
  filter: blur(30px);
}

.site-header, main { width: min(1080px, 96%); margin: 0 auto; }

.site-header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.8vw, 3.8rem);
  line-height: 1;
  color: var(--brand-pink);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  border: 1px solid transparent;
}

.live-badge .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; }
.live-badge.not-live { color: #9ea0b2; border-color: rgba(158, 160, 178, 0.45); background: rgba(255, 255, 255, 0.02); }
.live-badge.live { color: var(--brand-pink); border-color: rgba(255, 0, 174, 0.55); background: rgba(255, 0, 174, 0.12); box-shadow: 0 0 30px rgba(255, 0, 174, 0.26); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.socials a {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.socials a svg { width: 28px; height: 28px; }
.socials a:hover { color: var(--brand-pink); transform: translateY(-2px) scale(1.06); }

.tools-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tool-card {
  opacity: 0;
  animation: cardFade 560ms ease forwards;
  grid-column: span 12;
  min-height: 148px;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--card-bg, linear-gradient(125deg, #202030, #35355a));
  background-size: 180% 180%;
  background-position: 72% 50%;
  transition: background-position 360ms ease;
  z-index: 0;
}

.tool-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--card-border);
  pointer-events: none;
  z-index: 4;
}

.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-7px);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.42);
}

.tool-card:hover::before,
.tool-card:focus-visible::before {
  background-position: 100% 50%;
}

.bg-emoji {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(4.1rem, 10vw, 6.2rem);
  line-height: 1;
  opacity: 0.22;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.tool-card .card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

.tool-card * {
  cursor: inherit;
  user-select: none;
}

.tool-card h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.genre-chip {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  z-index: 3;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 12, 24, 0.3);
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
}

.card-tag {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  z-index: 3;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.clip-queue { --card-bg: linear-gradient(125deg, #030303 0%, #1a0732 40%, #5f1de2 100%); }
.women { --card-bg: linear-gradient(120deg, #ffffff 0%, #f5f6ff 55%, #ffffff 100%); color: #111; }
.wheel { --card-bg: linear-gradient(120deg, #14163a 0%, #4a2ab8 58%, #ff6f00 100%); }
.bingo { --card-bg: linear-gradient(110deg, #1b1228, #2637b9, #1f8f91); }
.streamshow { --card-bg: linear-gradient(115deg, #190826 0%, #4d11b8 55%, #8338ec 100%); }
.node-graph { --card-bg: linear-gradient(120deg, #101a2f 0%, #235f7a 56%, #45b58d 100%); }
.roulette { --card-bg: linear-gradient(120deg, #0b3d2c 0%, #941f28 52%, #121212 100%); }
.genlock { --card-bg: linear-gradient(120deg, #12151e 0%, #2c3557 52%, #3f8f99 100%); }
.ovalay { --card-bg: linear-gradient(120deg, #102a6b 0%, #1c63b8 50%, #ffd447 100%); }
.shoppy { --card-bg: linear-gradient(120deg, #131921 0%, #232f3e 58%, #ff9900 100%); }
.grid-tool { --card-bg: linear-gradient(120deg, #16213b 0%, #224f9b 56%, #52d5ff 100%); }
.mystery { --card-bg: linear-gradient(120deg, #181824 0%, #2a2a3d 60%, #44445f 100%); }
.roulette .bg-emoji { left: 50%; right: auto; transform: translate(-50%, -50%); }
.shoppy h2 {
  font-family: "Arial Black", "Inter", sans-serif;
  letter-spacing: 0.05em;
  color: #ffb341;
}

.streamshow h2 {
  background: linear-gradient(90deg, #ff00ae, #b57bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.women .card-tag { color: #4a4a55; }
.women .genre-chip {
  color: #3f3f4f;
  border-color: rgba(55, 55, 70, 0.35);
  background: rgba(255, 255, 255, 0.82);
}

.tools-grid > .tool-card:nth-child(1) { animation-delay: 80ms; }
.tools-grid > .tool-card:nth-child(2) { animation-delay: 150ms; }
.tools-grid > .tool-card:nth-child(3) { animation-delay: 220ms; }
.tools-grid > .tool-card:nth-child(4) { animation-delay: 290ms; }
.tools-grid > .tool-card:nth-child(5) { animation-delay: 360ms; }
.tools-grid > .tool-card:nth-child(6) { animation-delay: 430ms; }
.tools-grid > .tool-card:nth-child(7) { animation-delay: 500ms; }
.tools-grid > .tool-card:nth-child(8) { animation-delay: 570ms; }
.tools-grid > .tool-card:nth-child(9) { animation-delay: 640ms; }
.tools-grid > .tool-card:nth-child(10) { animation-delay: 710ms; }
.tools-grid > .tool-card:nth-child(11) { animation-delay: 780ms; }

@keyframes cardFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pageFlow {
  0% {
    background-position: 16% 12%, 78% 22%, 100% 100%;
  }
  100% {
    background-position: 0% 2%, 98% 0%, 0% 0%;
  }
}

.site-footer {
  width: min(1080px, 96%);
  margin: 1.8rem auto 0;
  padding: 0.3rem 0 0;
}

.site-footer p {
  margin: 0;
  color: rgba(230, 232, 255, 0.72);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

@media (min-width: 760px) {
  .tool-card { min-height: 170px; }
  .clip-queue, .women { grid-column: span 6; }
  .wheel, .bingo, .streamshow, .node-graph, .roulette, .genlock, .ovalay, .shoppy, .grid-tool { grid-column: span 4; }
}