:root{
    --pink-pale:#ffe3ef;
    --pink-soft:#ffb8d9;
    --pink-mid:#ff6fa5;
    --pink-deep:#e91e86;
    --rose-gold:#e8a1c0;
    --navy-deep:#0b0620;
    --gold:#ffd966;
    --white-soft:#fff7fb;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;font-family:'Quicksand',sans-serif;color:var(--white-soft);overflow-x:hidden;}
  body{background:var(--navy-deep);}
  ::selection{background:var(--pink-mid);color:#fff;}
  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-thumb{background:var(--pink-mid);border-radius:10px;}

  svg.defs{position:absolute; width:0; height:0; overflow:hidden;}

  /* ================= COVER ================= */
  #cover{
    position:relative;
    min-height:100vh;
    background:
      radial-gradient(circle at 20% 8%, rgba(255,182,217,.32), transparent 45%),
      radial-gradient(circle at 88% 26%, rgba(255,111,165,.26), transparent 40%),
      radial-gradient(circle at 50% 95%, rgba(233,30,134,.28), transparent 45%),
      linear-gradient(180deg, #1a0a2e 0%, #2b0f3f 35%, #3d1147 65%, #24102f 85%, #150a24 100%);
    padding: 9vh 8vw 6vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .paw{position:absolute; font-size:1.4rem; opacity:.3; animation: floaty 7s ease-in-out infinite; pointer-events:none; user-select:none;}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-22px) rotate(8deg);}}

  .bow-mark{font-size:2.6rem; margin-bottom:.3rem; filter: drop-shadow(0 0 14px rgba(255,182,217,.7));}
  .kicker{font-size:.78rem; letter-spacing:.14em; color:var(--pink-soft); margin-bottom:1rem; opacity:.85;}
  h1.title{
    font-family:'Caveat',cursive; font-weight:700;
    font-size: clamp(2.6rem, 9vw, 4.6rem); line-height:1.05; margin:0 0 1.7rem;
    background: linear-gradient(90deg,#ffd1e6,#ff8fc0,#ffe6b8);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .cover-text{max-width:560px; font-size:1.02rem; line-height:1.85; color:#f3e7f4; margin:0 auto 1.5rem;}
  .cover-text strong{color:#ffd9ea; font-weight:600;}

  .mascot-wrap{width:150px; margin: 1.6rem 0; animation: floaty 6.5s ease-in-out infinite;}
  .mascot-wrap.small{width:74px; margin:1.2rem 0;}

  .list-wrap{max-width:520px; margin: .3rem auto 1.8rem; text-align:left;}
  .list-item{
    display:flex; align-items:flex-start; gap:.6rem;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,182,217,.18);
    border-radius: 16px;
    padding: .7rem .95rem;
    margin-bottom:.6rem;
    font-size:.92rem; line-height:1.5; color:#f6ecf6;
  }
  .list-item .ic{font-size:1.1rem; flex-shrink:0;}

  .signature{font-family:'Caveat',cursive; font-size:1.9rem; color:var(--gold); margin-top:.6rem;}
  .scroll-hint{margin-top:1.8rem; font-size:.85rem; color:var(--pink-soft); opacity:.7; animation: pulseHint 2.2s ease-in-out infinite;}
  @keyframes pulseHint{0%,100%{opacity:.4; transform:translateY(0);} 50%{opacity:.9; transform:translateY(5px);}}

  .enter-wrap{margin:5rem 0 3rem; display:flex; flex-direction:column; align-items:center; gap:.9rem;}
  #enter-btn{position:relative; width:96px; height:86px; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  #enter-btn .heart-shape{
    font-size:3.6rem;
    filter: drop-shadow(0 0 22px rgba(255,111,165,.85)) drop-shadow(0 0 40px rgba(255,111,165,.4));
    animation: heartbeat 1.6s ease-in-out infinite; display:inline-block;
  }
  @keyframes heartbeat{0%,100%{transform:scale(1);} 25%{transform:scale(1.12);} 40%{transform:scale(.98);}}
  .enter-label{font-family:'Caveat',cursive; font-size:1.4rem; color:var(--pink-pale);}

  /* ================= GALAXY SCENE ================= */
  #galaxy-scene{
    position:fixed; inset:0;
    background: radial-gradient(ellipse at 50% 45%, #241238 0%, #120a24 55%, #07040f 100%);
    opacity:0; pointer-events:none; transition:opacity 1s ease; overflow:hidden; touch-action:none;
  }
  #galaxy-scene.active{opacity:1; pointer-events:auto;}
  #galaxy-canvas{position:absolute; inset:0; width:100%; height:100%;}

  .fixed-msg{
    position:absolute; top:6%; left:50%; transform:translateX(-50%); text-align:center;
    font-family:'Caveat',cursive; font-size: clamp(1.7rem,6vw,2.6rem); color:#ffe3ef;
    text-shadow: 0 0 18px rgba(255,143,192,.7); z-index:6;
  }
  .instructions{
    position:absolute; bottom:4.2%; left:50%; transform:translateX(-50%);
    font-size:.78rem; color:var(--pink-soft); opacity:.65; letter-spacing:.03em; z-index:6;
    display:flex; align-items:center; gap:.4rem; text-align:center;
  }

  #galaxy-disc{position:absolute; top:50%; left:50%; width:10px; height:10px; z-index:5;}
  .orbit-item{
    position:absolute; top:0; left:0; transform-origin:0 0;
    display:flex; flex-direction:column; align-items:center; white-space:nowrap;
    transition: filter .25s ease, opacity .25s ease;
  }
  .orbit-item .mascot-icon{width:2.4rem; display:block; filter: drop-shadow(0 0 8px rgba(255,182,217,.55));}
  .orbit-item .msg{
    margin-top:.3rem; font-size:.72rem; color:#ffe9f3;
    background: rgba(30,10,45,.4); padding:.15rem .55rem; border-radius:20px;
    backdrop-filter: blur(2px); max-width:135px; white-space:normal; text-align:center; line-height:1.25;
  }

  #back-btn{
    position:absolute; top:3%; left:4%;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,182,217,.4);
    color:#ffe3ef; font-family:'Quicksand',sans-serif; font-size:.75rem;
    padding:.45rem .8rem; border-radius:20px; cursor:pointer; z-index:8;
    backdrop-filter: blur(4px); opacity:0; transition:opacity .6s ease 1.2s;
  }
  #galaxy-scene.active #back-btn{opacity:.75;}
  #back-btn:hover{opacity:1;}

  @media (max-width:480px){
    .cover-text{font-size:.95rem;}
    .orbit-item .msg{font-size:.66rem; max-width:105px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }