.top-red{
  color: #FF2222 !important;
  border-color: #FF2222 !important;
  background: #232323 !important;
}
/* Fiery blob color override for VRChat Worlds */
.blob-fiery .blob-layer-1 {
  background: linear-gradient(120deg, #FF2222, #FF6A00, #FFB300, #FFF200, #111111);
  background-size: 600% 600%;
  animation: liquidMorph 3.2s ease-in-out infinite, rapidGradientShift 6s ease-in-out infinite;
  box-shadow:
    0 0 18px rgba(255, 34, 34, 0.5),
    0 0 30px rgba(255, 106, 0, 0.35),
    0 0 42px rgba(255, 179, 0, 0.25),
    inset 0 0 10px rgba(255,255,255,0.08);
}
.blob-fiery .blob-layer-2 {
  background: radial-gradient(circle, #FF6A00, #FF2222 80%, #111111 100%);
  animation: liquidMorph 3.6s ease-in-out infinite reverse, liquidPulse 4.5s ease-in-out infinite;
  filter: blur(3px);
  opacity: 0.95;
}
.blob-fiery .blob-layer-3 {
  background: radial-gradient(ellipse, #FFB300, #FF2222 60%, transparent 80%);
  animation: liquidMorph 4.0s ease-in-out infinite, liquidRotate 18s linear infinite;
  filter: blur(4px);
  opacity: 0.92;
}
/* PayPal overlap button styling */
.paypal-overlap {
  position: fixed;
  right: 32px;
  bottom: 32px;
  left: auto;
  top: auto;
  transform: none;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.10);
  padding: 18px 24px 12px 24px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(80,80,120,0.10);
  pointer-events: auto;
}
/* MHW 2 VRC — Liquid Background Styles */
:root{
  --bg: #fff;
  --text: #000;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:0;
}
.content{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center; /* keep horizontally centered */
  justify-content:flex-start; /* move content to top */
  text-align:center;
  padding:6vh 6vw 4vh 6vw; /* add top padding so header sits near top */
}
h1{
  font-size:clamp(36px,8vw,96px);
  font-weight:900;
  margin:0 0 12px 0;
  letter-spacing:-0.02em;
  color:var(--text);
}

/* Top placeholder buttons */
.top-buttons{
  display:flex;
  gap:12px;
  position:fixed;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  margin:0;
  z-index:20;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 98vw;
}

@media (max-width: 700px) {
  .top-buttons {
    position: static;
    transform: none;
    margin: 18px auto 0 auto;
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .content {
    padding-top: 18vw;
  }
}
.top-button{
  background: #232323 !important;
  border: 2px solid transparent;
  padding: 8px 14px;
  font-size: clamp(14px,2.2vw,18px);
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.top-button:focus{ outline: none; transform: translateY(-2px); }
.top-button.pressed{ transform: scale(0.98); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.top-lilac{ color: #BFA1FF; border-color: rgba(191,161,255,0.9); }
.top-pink{ color: #D86C9F; border-color: rgba(216,108,159,0.9); }
.top-mint{ color: #5CCDA2; border-color: rgba(92,205,162,0.9); }
.top-sky{ color: #4FB7E6; border-color: rgba(79,183,230,0.9); }
.top-indigo{ color: #4B3C8C !important; border-color: #4B3C8C !important; background: #232323 !important; }
.top-hotpink{ color: #FF267A !important; border-color: #FF267A !important; background: #232323 !important; }
/* Keep outline color, but add visible border */
.top-button.top-lilac, .top-button.top-pink, .top-button.top-mint, .top-button.top-sky {
  border-color: currentColor;
}
.tagline{
  margin:0;
  font-size:clamp(14px,2.2vw,20px);
  opacity:0.95;
  max-width:900px;
}
@media (prefers-reduced-motion: reduce){
  #bg{display:none}
  #blobBg{display:none}
}

/* Blob background (integrated from user's liquidblobsfrontend) */
body{
  /* pastel vertical fallback gradient for areas not covered by blobs */
  background: linear-gradient(180deg, #e9fff6 0%, #e9f7ff 30%, #f3e8ff 60%, #ffeaf6 100%);
}

.blob-root {
  position: fixed;
  left: var(--blob-left, 50%);
  top: var(--blob-top, 45%);
  transform: translate(-50%, -50%);
  width: 60vmax;
  height: 60vmax;
  pointer-events: none;
  z-index: 0;
}

.blob{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  filter: blur(28px) contrast(1.05) saturate(1.05);
  mix-blend-mode: screen;
  opacity: 0.95;
}

.blob-layer-1{
  background: linear-gradient(120deg, rgba(141,255,199,1), rgba(150,222,255,0.95), rgba(210,180,255,0.95));
  background-size: 600% 600%;
  animation: colorShift 12s ease-in-out infinite, liquidMorph 18s ease-in-out infinite;
}

.blob-layer-2{
  background: radial-gradient(circle at 30% 30%, rgba(210,180,255,0.92), rgba(175,85,255,0.88));
  mix-blend-mode: screen;
  filter: blur(40px);
  animation: colorShift 16s ease-in-out infinite reverse, liquidMorph 20s ease-in-out infinite reverse, liquidPulse 8s ease-in-out infinite;
  opacity:0.95;
}

.blob-layer-3{
  background: radial-gradient(ellipse at 70% 70%, rgba(255,80,170,0.9), rgba(175,85,255,0.78) 60%, transparent 80%);
  filter: blur(48px);
  animation: colorShift 22s ease-in-out infinite reverse, liquidRotate 40s linear infinite, liquidMorph 24s ease-in-out infinite;
  opacity:0.9;
}

@keyframes colorShift {
  0%{ background-position: 0% 50%; }
  25%{ background-position: 50% 20%; }
  50%{ background-position: 100% 50%; }
  75%{ background-position: 50% 80%; }
  100%{ background-position: 0% 50%; }
}

@keyframes liquidMorph {
  0% { border-radius: 45% 55% 35% 65% / 50% 60% 40% 50%; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  25% { border-radius: 65% 35% 75% 25% / 40% 80% 20% 60%; transform: translate(-50%,-50%) scale(1.05) rotate(48deg); }
  50% { border-radius: 25% 75% 45% 55% / 70% 30% 60% 40%; transform: translate(-50%,-50%) scale(0.95) rotate(96deg); }
  75% { border-radius: 80% 20% 60% 40% / 30% 70% 50% 50%; transform: translate(-50%,-50%) scale(1.1) rotate(144deg); }
  100% { border-radius: 45% 55% 35% 65% / 50% 60% 40% 50%; transform: translate(-50%,-50%) scale(1) rotate(360deg); }
}

@keyframes rapidGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes liquidPulse {
  0%,100%{ transform: translate(-50%,-50%) scale(1); opacity:0.95; }
  50%{ transform: translate(-50%,-50%) scale(1.08); opacity:1; }
}

@keyframes liquidRotate {
  0%{ transform: translate(-50%,-50%) rotate(0deg) scale(1); }
  100%{ transform: translate(-50%,-50%) rotate(360deg) scale(1); }
}

/* ensure content sits above the blobs */
.content{ z-index:3; position:relative }

/* Matrix canvas (binary rain) behind blobs */
#matrix{ position: fixed; inset:0; z-index:0; pointer-events:none }

/* Exact circular morphing blob styles (adapted from liquidblobsfrontend.html) */
.morphing-container{
  position: fixed;
  width: 60vmin;
  height: 60vmin;
  z-index: 1;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.morphing-container.visible{ display:flex }
.morphing-container.centered{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.morphing-container.main-blob{ width: 34vmin; height: 34vmin; }
.morphing-container.small{ width: 18vmin; height: 18vmin; }
.morphing-container.tiny{ width: 18vmin; height: 18vmin; }

/* fixed positions for extra blobs */
.morphing-container.pos-left{ left: 16%; top: 28%; transform: translate(-50%,-50%); }
.morphing-container.pos-right{ left: 84%; top: 24%; transform: translate(-50%,-50%); }
.morphing-container.pos-bottom-left{ left: 24%; top: 82%; transform: translate(-50%,-50%); }

/* ensure all blob layers are perfectly centered within their container */
.blob{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transform-origin: center center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: liquidMorph 3.2s ease-in-out infinite;
  filter: blur(2px) contrast(1.15) saturate(1.1);
}
.blob-layer-1{
  background: linear-gradient(45deg, #c84b6e, #d86c9f, #8b5fd9, #4b2b8c, #7d4a86);
  background-size: 600% 600%;
  animation: liquidMorph 3.2s ease-in-out infinite, rapidGradientShift 6s ease-in-out infinite;
  box-shadow:
    0 0 18px rgba(102, 0, 153, 0.5),
    0 0 30px rgba(153, 50, 204, 0.35),
    0 0 42px rgba(255, 154, 193, 0.25),
    inset 0 0 10px rgba(255,255,255,0.08);
}
.blob-layer-2{
  background: radial-gradient(circle, #c86b98, #8b3c7a);
  animation: liquidMorph 3.6s ease-in-out infinite reverse, liquidPulse 4.5s ease-in-out infinite;
  filter: blur(3px);
  opacity: 0.95;
}
.blob-layer-3{
  background: radial-gradient(ellipse, #bf3a5f, #6f2b6f 60%, transparent 80%);
  animation: liquidMorph 4.0s ease-in-out infinite, liquidRotate 18s linear infinite;
  filter: blur(4px);
  opacity: 0.92;
}

@keyframes rapidGradientShift {
  0% { background-position: 0% 50%; }
  20% { background-position: 100% 80%; }
  40% { background-position: 0% 100%; }
  60% { background-position: 80% 20%; }
  80% { background-position: 20% 0%; }
  100% { background-position: 0% 50%; }
}

/* staggered delays for different containers */
.morphing-container.delay-0 .blob{ animation-delay: 0s; }
.morphing-container.delay-1 .blob{ animation-delay: 0.45s; }
.morphing-container.delay-2 .blob{ animation-delay: 0.95s; }
.morphing-container.delay-3 .blob{ animation-delay: 1.5s; }

/* Small/tiny blob animation speed variants */
.morphing-container.small .blob-layer-1{
  animation: liquidMorph 2.6s ease-in-out infinite, rapidGradientShift 5s ease-in-out infinite;
}
.morphing-container.small .blob-layer-2{
  animation: liquidMorph 2.8s ease-in-out infinite reverse, liquidPulse 3.6s ease-in-out infinite;
  filter: blur(2.5px);
}
.morphing-container.small .blob-layer-3{
  animation: liquidMorph 3.2s ease-in-out infinite, liquidRotate 12s linear infinite;
  filter: blur(3px);
}

.morphing-container.tiny .blob-layer-1{
  animation: liquidMorph 2.2s ease-in-out infinite, rapidGradientShift 4s ease-in-out infinite;
}
.morphing-container.tiny .blob-layer-2{
  animation: liquidMorph 2.4s ease-in-out infinite reverse, liquidPulse 3s ease-in-out infinite;
  filter: blur(1.8px);
  opacity:0.95;
}
.morphing-container.tiny .blob-layer-3{
  animation: liquidMorph 2.8s ease-in-out infinite, liquidRotate 10s linear infinite;
  filter: blur(2.2px);
  opacity:0.9;
}