html, body {
    height: 100%;
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    overflow: hidden;
    background: url('watercolor-bg.png') no-repeat center center/cover;
  }
  
  /* Main container */
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
  }
  
  /* Header at top */
  .header-wrapper {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 20px;
  }
  
  h1 {
    font-family: 'Amatic SC', cursive;
    font-size: 5.625rem;  /* 25% bigger */
    margin: 0 0 10px 0;
    color: #18303b;
    text-align: center;
  }
  
  /* Axolotl wrapper */
  .axo-wrapper {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center; 
    transform: translateY(-15%); /* move axolotl up slightly */
  }
  
  .axolotl {
    width: 50vw;
    max-width: 600px;
    height: auto;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
  }
  
  .axolotl:active {
    transform: scale(0.97);
  }
  
  /* Advice */
  .advice {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    max-width: 80vw;
    font-size: 2rem;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    color: #18303b;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    transition: opacity 3s ease, transform 1s ease;
  }
  
  .advice.show {
    opacity: 1;
  }
  
  .advice.fade-out {
    opacity: 0;
  }
  
  /* Blur overlay */
  .blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0px);
    z-index: 20;
    pointer-events: none;
    transition: backdrop-filter 3s ease;
  }
  
  .blur-overlay.active {
    backdrop-filter: blur(12px) brightness(0.85);
  }
  
  /* Bubble container */
  .bubble-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
  }
  
  .bubble-container .bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    animation: rise var(--rise-duration) linear infinite;
  }
  
  /* Bubble rise with horizontal sway */
  @keyframes rise {
    0% {
      transform: translate(var(--x-start, 0px), 80%) scale(var(--scale, 1));
      opacity: var(--opacity-start, 0.8);
    }
    25% {
      transform: translate(calc(var(--x-start, 0px) + var(--x-sway1, 10px)), 60%) scale(var(--scale, 1.2));
      opacity: 0.6;
    }
    50% {
      transform: translate(calc(var(--x-start, 0px) + var(--x-sway2, -10px)), 40%) scale(var(--scale, 1.1));
      opacity: 0.5;
    }
    75% {
      transform: translate(calc(var(--x-start, 0px) + var(--x-sway3, 8px)), 20%) scale(var(--scale, 1.0));
      opacity: 0.3;
    }
    100% {
      transform: translate(calc(var(--x-start, 0px) + var(--x-sway4, -5px)), 0%) scale(var(--scale, 0.8));
      opacity: 0;
    }
  }
  
  /* Footer */
  footer {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 0.8rem;
    color: white;
    z-index: 50;
    pointer-events: none;
    font-family: 'Amatic SC', cursive;
  }