/* ================== 活動區 X  咖波 (期間限定) ================== */
    
    :root {
      --blue: #1ea0e6;
      --blue-deep: #0d6da8;
      --blue-light: #dff4ff;
      --panel-bg: rgba(255, 255, 255, 0.88);
      --yellow: #ffd85b;
      --green: #72ca8a;
      --shadow: 0 10px 24px rgba(31, 128, 180, 0.12);
      /* --radius: 28px; */
      --stroke: #2d95d5;
      --lock-mask: rgb(97 107 122 / 98.5%);
    }

    /*咖波商標*/
    .sec1_copyright{
      position: absolute;
      bottom: 1%;
      left: 5%;
      z-index: 999;
      aspect-ratio: 603/49;
      width: 200px;
    }


    #event {
      background:url("../img/event/bg.jpg") center top / cover no-repeat;
      /* font-family: "Huninn", "Noto Serif TC", serif; */
      position: relative;
      z-index: 99 ;
      isolation: isolate;
      min-height: 100vh;
      padding: 5rem 3rem ;
      overflow: hidden;
    }

    /* .container {
      z-index: 1;
      width: min(1200px, 100%);
    } */

    .row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }

    /* 活動 X 主標 */
    .event-header {
      position: relative;
      width: min(1180px, 100%);
      padding-top: 8px;
      margin-bottom: 3rem;
      text-align: center;
    }

    .event-header img {
      width: min(100%, 800px);
      margin: 0 auto;
      filter: drop-shadow(0 8px 0 rgba(45, 149, 213, 0.08));
      animation: titleFloat 3.5s ease-in-out infinite;
    }

    /* 活動 X 副標 */
    .event-header h6{
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      color: #08648f;
      animation: titleFloat 3.5s ease-in-out infinite;
    }
    
    /* 活動 X 標題 X 星星 */
    .reward-wrap::before,
    .reward-wrap::after{
      content: "✦";
      position: absolute;
      color: #f4c851;
      font-size: 28px;
      animation: twinkle 2.1s ease-in-out infinite;
    }

    .event-header::before,
    .event-header::after{
      content: "✦";
      position: absolute;
      font-size: 28px;
      color: #f4c851;
      animation: twinkle 2.4s ease-in-out infinite;
    }

    .event-header::before { top: 20%; left: 24%; animation-delay: .5s; }
    .event-header::after { top: -5%; right: 40%; animation-delay: 1.1s; }


    
    /* 活動 X 內容 */
    .event-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      width: 100%;
      align-items: stretch;
    }

    /* 活動 X 內容 X 各區塊  */
    .event-card {
      position: relative;
      z-index: 99;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      padding: 22px 24px 20px;
      border: 4px solid var(--stroke);
      border-radius: var(--radius);
      background: var(--panel-bg);
      box-shadow:
      0 5px 0 var(--stroke),
      1px 2px 0 var(--stroke),
      -1px 2px 0 var(--stroke)
      ;
      backdrop-filter: blur(2px);
      overflow: visible;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .event-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 30px rgba(31, 128, 180, 0.18);
    }

    /* 活動 X 內容 X 各區塊 X 標題  */
    .event-card h3 {
      font-size: clamp(26px, 1.5vw, 34px);
      text-align: center;
      line-height: 1.2;
      margin: 1rem 0 18px;
      color: #106ca4;
      letter-spacing: 0.5px;
      font-weight: 900;
    }

    /* 活動 X 內容 X 各區塊 X 內容  */
    .card-inner {
      height: calc(85% - 64px);
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      justify-content:flex-start;
      align-items: center;
      gap: 18px;
      text-align: center;
    }

    /* Step 1  */
    .task-list {
      width: 100%;
      max-width: 280px;
      min-height: 138px;
      display: grid;
      align-content: center;
      gap: 14px;
      margin: 6px auto 0;
    }

    .task-list .ui-input{
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 12px;
    border-radius: 10px;
    border: 2px solid #71cbf3;
    background: #fcfeff;
    box-shadow: var(--shadow);
    color: var(--field-text);
    z-index: 99;
  }

  .task-list::before{
    content: "";
    background: url(../img/event/event_step1_ch2.png)no-repeat top center;
    background-size: 100% auto;
    aspect-ratio: 176/105;
    width: 120px;
    position: absolute;
    top: 88px;
    right: 50%;
    transform: translateX(50%);
    z-index: 999;
  }






    .task-item {
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      color: #79b7dc;
      font-size: 20px;
      line-height: 1.35;
    }

    .task-index {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ff8e8e;
      color: #fff;
      font-size: 16px;
    }

    /* Step X 按鈕  */
    .step-btn {
      /* min-width: 182px; */
      width: 75%;
      padding: 14px 24px;
      border: 0;
      border-radius: 999px;
      background: #2195d8;
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      /* box-shadow: 0 6px 0 #1677b0; */
      transition: transform .18s ease, filter .18s ease;
    }

    .step-btn:hover {
      transform: translateY(-2px); filter: brightness(1.03);
    }

    .step-btn:active {
      transform: translateY(1px); box-shadow: 0 4px 0 #1677b0;
    }


    /* Step X 完成文字  */
    .step-done {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      color: var(--green);
      font-size: 22px;
      font-weight: 900;
    }
    .step-done::before {
      content: "✔";
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-size: 16px;
    }


    /* Step 1 外框 X CH  */
    #cardStep1::before {
      content: "";
      background: url(../img/event/event_step1_ch.png)no-repeat;
      background-size: cover;
      position: absolute;
      top: -93px;
      aspect-ratio:188/121;
      width: 150px;
    }

    /* Step 3 外框 X CH  */
    #cardReward::before{
      content: "";
      background: url(../img/event/event_step3_ch2.png)no-repeat;
      background-size: contain;
      position: absolute;
      right: -132px;
      bottom: -14px;
      z-index: 90;
      aspect-ratio:218/182;
      width: 130px;
    }


    /* Step 2 內框 X CH  */
    #cardStep2 .step-figure {
      width: min(100%, 200px);
      margin: 0 auto;
      margin-bottom: .3rem;
      animation: sway 3.6s ease-in-out infinite;
    }



    /* Step 3 X 活動獎勵  */
    .reward-wrap {
      position: relative;
      width: min(100%, 260px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    /* Step 3 內框 X CH  */
    #cardReward .step-figure {
      width: min(100%, 300px);
    }

    /* Step 3 內框 X CH X 星星  */
    .reward-wrap::before,
    .reward-wrap::after {
      content: "✦";
      position: absolute;
      color: #f4c851;
      font-size: 28px;
      animation: twinkle 2.1s ease-in-out infinite;
    }

    .reward-wrap::before { left: 0px; top: -1rem; }
    .reward-wrap::after { right: 8px; top: 4.5rem; animation-delay: .7s; }


    /* 活動獎勵名 X 咖波蛋 */
    .reward-name{
      transform:translateX(-50%);
      height:80px;
      margin:0;
      position:relative;
      left:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
    }

    /* text group */
    .reward-wrap .title_txt_gp{ position:relative;}

    /* shared text base */
    .reward-wrap .title_txt_gp .txt_f,
    .reward-wrap .title_txt_gp .txt_b{
      font-size:2rem;
      font-weight:900;
      line-height:1.2;
      color:transparent;
    }

    .reward-wrap .title_txt_gp .txt_f{ 
      background: #fff;
      -webkit-background-clip:text;
      background-clip:text;
      position:relative;
      z-index:1;
    }

    .reward-wrap .title_txt_gp .txt_b{
      -webkit-text-stroke:4px #71cbf3;
      paint-order:stroke fill;
      text-shadow:0 1px 0 rgba(16 108 164), 0 1px 5px rgba(16 108 164);
      filter:
      drop-shadow(2px 2px 0 #71cbf3)
      drop-shadow(-1px -1px 0 #71cbf3)
      ;
      position:absolute;
      inset:0 auto auto 0;
      z-index:0;
    }
    /* 活動獎勵名 X 咖波蛋 X END */



    /* 活動獎勵名 X 說明 */
    .reward-desc {
      margin: 0;
      color: #8b8b8b;
      font-size: 20px;
      font-weight: 500;
    }


    /* 活動 X 各區塊 X 遮罩：尚未解鎖 */
    .event-card.is-locked .lock-mask {
      opacity: 1;
      visibility: visible;
    }

    .lock-mask {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: calc(var(--radius) - 5px);
      background: var(--lock-mask);
      box-shadow:
      0px 10px 0 var(--lock-mask),
      0px -5px 0 var(--lock-mask),
      5px 0px 0 var(--lock-mask),
      -5px 0px 0 var(--lock-mask);
      backdrop-filter: grayscale(.15);
      opacity:0;
      visibility: hidden;
      transition: .25s ease;
      z-index: 3;
      }


    /* 活動 X 各區塊 X 鎖頭圖 */
    .lock-mask img {
      width: 96px;
      filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
      animation: lockPulse 1.9s ease-in-out infinite;
    }

    .event-card.is-locked .card-inner {
      filter: grayscale(0.18) brightness(0.8);
    }

    .event-card.is-locked .step-btn {
      cursor: default;
      pointer-events: none;
    }

    .event-card.unlock-ready {
      animation: glowHint 2.6s ease-in-out infinite;
    }


    /* .event-toolbar {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .demo-btn {
      padding: 10px 18px;
      border-radius: 999px;
      border: 2px solid #9bd5f4;
      background: rgba(255,255,255,.78);
      color: #166d9f;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: .2s ease;
    }

    .demo-btn:hover {
      background: #fff;
      transform: translateY(-2px);
    } */

    /* 活動 X 動態效果 */
    @keyframes floatBlob {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(14px) scale(1.04); }
    }

    @keyframes titleFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes twinkle {
      0%, 100% { transform: scale(.8) rotate(0deg); opacity: .45; }
      50% { transform: scale(1.18) rotate(12deg); opacity: 1; }
    }

    @keyframes bounceTiny {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(-2deg); }
    }

    @keyframes sway {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      50% { transform: rotate(-2deg) translateY(-6px); }
    }

    @keyframes tongueBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(-4deg); }
    }

    @keyframes lockPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    @keyframes glowHint {
      0%, 100% { box-shadow: 0 10px 24px rgba(31, 128, 180, 0.12); }
      50% { box-shadow: 0 14px 34px rgba(255, 216, 91, 0.32); }
    }



    /* RWD X Ipad 以下 */
    @media (max-width: 1025px) {
      #event{ min-height: unset; }

      .event-grid{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
      .event-card {
        width: 45%;
        min-height: 360px;
      }
      .event-card h3{
        margin-top: 1rem;      }
      .card-inner{
        margin-bottom: 1.5rem;
      }
    }


    @media (max-width: 992px) {
      .event-grid{ margin-top: 2rem; }
      .event-card{ width: 70%; }
    }


    @media (max-width: 640px) {
      #event{ padding: 4rem 1rem; }
      .capoo .row{ gap: 14px }
      #cardStep1::before,
      #cardReward::before{ display: none; }

      .event-header{ margin-bottom: 0rem; }
      .event-header::before { font-size: 24px;top: 10%; left: 10%;}
      .event-header::after{ top: -15%; left: 14%;}


      .event-grid{ margin: 0; }

      .event-card {
        width: 100%;
        padding: 18px 16px 18px;
        border-width: 3px;
        border-radius: 24px;
      }

      .event-card h3 {
        font-size: 24px;
        margin-bottom: 14px;
      }

      /* Step 1 */
      .card-step1-deco {
        width: 92px;
        top: -46px;
      }

      .task-list{
        justify-content: center;
        min-height: auto;
        margin-bottom: 1rem;
      }
      .task-item {
        font-size: 16px;
      }

      .task-index {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 14px;
      }

      .step-btn {
        width: 100%;
        min-width: 160px;
        font-size: 18px;
        padding: 13px 20px;
      }

      /* 活動獎勵 */
      .reward-name {
        -webkit-text-stroke: 3px #fff;
        font-size: 24px;
      }

      .reward-desc,
      .step-done {
        font-size: 18px;
      }

      /* 遮罩：尚未解鎖 */
      .lock-mask img {
        width: 78px;
      }
    }


    @media (max-width: 480px) {
      .reward-wrap .title_txt_gp .txt_f, 
      .reward-wrap .title_txt_gp .txt_b{
        font-size: 2rem;
        z-index:unset;
        color: #fff;
      }
      .reward-wrap .title_txt_gp .txt_b{
        filter:
        drop-shadow(3px 3px 0 #71cbf3)
        drop-shadow(-3px -2px 0 #71cbf3)
        drop-shadow(2px -2px 0 #71cbf3)
        drop-shadow(-2px 2px 0 #71cbf3)
        ;
      }
      .event-header h6{ font-size: 1.2rem; }
      /* .task-list::before{
        display: none;
      } */
      .task-list{
        display: flex;
      }
      #cardStep1 .card-inner{
        justify-content: flex-end;
      }
    }