html, body {
    margin:0;
    padding:0;
    overflow:hidden;
    background:#f3f4f7;
    touch-action:none;
  }
  
  canvas{
    display:block;
    position: fixed;
    top: 0;
    left: 0;
    cursor: crosshair;
  }

  #intro{
    position: fixed;
    bottom: 0;
    left: 2%;
    width: auto;
    color: black;
    font-size: 77px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10001;
  }

  #marquee{
  position:fixed;
  top:3%;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  font-size:20px;
  color:black;
  z-index:1000;
  font-family: monospace;
  }

  a{
    color:#7f00ff;
    text-decoration: none;
  }

  /* Connection Status Overlay */
  .connection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #231a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .connection-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .connection-overlay.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .connection-content {
    text-align: center;
    color: white;
  }

  .spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .connection-content p {
    font-size: 18px;
    font-family: monospace;
    margin: 0;
  }

  /* Connection Status Indicator (bottom right) */
  .connection-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #231a0f;
    color: #ff9700;
    border-radius: 20px;
    font-size: 12px;
    font-family: monospace;
    z-index: 9999;
    transition: background 0.3s ease;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
  }

  .status-dot.connecting {
    background: #ff9800;
    animation: pulse 1s infinite;
  }

  .status-dot.connected {
    background: #4caf50;
    animation: none;
  }

  .status-dot.disconnected {
    background: #f44336;
    animation: none;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .connection-status.connected {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Disable canvas interaction when disconnected */
  canvas.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
  }