/* ===================== VICDNA 20週年抽好禮 活動頁 ===================== */
.anniv20 {
  color: #131637;
  overflow-x: clip;
  overflow-y: clip;
}
.anniv20 .anniv-gate {
  visibility: hidden;
}
.anniv20 .anniv-gate.animated {
  visibility: visible;
}
.anniv20 .anniv-wipe {
  clip-path: inset(0 100% 0 0);
}
.anniv20 .anniv-wipe.animated {
  animation: anniv-hero-wipe-in 0.9s ease-out forwards;
}
.anniv20 .anniv-fade {
  opacity: 0;
}
.anniv20 .anniv-fade.animated {
  animation: anniv-hero-fade-in 0.9s ease-out forwards;
}
.anniv20 .anniv-in {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  position: relative;
}
.anniv20 h1.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Hero ---------- */
.anniv-hero {
  position: relative;
  padding: 4rem 0 8rem;
  background-color: #fff;
}
/* 原本用 background-image + ::before 做這片刷入效果：瀏覽器一解出這條
   CSS animation 就會馬上開始播放刷入動畫，完全不管圖片本身（231KB，比
   其他小圖裝飾大很多）到底載完了沒有——網路稍慢時，動畫已經刷完了，
   圖片資料才姍姍來遲，看起來就是刷到一半卡住、或整張圖片突然蹦出來，
   跟其他（檔案小、幾乎瞬間載完）背景裝飾比起來特別明顯卡頓。
   改成真正的 <img> 元素，並用 JS 等它 load 完成後才加上 .animated 觸發
   動畫，animation 本身維持 clip-path 刷入的視覺效果不變。 */
.anniv-hero-wipe-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: min(1100px, 90%);
  height: auto;
  margin: 0 auto;
  z-index: 0;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.anniv-hero-wipe-bg.animated {
  animation: anniv-hero-wipe-in 0.9s ease-out forwards;
}
.anniv-hero .anniv-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7rem;
}

/* 桌機版：圍繞在引言文字左右、參照設計稿位置的音符裝飾
   （以引言文字區塊 .anniv-hero-copy 為錨點做絕對定位，
   不受主視覺圖高度變化影響，且不會蓋到文字本身） */
.anniv-hero-notes-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  animation: anniv-hero-fade-in 0.4s ease-out forwards;
  animation-delay: 1s;
}
.anniv-hero-notes-scatter .note {
  position: absolute;
  height: auto;
  opacity: 0;
  animation: anniv-hero-note-in 0.6s ease-out forwards;
}
.anniv-hero-notes-scatter .note img {
  width: 100%;
  height: auto;
  display: block;
}
.anniv-hero-notes-scatter .note-clef {
  width: 130px;
  top: -170px;
  right: -130px;
  animation-delay: 1.2s;
}
@media (max-width: 1200px) {
  /* pad 寬度時 .anniv-hero-copy 兩側留白變窄，這幾顆音符原本的
     位移量會超出可視範圍或蓋到 KV 圖文字，這裡統一收回安全範圍內 */
  .anniv-hero-notes-scatter .note-clef {
    top: -60px;
    right: -20px;
  }
  .anniv-hero-notes-scatter .note-pair {
    left: -30px;
  }
  .anniv-hero-notes-scatter .note-hook {
    left: -30px;
  }
  .anniv-hero-notes-scatter .note-triple {
    right: -30px;
  }
  .anniv-hero-notes-scatter .note-squiggle {
    right: -25px;
  }
}
.anniv-hero-notes-scatter .note-pair {
  width: 92px;
  top: 0px;
  left: -80px;
  animation-delay: 1.35s;
}
.anniv-hero-notes-scatter .note-hook {
  width: 104px;
  top: 135px;
  left: -70px;
  animation-delay: 1.65s;
}
.anniv-hero-notes-scatter .note-triple {
  width: 104px;
  top: 120px;
  right: -75px;
  animation-delay: 1.8s;
}
.anniv-hero-notes-scatter .note-squiggle {
  width: 62px;
  top: 45px;
  right: -105px;
  animation-delay: 1.5s;
}
/* 手機版：主視覺與內文之間、內文之後的兩排音符裝飾 */
.anniv-hero-notes-row {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  width: 100%;
}
.anniv-hero-notes-row .note-sm,
.anniv-hero-notes-row .note-md,
.anniv-hero-notes-row .note-xs {
  height: auto;
}
.anniv-hero-notes-row .note-sm {
  width: 56px;
}
.anniv-hero-notes-row .note-md {
  width: 84px;
}
.anniv-hero-notes-row .note-xs {
  width: 40px;
}
.anniv-hero-notes-row .anniv-hero-mobi-note {
  display: block;
  opacity: 0;
  animation: anniv-hero-note-in 0.6s ease-out forwards;
}
.anniv-hero-notes-row .anniv-hero-mobi-note img {
  display: block;
  width: 100%;
  height: auto;
}
.anniv-hero-kv {
  width: 100%;
  max-width: 820px;
  opacity: 0;
  animation: anniv-hero-rise-in 0.8s ease-out forwards;
  animation-delay: 0.35s;
}
.anniv-hero-kv img {
  width: 100%;
  height: auto;
  display: block;
}
.anniv-hero-kv img.forMobi {
  display: none;
}
.anniv-hero-copy {
  position: relative;
  width: 100%;
  max-width: 700px;
  text-align: center;
  opacity: 0;
  animation: anniv-hero-rise-in 0.8s ease-out forwards;
  animation-delay: 0.7s;
}
.anniv-hero-copy p {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.9;
  color: #45495c;
  margin: 0 0 1rem;
}
/* anniv-hero 區塊右下角的音樂五線譜背景裝飾（手機版改為內容下方置中） */
.anniv-hero-bg {
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  height: auto;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: anniv-hero-wipe-in 0.9s ease-out 0.9s both;
}
@media (max-width: 900px) {
  .anniv-hero-notes-scatter.forPC {
    display: none;
  }
  .anniv-hero {
    padding-bottom: 3rem;
  }
  .anniv-hero .anniv-in {
    gap: 2rem;
  }
  .anniv-hero-kv {
    max-width: 480px;
  }
  .anniv-hero-kv img.forPC {
    display: none;
  }
  .anniv-hero-kv img.forMobi {
    display: block;
  }
  .anniv-hero-notes-row.forMobi {
    display: flex;
  }
  .anniv-hero-copy {
    animation-delay: 1.05s;
  }
  .anniv-hero-copy br.forPC {
    display: none;
  }
  .anniv-steps-intro br.forPC {
    display: none;
  }
  .anniv-hero-bg {
    right: auto;
    left: 50%;
    bottom: 0;
    width: 300px;
    transform: translateX(-50%);
  }
}

/* ---------- LINE Banner ---------- */
.anniv-linebanner {
  display: flex;
  flex-wrap: wrap;
  min-height: 200px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.anniv-linebanner-left,
.anniv-linebanner-right {
  flex: 1 1 420px;
  /* 原本 min-width:300px 太小，視窗介於中間某個寬度時，左右兩塊會被擠成
     並排的窄欄（例如各 450px 左右），但裡面的文字是照桌機的大字級設計，
     塞不進窄欄就會被迫換行。改成跟 flex-basis 一樣的 420px，讓它「不夠
     寬就直接整排換到下一行（變回全寬單欄）」，而不是「硬擠成過窄的兩欄」。 */
  min-width: 420px;
  display: flex;
  align-items: center;
  padding: 2.5rem 3rem;
  box-sizing: border-box;
}
.anniv-linebanner-left {
  justify-content: center;
  background: linear-gradient(120deg, #222E78 26%, #3559D9 100%);
  /* 讓字級可以用「這一欄實際有多寬」(cqw) 來換算，而不是用「整個視窗多寬」
     (vw)。兩欄並排時，這一欄的寬度遠小於視窗寬度，用 vw 算出來的字級會
     大到塞不下、被迫換行；改用 cqw 之後，不管是單欄全寬還是並排半寬，
     字級永遠是「跟著這一欄自己的寬度」等比縮放，維持一行不換行。 */
  container-type: inline-size;
}
.anniv-linebanner-left .anniv-line-logo {
  color: #fff;
  font-size: clamp(1rem, 0.4rem + 6.2cqw, 4rem);
  font-weight: 800;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  letter-spacing: 0.05rem;
}
/* 全站 p, span 選擇器會直接鎖定 span 本身、蓋掉從父層繼承來的顏色，
   這裡改成直接對 span 下規則，才能贏過那條全站規則 */
.anniv-linebanner-left .anniv-line-logo span {
  color: #fff;
  white-space: nowrap;
}
.anniv-line-at {
  display: inline-block;
  vertical-align: 0.12em;
}
.anniv-line-logo-img {
  position: relative;
  top: 8px;
  height: clamp(22px, 8px + 9.3cqw, 72px);
  width: auto;
  display: block;
}
/* pad 寬度時，左右兩塊變成並排的窄欄（這一欄約只剩視窗一半寬），
   單純用 cqw 換算會讓字級跌到比手機版全寬單欄時還小，看起來忽然縮水。
   這裡針對「並排窄欄」這個寬度區間（欄寬 420~800px）額外加大字級與圖示，
   讓 pad 寬度看起來比原本大，同時仍受 cqw 換算節制、有安全邊界，
   欄再窄一點也不會被撐到換行或超出邊界。 */
@container (min-width: 320px) and (max-width: 705px) {
  .anniv-linebanner-left .anniv-line-logo {
    font-size: clamp(2.1rem, 1.4rem + 3.9cqw, 3.15rem);
  }
  .anniv-line-logo-img {
    height: clamp(46px, 31.6px + 5.5cqw, 71px);
  }
}
.anniv-linebanner-right {
  background-color: #1a1a1a;
  background-image: url(../img/event20th/event20th-linebanner-right-bg.png);
  background-repeat: no-repeat;
  background-position: left -60px center;
  background-size: cover;
  justify-content: center;
  gap: 2rem;
}
.anniv-line-msg {
  text-align: left;
}
.anniv-linebanner-right .anniv-line-msg p {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.anniv-line-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #07f0b7;
  color: #131637;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  text-decoration: none;
}
/* GO 按鈕箭頭：hover 時原本的箭頭往右上滑出消失，
   同時另一份複本從左下滑入到原位，做出「整個消失、再整個出現」的效果 */
.anniv-line-go-arrow-wrap {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 17.3px;
  overflow: hidden;
}
.anniv-line-go-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.anniv-line-go-arrow--b {
  transform: translate(-150%, 150%);
}
.anniv-linebanner:hover .anniv-line-go-arrow--a {
  transform: translate(150%, -150%);
}
.anniv-linebanner:hover .anniv-line-go-arrow--b {
  transform: translate(0, 0);
}
.anniv-linebanner-right .anniv-line-qr img {
  width: 140px;
  height: 140px;
  border-radius: 12px;
}

/* ---------- Prizes ---------- */
.anniv-prizes {
  position: relative;
  background: #fff;
  padding: 8rem 0;
  text-align: center;
  overflow: hidden;
}
.anniv-prizes-bg-notes {
  position: absolute;
  top: 0;
  left: 0;
  width: min(700px, 80%);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.anniv-prizes .anniv-in {
  position: relative;
  z-index: 1;
}
.anniv-sec-title {
  font-size: 2rem;
  font-weight: 800;
  color: #131637;
  margin: 0 0 2.5rem;
}
.anniv-prize-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 4vw, 3.5rem);
  flex-wrap: nowrap;
}
.anniv-prize-item {
  flex: 1 1 0;
  min-width: 0;
}
.anniv-prize-item img {
  width: clamp(72px, 22vw, 180px);
  height: clamp(72px, 22vw, 180px);
  object-fit: contain;
  display: block;
  margin: 0 auto 1rem;
  transition: transform 0.3s ease;
}
.anniv-prize-item:hover img {
  transform: translateY(-10px);
}
.anniv-prize-item p {
  position: relative;
  z-index: 1;
  cursor: default;
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
}
/* 跟主選單 hover 一樣的流動漸層模糊光暈效果 */
.anniv-prize-item p::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px -4px;
  border-radius: 999px;
  background: linear-gradient(45deg, #07f0b7 0%, #00c8ff 10%, #91f335 20%, #00c8ff 30%, #91f335 40%, #00c8ff 50%, #07f0b7 60%, #00c8ff 70%, #91f335 80%, #00c8ff 90%);
  background-size: 300% 300%;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.anniv-prize-item:hover p::after {
  opacity: 1;
  animation: anniv-prize-glow-flow 6s linear infinite;
}
@keyframes anniv-prize-glow-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
.anniv-prize-break {
  display: none;
}

/* ---------- Story ---------- */
.anniv-story {
  position: relative;
  background: #fff;
  padding: 2rem 0 4rem;
  overflow: hidden;
}
.anniv-story-bg-notes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(160px, 22%);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.anniv-story .anniv-in {
  position: relative;
  z-index: 1;
}
.anniv-story .anniv-in {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.anniv-story-title {
  width: 100%;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}
.anniv-story-mascot {
  flex: 0 0 220px;
  max-width: 220px;
}
.anniv-story-mascot img {
  width: 100%;
  height: auto;
  display: block;
}
.anniv-story-copy {
  flex: 1 1 420px;
  min-width: 280px;
  text-align: left;
}
.anniv-story-copy p {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.9;
  color: #45495c;
  margin: 0 0 1rem;
}

/* ---------- Steps ---------- */
.anniv-steps-wrapper {
  padding: 8rem 0 8rem;
  background: #fff;
}
.anniv-steps-panel {
  position: relative;
  background:
    radial-gradient(50% 50% at 0% 100%, rgba(199, 163, 78, 0.16) 0%, rgba(199, 163, 78, 0) 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(199, 163, 78, 0.16) 0%, rgba(199, 163, 78, 0) 70%),
    radial-gradient(50% 50% at 0% 0%, rgba(214, 186, 110, 0.14) 0%, rgba(214, 186, 110, 0) 70%),
    radial-gradient(50% 50% at 100% 0%, rgba(214, 186, 110, 0.14) 0%, rgba(214, 186, 110, 0) 70%),
    linear-gradient(180deg, #fffdf6 0%, #ffffff 45%, #fffcf3 100%);
  border-radius: 80px;
  padding: 3rem 3rem 2.5rem;
}
.anniv-steps-float-note {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  height: auto;
  display: block;
}
.anniv-steps-float-note-top {
  top: -3.8rem;
  left: 15%;
  width: clamp(38px, 5vw, 60px);
}
.anniv-steps-float-note-left {
  top: 5rem;
  left: 6%;
  width: clamp(40px, 5.2vw, 62px);
}
.anniv-steps-float-note-right {
  top: 4rem;
  right: 8%;
  width: clamp(34px, 4.5vw, 54px);
  transform: scaleX(-1);
}
.anniv-steps-float-note-right img,
.anniv-steps-float-note-top2 img {
  display: block;
  width: 100%;
  height: auto;
}
.anniv-steps-float-note-top2 {
  top: -2.6rem;
  right: 14%;
  width: clamp(36px, 4.7vw, 56px);
}
.anniv-steps-panel .animated.floating-v {
  animation-name: noteFloatA;
  animation-timing-function: ease-in-out;
}
.anniv-steps-panel .animated.floating-v2 {
  animation-name: noteFloatB;
  animation-timing-function: ease-in-out;
}
.anniv-steps-title {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: -6.6rem 0 1rem;
}
.anniv-steps-title img {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: inline-block;
}
.anniv-steps-intro {
  text-align: center;
  color: #6a6f85;
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 0 2.5rem;
}
.anniv-steps-intro p {
  margin: 0;
  color: #6a6f85;
}
.anniv-steps-intro p + p {
  margin-top: 0.8rem;
}
.anniv-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
.anniv-step-card {
  position: relative;
}
.anniv-step-card::after {
  content: "";
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFBEF;
  z-index: 0;
  pointer-events: none;
}
.anniv-step-card:nth-child(1)::after {
  content: "1";
}
.anniv-step-card:nth-child(2)::after {
  content: "2";
}
.anniv-step-card:nth-child(3)::after {
  content: "3";
}
.anniv-step-card:nth-child(4)::after {
  content: "4";
}
.anniv-step-card img,
.anniv-step-card p {
  position: relative;
  z-index: 1;
}
.anniv-step-card img {
  width: 56px;
  height: 56px;
  margin-bottom: 0.8rem;
}
.anniv-step-num {
  color: #131637;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.05rem;
}
.anniv-step-num-arrow {
  color: #3c69ff;
}
.anniv-step-title {
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0.3rem 0 0.6rem;
  line-height: 1.4;
}
.anniv-step-desc {
  font-size: 0.9rem;
  color: #131637;
  line-height: 1.7;
  margin: 0;
}
.anniv-steps-note {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #d99a3d;
  margin-bottom: 2rem;
}
.anniv-steps-note-text {
  position: relative;
  top: 0.3rem;
  color: #D79F35;
}
.anniv-steps-note-icon {
  width: 1.5rem;
  flex-shrink: 0;
}
.anniv-steps-cta {
  text-align: center;
}
.btn-anniv-cta {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #07f0b7;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}
.btn-anniv-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: #131637;
  border-radius: 20px;
  transition: 0.2s 0.1s;
}
.btn-anniv-cta:hover::before {
  height: 100%;
}
.btn-anniv-cta p {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem 4rem;
  color: #131637;
  transition: 0.2s 0.1s;
}
.btn-anniv-cta p span {
  font-weight: 800;
  font-size: 1.1rem;
  color: #131637;
  margin: 0 20px;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: 0.2s 0.1s;
}
.btn-anniv-cta p svg {
  width: 18px;
  height: 18px;
}
.btn-anniv-cta p svg path {
  fill: #131637;
  transition: 0.2s 0.1s;
}
.btn-anniv-cta:hover p,
.btn-anniv-cta:hover p span {
  color: #07f0b7;
}
.btn-anniv-cta:hover p svg path {
  fill: #07f0b7;
}

/* ---------- Rules ---------- */
.anniv-rules {
  position: relative;
  background: #fff;
  padding: 1rem 0 4rem;
  overflow: hidden;
}
.anniv-rules-bg-notes {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(500px, 60%);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.anniv-rules-mascot-detail {
  position: absolute;
  bottom: -10px;
  right: 2rem;
  width: min(180px, 22%);
  height: auto;
  z-index: 1;
  display: block;
}
.anniv-mascot-hop {
  display: block;
  width: 100%;
  height: auto;
  animation: anniv-mascot-hop 3s ease-in-out infinite;
}
@keyframes anniv-mascot-hop {
  0%,
  24%,
  100% {
    transform: translateY(0);
  }
  6%,
  18% {
    transform: translateY(-8px);
  }
  12% {
    transform: translateY(0);
  }
}
.anniv-rules .anniv-in {
  position: relative;
  z-index: 1;
}
.anniv-rules-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 1.5rem;
}
.anniv-rules ol {
  padding-left: 1.3rem;
  padding-bottom: 100px;
  margin: 0;
  color: #757B93;
  font-size: 0.95rem;
  line-height: 1.9;
}
.anniv-rules ol li {
  margin-bottom: 0.6rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .anniv-step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .anniv-hero-title {
    font-size: 2.6rem;
  }
  .anniv-steps-panel {
    padding: 2.5rem 1.5rem;
  }
  .anniv-steps-title {
    margin: -6rem 0 1rem;
  }
  .anniv-steps-wrapper {
    padding: 5.5rem 0 4rem;
  }
  .anniv-steps-float-note-left {
    top: 2.2rem;
  }
  .anniv-steps-float-note-right {
    top: 1.6rem;
  }
}
@media (max-width: 734px) {
  .anniv-steps-float-note-top {
    top: -5.4rem;
  }
  .anniv-steps-float-note-top2 {
    top: -4.2rem;
  }
  .anniv-steps-wrapper {
    padding-top: 7rem;
  }
}
@media (max-width: 640px) {
  .anniv-in {
    padding: 0 1.2rem;
  }
  .anniv-steps-note {
    align-items: center;
  }
  .anniv-steps-note-text {
    top: 0;
  }
  .btn-anniv-cta p {
    padding: 1rem 1.5rem;
  }
  .btn-anniv-cta p span {
    margin: 0 12px;
  }
  .anniv-rules-mascot-detail {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
  }
  .anniv-prizes-bg-notes {
    width: min(700px, 95%);
  }
  .anniv-story-bg-notes {
    width: min(200px, 38%);
  }
  .anniv-rules-bg-notes {
    width: min(600px, 100%);
  }
  .anniv-steps-panel {
    border-radius: 40px;
  }
  .anniv-steps-title img {
    max-width: 240px;
  }
  .anniv-steps-float-note-left {
    top: 1.2rem;
  }
  .anniv-step-card {
    text-align: center;
  }
  .anniv-steps-title {
    margin: -5.5rem 0 1rem;
  }
  .anniv-prize-break {
    display: inline;
  }
  .anniv-hero {
    padding: 2.5rem 0 2rem;
  }
  .anniv-hero-mascot {
    flex: 0 0 220px;
    max-width: 220px;
    margin: 0 auto;
  }
  .anniv-hero-copy {
    text-align: center;
  }
  .anniv-hero-title {
    font-size: 2.1rem;
    justify-content: center;
  }
  .anniv-linebanner-left,
  .anniv-linebanner-right {
    padding: 2rem 1.5rem;
    justify-content: center;
    text-align: center;
    /* min-width:420px 是為了避免「並排窄欄」時被擠爆換行，但手機版寬度
       已經 <640px，兩塊本來就會各自獨立一整排、不會並排，所以不需要這
       個下限；保留的話反而會讓寬度小於 420px 的手機（幾乎所有手機）被
       撐寬到 420px，超出螢幕被裁掉一截看不到。 */
    min-width: 0;
  }
  .anniv-linebanner-left {
    flex-direction: column;
  }
  .anniv-story .anniv-in {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .anniv-story-copy {
    flex: 1 1 auto;
    text-align: center;
  }
  .anniv-step-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 音符漂浮動畫加強（幅度比全站預設 floating-v/v2 更明顯） ---------- */
@keyframes noteFloatA {
  0% {
    transform: translateY(-14px) rotate(-4deg);
  }
  50% {
    transform: translateY(8px) rotate(3deg);
  }
  100% {
    transform: translateY(-14px) rotate(-4deg);
  }
}
@keyframes noteFloatB {
  0% {
    transform: translateY(10px) rotate(4deg);
  }
  50% {
    transform: translateY(-12px) rotate(-3deg);
  }
  100% {
    transform: translateY(10px) rotate(4deg);
  }
}
.anniv-hero-notes-scatter .note img.animated.floating-v,
.anniv-hero-notes-row img.animated.floating-v {
  animation-name: noteFloatA;
  animation-timing-function: ease-in-out;
}
.anniv-hero-notes-scatter .note img.animated.floating-v2,
.anniv-hero-notes-row img.animated.floating-v2 {
  animation-name: noteFloatB;
  animation-timing-function: ease-in-out;
}
/* ---------- Hero 進場動畫 ---------- */
@keyframes anniv-hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes anniv-hero-wipe-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anniv-hero-rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anniv-hero-note-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- 置頂選單出現效果加強 ----------
   全站預設用 transition 做位移，但 JS 會在同一個 tick 內
   同時加上 sticky + inview 兩個 class，瀏覽器來不及畫出
   -50px 的起始畫面，transition 等於沒有真的播放，看起來很突然。
   改用 @keyframes 動畫，不管 class 是不是同時加上，
   每次都會確實從頭播放整段滑入＋淡入的動畫。 */
@keyframes anniv-header-slide-down {
  from {
    transform: translate(0, -50px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
header.sticky {
  opacity: 1;
}
header.sticky.inview {
  animation: anniv-header-slide-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---------- 僅此頁隱藏全站浮動 LINE 按鈕 ---------- */
.ft-line-btn {
  display: none !important;
}