/* =======================
   BODY & BACKGROUND
   ======================= */
   body {
    margin: 0;
    /* =background: #333333;==== */
    background: #f5f3f0;
    display: flex;             /* Flexbox for centering */
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    min-height: 100vh;         /* full viewport height */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  /* =======================
     TREE CONTAINER
         ======================= */
 .tree-container {
  max-width: 1000px;
  margin: auto;
}

  .zoom-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    cursor: grab;
  }

  /* =======================
     TREE WRAPPER

  .tree-wrapper {
    position: relative;
    width: 100%;
  }
     ======================= */

  .tree-wrapper {
    transform-origin: 0 0;
    will-change: transform; /* smoother performance */
    
  }
  
  /* =======================
     TREE IMAGE
     ======================= */
  .tree-wrapper img {
    width: 100%;
    height: auto;    /* keeps aspect ratio */
    display: block;
    user-select: none;        /* prevents text/image selection */
  -webkit-user-drag: none;  /* disables image dragging (Chrome/Safari) */
  pointer-events: none;     /* stops image intercepting mouse */
  }
  
  /* =======================
     HOTSPOTS — TESTING STYLE
     ======================= */
  .hotspot {
    position: absolute;
    width: 10%;      /* percentage of container width */
    height: 10%;     /* makes it square */
    transform: translate(-50%, -50%);
    border-radius: 6px; /* slightly rounded square */
    cursor: pointer;
  
    background: rgba(255, 255, 255, 0.0); /* visible blue for testing */
    box-shadow: 0 0 20px rgba(0, 119, 255, 0.8);
  
    transition: 0.2s;
  }
  
  .hotspot:hover {
    background: rgba(0, 119, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 119, 255, 1);
  }


  .home-button {
    position: fixed;
    top: 15px;
    left: 15px;
    font-size: 24px;
    text-decoration: none;
  
    background: rgba(255,255,255,0.9);
    padding: 10px 12px;
    border-radius: 10px;
  
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  
    transition: 0.2s;
  }
  
  .home-button:hover {
    transform: scale(1.1);
    background: white;
  }

  .back-button {
    position: fixed;
    top: 15px;
    left: 70px; /* sits next to home button */
  
    font-size: 24px;
    text-decoration: none;
  
    background: rgba(255,255,255,0.9);
    padding: 10px 12px;
    border-radius: 10px;
  
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  
    transition: 0.2s;
  }
  
  .back-button:hover {
    transform: scale(1.1);
    background: white;
  }