

    /* ─── SCREEN 2 · Wishes Explosion ───────────────────── */
    #wishesScreen {
      position: fixed; inset: 0;
      background: linear-gradient(135deg, var(--pink-light) 0%, #ffb3d9 50%, var(--pink-light) 100%);
      z-index: 99999;
      opacity: 0; pointer-events: none;
      transition: opacity .8s ease;
      overflow: hidden;
    }

    #wishesScreen.active { opacity: 1; pointer-events: all; }

    .wishes-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,107,157,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,157,.05) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    .wish-sparkle {
      position: absolute; font-size: 14px; opacity: .4;
      animation: sparkleAnim 3s infinite ease-in-out;
    }

    @keyframes sparkleAnim {
      0%,100% { opacity: .2; transform: scale(.8); }
      50%      { opacity: .6; transform: scale(1.2); }
    }

    /* Wish bubble base */
    .wish-bubble {
      position: absolute;
      padding: 11px 20px;
      border-radius: 25px;
      font-size: clamp(.85rem,1.5vw,1rem);
      font-weight: 700;
      box-shadow: 0 4px 20px rgba(0,0,0,.1);
      z-index: 10;
      white-space: nowrap;
      pointer-events: none;
    }

    .ws-1 { background: linear-gradient(135deg,#fff 0%,#ffe0ec 100%); color: var(--pink-deep); border: 2px solid rgba(255,107,157,.3); }
    .ws-2 { background: linear-gradient(135deg,var(--pink-mid) 0%,var(--pink-hot) 100%); color: var(--white); border: 2px solid rgba(255,255,255,.5); }
    .ws-3 { background: rgba(255,255,255,.95); color: var(--pink-dark); border: 2px solid rgba(139,44,90,.2); backdrop-filter: blur(8px); }
    .ws-4 { background: linear-gradient(135deg,var(--pink-light) 0%,#ffb3d9 100%); color: var(--pink-darkest); border: 2px solid rgba(255,107,157,.4); }

    .wa-slide  { animation: wbSlide  4s ease-out forwards; }
    .wa-bounce { animation: wbBounce 4s ease-out forwards; }
    .wa-float  { animation: wbFloat  4s ease-out forwards; }
    .wa-zoom   { animation: wbZoom   4s ease-out forwards; }

    @keyframes wbSlide  { 0%{opacity:0;transform:translateX(-100px)} 10%{opacity:1;transform:translateX(0)} 90%{opacity:1} 100%{opacity:0;transform:translateX(50px)} }
    @keyframes wbBounce { 0%{opacity:0;transform:translateY(-100px) scale(.5)} 10%{opacity:1;transform:translateY(0) scale(1.1)} 15%{transform:translateY(-8px) scale(1)} 20%{transform:translateY(0) scale(1)} 90%{opacity:1} 100%{opacity:0;transform:translateY(30px)} }
    @keyframes wbFloat  { 0%{opacity:0;transform:translateY(100px) rotate(-10deg)} 10%{opacity:1;transform:translateY(0) rotate(0)} 90%{opacity:1} 100%{opacity:0;transform:translateY(-100px) rotate(10deg)} }
    @keyframes wbZoom   { 0%{opacity:0;transform:scale(0)} 10%{opacity:1;transform:scale(1.15)} 15%{transform:scale(1)} 90%{opacity:1} 100%{opacity:0;transform:scale(.8)} }
