/* Visitors From Earth Widget */
.visitors-earth-widget {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #0f120f;
    color: #00ff99;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 1rem;
    border: 1px solid #008800;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  /* Globe container */
  
  
  .visitors-globe {
    width: min(100%, 400px); /* 🔥 never exceed screen width */
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* 🔥 ASCII scales with the globe */
    font-size: 1.35vmin;
  }
  
  
  
  
  /* ASCII globe styling */
  #output {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
  
    /* 🔥 ASCII inherits the globe’s size */
    font-size: 1em;
    line-height: 1em;
  }
  

  
  
  #ascii-globe {
    display: none; /* canvas for drawing only */
  }
  
  /* Visitor counter */
  .visitors-counter {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #00ff99;
  }
  
  /* Flags container */
  .visitors-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  
  .visitors-flag {
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
  }
  
  .visitors-flag:hover {
    transform: scale(1.3);
    color: #ff9900;
  }
  
  /* Bursting flags animation */
  .flag-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    animation: burst 1.2s ease-out forwards;
    pointer-events: none;
  }
  
  @keyframes burst {
    0% {
      opacity: 1;
      transform: translate(0,0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(var(--x), var(--y)) scale(0.5);
    }
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .visitors-counter { font-size: 2rem; }
    .visitors-flags { font-size: 1rem; }
  }
  
  @media (max-width: 480px) {
    .visitors-counter { font-size: 1.5rem; }
    .visitors-flags { font-size: 0.85rem; }
  }
  #visitors-earth {
    background-image: radial-gradient(
      circle farthest-corner at 75% 75%,
      rgba(0,0,16,1) 0%,
      rgba(0,16,32,1) 50%,
      rgba(0,64,48,1) 100%
    );
    border-radius: 100%;
    color: rgb(32, 220, 128);
    font-family: "Inconsolata", monospace;
    font-size: 3vmin;
    line-height: .55em;
    text-rendering: optimizeSpeed;
    will-change: contents;
    white-space: pre;
    width: 48vmin;
    height: 48vmin;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 597px) {
    .visitors-earth-widget {
      padding: 0.75rem;      /* tighter padding */
      max-width: 80%;       /* ensure it fits small screens */
    }
  
    .visitors-globe {
      max-width: 300px;      /* optional: tighter globe cap */
      margin-bottom: 0.5rem; /* reduce spacing below globe */
    }
  
    .visitors-counter {
      font-size: 1.8rem;     /* scale counter down slightly */
    }
  
    .visitors-flags {
      font-size: 0.9rem;     /* scale flags down */
      gap: 4px;
    }
  }