body {
      margin: 0;
      height: 100vh;
      background-color: #0f172a;
      font-family: monospace;
      color: #38bdf8;
      overflow: hidden;
    }
    .overlay, .puzzle-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(15, 23, 42, 0.95);
      z-index: 1000;
      flex-direction: column;
      backdrop-filter: blur(4px);
    }

    .activate-button {
      padding: 1rem 2rem;
      font-size: 1.25rem;
      font-weight: bold;
      color: #38bdf8;
      background: transparent;
      border: 2px solid #38bdf8;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 0 20px #38bdf8;
      transition: background 0.3s, color 0.3s;
    }
    .activate-button:hover {
      background: #38bdf8;
      color: #0f172a;
    }
    .sonar-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80vmin;
      height: 80vmin;
      opacity: 0;
      transition: opacity 0.5s ease-in;
      z-index: 1;
    }
    .radar-sweep {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border-radius: 50%;
      background: conic-gradient(rgba(56,189,248,0.15) 0deg, transparent 60deg);
      animation: rotateSweep 5s linear infinite;
    }
    .sonar-circle, .sonar-wave, .sonar-glow {
      position: absolute;
      top: 50%; left: 50%;
      width: 2.5vmin; height: 2.5vmin;
      margin: -1.25vmin 0 0 -1.25vmin;
      border-radius: 50%;
    }
    .sonar-circle {
      background: #38bdf8;
      box-shadow: 0 0 15px #38bdf8;
      z-index: 3;
    }
    .sonar-wave {
      background: rgba(56, 189, 248, 0.15);
      z-index: 1;
    }
    .sonar-glow {
      background: rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 30px 10px rgba(56, 189, 248, 0.7);
      animation: glowPulse 1s ease-out;
      opacity: 0;
      z-index: 2;
    }
    .sonar-blip {
      position: absolute;
      top: 35%; left: 60%;
      width: 1.5vmin; height: 1.5vmin;
      border-radius: 50%;
      background-color: #38bdf8;
      box-shadow: 0 0 12px #38bdf8;
      cursor: pointer;
      animation: blipPulse 3.1s infinite ease-in-out;
      z-index: 5;
      display: none;
    }
    .pulse-label {
      position: absolute;
      top: 55%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.25rem;
      letter-spacing: 0.2em;
      opacity: 0.7;
      animation: fadePulse 3.1s infinite ease-in-out;
      z-index: 4;
    }
    @keyframes rotateSweep {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes glowPulse {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(10); opacity: 0; }
    }
    @keyframes fadePulse {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 0.8; }
    }
    @keyframes blipPulse {
      0%, 100% {
        opacity: 0;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }
    .puzzle-grid {
      display: grid;
      grid-template-columns: repeat(3, 60px);
      grid-gap: 8px;
      margin-top: 1rem;
      justify-content: center;
    }
    .tile {
      width: 60px;
      height: 60px;
      background-color: #1e293b;
      border: 2px solid #38bdf8;
      font-size: 1.2rem;
      font-weight: bold;
      color: #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
    }
    .message {
      font-size: 14px;
      margin-top: 20px;
      white-space: pre-line;
      text-align: center;
    }
    .hidden { display: none; }
   
    button {
      padding: 10px 20px;
      font-size: 14px;
      background: #1e40af;
      color: #fff;
      border: none;
      cursor: pointer;
      margin-top: 1rem;
    }