:root {
    --bg: #0f0f1a;
    --accent: #00d4ff;
    --text: #e0e0ff;
    --glow: 0 0 25px rgba(0, 212, 255, 0.6);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Courier New', monospace;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
  }
  .particle-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  .star {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: twinkle 4s infinite;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.9; }
  }
  .logo {
    font-size: 100px;
    margin: 30px auto;
    filter: drop-shadow(0 0 20px var(--accent));
    animation: float 6s infinite ease-in-out;
    display: block;
    text-align: center;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
  }
  h1 {
    font-size: 3.5em;
    color: var(--accent);
    text-shadow: var(--glow);
    margin: 10px 0;
    text-align: center;
  }
  .tagline {
    font-size: 1.3em;
    color: #88aaff;
    margin-bottom: 20px;
    text-align: center;
  }
  .search-bar {
    margin-bottom: 20px;
    padding: 10px;
    width: 300px;
    max-width: 90%;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--accent);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    text-align: center;
    display: block;
    margin: 20px auto;
  }
  .search-bar::placeholder { color: #667; }
  .container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    perspective: 1000px; /* 3D space for floating */
  }
  .rock {
    position: absolute;
    width: 150px; /* Smaller for floating crowd */
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(0px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
    /* NO BORDERS! Pure floating */
    filter: drop-shadow(var(--glow));
    opacity: 0;
    animation: fadeInFloat 1s forwards;
    cursor: pointer;
  }
  .rock img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%; /* Soft rock edges */
    transition: transform 0.6s ease;
  }
  .rock:hover {
    transform: translate(-50%, -50%) rotateY(360deg) translateZ(50px) translateY(-30px) scale(1.2);
    filter: drop-shadow(0 0 50px rgba(0, 212, 255, 0.9));
    z-index: 10;
  }
  .rock:hover img {
    transform: rotate(10deg);
  }
  .rock::after {
    content: attr(data-id);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7em;
    color: var(--accent);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
    pointer-events: none;
  }
  @keyframes fadeInFloat {
    to {
      opacity: 1;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ(0px);
    }
  }
  .loading-more {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent);
    font-size: 1.1em;
    opacity: 0.7;
    display: none;
  }
  .progress {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1em;
    color: #88aaff;
  }
  .contract-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 1em;
    margin: 40px 0 20px;
    display: inline-block;
    text-shadow: var(--glow);
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .contract-link:hover { text-shadow: 0 0 35px rgba(0, 212, 255, 1); }
  footer {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    color: #667;
    text-align: center;
  }
  @media (max-width: 600px) {
    .rock { width: 120px; height: 120px; }
    h1 { font-size: 2.8em; }
    .search-bar { width: 90%; }
  }