:root{
      --bg-url:none;
      --bg-opacity:.3;
    }

    *{padding:0;margin:0;box-sizing:border-box;}

    html,body{
      width:100%;
      min-height:100%;
      overflow-x:hidden;
      overflow-y:auto;
    }

    body{
      min-height:100vh;
      background: radial-gradient(circle at center, #4a192c 0%, #1a0b14 100%);
      font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
      color:#fff;
      position:relative;
      -webkit-tap-highlight-color:transparent;
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:0;
      background:var(--bg-url) center/cover no-repeat;
      opacity:0;
      transition:opacity .6s ease;
      pointer-events:none;
      transform:scale(1.02);
    }

    body.bg-on::after{
      opacity:var(--bg-opacity, .3);
    }

    #canvas{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:1;
      pointer-events:none;
    }

  .start-screen {
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(20,10,20,.6);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    transition:all .8s ease;
    padding:24px;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

    .envelope-wrapper{
      position:relative;
      cursor:pointer;
      animation:float 3s ease-in-out infinite;
      user-select:none;
    }

    .envelope{
      font-size:100px;
      filter:drop-shadow(0 0 20px rgba(255,59,48,.6));
      transition:transform .3s;
      line-height:1;
    }

    .envelope-wrapper:active .envelope{
      transform:scale(.9);
    }

    .start-title{
      margin-top:18px;
      font-size:clamp(22px, 7vw, 38px);
      color:#fff;
      text-shadow:0 0 18px rgba(255,105,150,.45);
      line-height:1.35;
      padding:0 10px;
      word-break:break-word;
    }

    .click-hint{
      margin-top:14px;
      font-size:clamp(14px, 4.3vw, 20px);
      color:#ffb6bc;
      animation:pulseText 1.5s infinite;
      line-height:1.45;
      padding:0 10px;
      word-break:break-word;
    }

    @keyframes float{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-20px)}
    }

    @keyframes pulseText{
      0%{opacity:.6}
      50%{opacity:1;text-shadow:0 0 10px #ff9a9e}
      100%{opacity:.6}
    }

    .card-container{
      position:relative;
      z-index:10;
      width:100%;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;     /*align-items:flex-start; 文字框顶部*/
      opacity:0;
      transform:scale(.8);
      pointer-events:none;
      transition:all .5s cubic-bezier(.34,1.56,.64,1);
      padding:92px 16px 46px;
      overflow:visible;
    }

    .card-container.show{
      opacity:1;
      transform:scale(1);
      pointer-events:auto;
    }

    .glass-card{
      width:min(90vw, 420px);
      background:rgba(255,255,255,.15);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      border-radius:25px;
      border:1px solid rgba(255,255,255,.3);
      box-shadow:0 20px 50px rgba(0,0,0,.5);
      padding:30px 22px 24px;
      text-align:center;
      position:relative;
      overflow:visible;
      max-height:85vh;
      display:flex;
      flex-direction:column;
    }

    .avatar{
      width:88px;
      height:88px;
      border-radius:50%;
      background:linear-gradient(45deg, #ff9a9e, #fad0c4);
      margin:-68px auto 18px auto;
      border:4px solid rgba(255,255,255,.85);
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:42px;
      box-shadow:0 0 20px rgba(255,154,158,.5);
      overflow:hidden;
      color:#fff;
      position:relative;
    }

    .avatar.has-cover{
      background:#fff;
      font-size:0;
    }

    .avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .love-text{
      color:#fff;
      font-size:1.05rem;  /* ← 1.05rem 这里文字大小 */
      line-height:1.65;  /* ← 1.45 这里控制行间距 */
      text-align:left;
      min-height:120px;
      max-height:50vh;
      overflow-y:auto;
      overflow-x:hidden;
      text-shadow:0 2px 4px rgba(0,0,0,.5);
      margin-bottom:22px;
      white-space:pre-wrap;
      word-break:break-word;
      overflow-wrap:break-word;
      padding-right:8px;
      scrollbar-width:thin;
      scrollbar-color: rgba(255,255,255,0.3) transparent;
    }

    .love-text::-webkit-scrollbar{
      width:6px;
    }

    .love-text::-webkit-scrollbar-track{
      background:transparent;
    }

    .love-text::-webkit-scrollbar-thumb{
      background:rgba(255,255,255,0.3);
      border-radius:3px;
    }

    .love-text::-webkit-scrollbar-thumb:hover{
      background:rgba(255,255,255,0.5);
    }

    .btn-group{
      position:relative;
      min-height:54px;
      display:flex;
      justify-content:center;
      gap:15px;
      align-items:center;
      margin-top:6px;
      flex-shrink:0;
    }

    .btn{
      border:none;
      border-radius:50px;
      padding:0 30px;      /* ← 左右内边距 */
      font-size:1rem;      /* ← 字体大小 */
      font-weight:bold;
      font-family:inherit;
      cursor:pointer;
      transition:.3s;
      height:50px;         /* ← 这里控制按钮高度 */
    }

    .btn-yes{
      background:linear-gradient(to right, #ff3b30, #ff2d55);
      color:#fff;
      box-shadow:0 5px 20px rgba(255,45,85,.4);
      width:100%;
      max-width:150px;   /* ← 这里控制按钮最大宽度 */
    }

    .success-overlay{
      position:fixed;
      inset:0;
      z-index:200;
      display:none;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      background:transparent;
      opacity:0;
      pointer-events:none;
      transition:opacity .5s;
      text-align:center;
      padding:36px 22px;
      overflow-y:auto;
    }

    .success-overlay.show{
      display:flex;
      opacity:1;
      pointer-events:auto;
    }

    .success-title{
      font-size:clamp(34px, 12vw, 56px);
      color:#ffeb3b;
      text-shadow:0 0 20px #ff3b30;
      animation:bounceIn 1s;
      line-height:1.25;
      word-break:break-word;
    }

    .success-desc{
      margin-top:15px;  /* ← 最后一页控制两行文字的间距 */
      font-size:clamp(18px, 5vw, 24px);
      color:#fff;
      text-shadow:0 2px 5px rgba(0,0,0,.8);
      line-height:1.45;
      white-space:pre-wrap;
      word-break:break-word;
    }

    @keyframes bounceIn{
      0%{transform:scale(0)}
      60%{transform:scale(1.2)}
      100%{transform:scale(1)}
    }

    .hidden-data{display:none!important;}