/* =========================================================
   拼出喵世界｜eventPuzzle.css｜精簡整理版
   順序：共用 > 電腦版 > 手機版
   ★ 平常調整請找「★ 可調整」
========================================================= */


/* =========================================================
   1. 共用
========================================================= */

.meowPuzzlePage {
  --puzzle-bg-top: #f8e8c9;
  --puzzle-bg-mid: #eee1df;
  --puzzle-bg-bottom: #c9bbe0;
  --puzzle-ink: #362c28;
  --puzzle-pink: #d95f97;
  --label-bg: rgba(255,255,255,.97);

  position: relative;
  width: 100%;
  min-height: 930px;
  overflow: hidden;
  isolation: isolate;
  color: var(--puzzle-ink);
  background: linear-gradient(
    180deg,
    var(--puzzle-bg-top) 0%,
    #f4e5d6 23%,
    var(--puzzle-bg-mid) 52%,
    #ddd0df 76%,
    var(--puzzle-bg-bottom) 100%
  );
}

article.meowPuzzleArticle {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
}

.meowPuzzleContent {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}


/* ---------- 主題標題 ---------- */

.meowPuzzleHero {
  height: auto;
  text-align: center;
    margin-top: 10%;
}

.meowPuzzleHeroTitleImg {
  display: block;
  width: min(920px, 100%);
  height: auto;
  margin: 0 auto;
     /* ★ 標題陰影 */
  filter:
    drop-shadow(
      0
      8px
      4px
      rgba(58, 40, 32, .22)
    );
}

.meowPuzzleContent > h2 {
  margin: 20px 0 0;
  color: #010101;
  font-family: "Huninn", sans-serif;
  font-size: 35px;
  font-weight: 400;
  text-align: center;
}

.meowPuzzleSection {
  position: relative;
  padding: 42px 0 56px;
}

.meowPuzzleSection--mission {
  padding: 55px 0 100px;
}

.meowPuzzleBottomSpace {
  height: 170px;
}


/* ---------- 標題 Scroll 淡入 ---------- */
/* JS：meowScrollFx = 啟動、meowFadeIn = 顯示 */

.meowPuzzleHero,
.meowPuzzleContent > h2 {
  opacity: 1;
  transform: none;
}

.meowPuzzlePage.meowScrollFx .meowPuzzleHero:not(.meowFadeIn) {
  opacity: 0;
  transform: translateY(30px);
}

.meowPuzzlePage.meowScrollFx .meowPuzzleContent > h2:not(.meowFadeIn) {
  opacity: 0;
  transform: translateY(24px);
}

.meowPuzzlePage.meowScrollFx .meowPuzzleHero.meowFadeIn,
.meowPuzzlePage.meowScrollFx .meowPuzzleContent > h2.meowFadeIn {
  opacity: 1;
  transform: translateY(0);
}

.meowPuzzlePage.meowScrollFx .meowPuzzleHero {
  transition: opacity .75s ease, transform .85s cubic-bezier(.2,.8,.2,1);
}

.meowPuzzlePage.meowScrollFx .meowPuzzleContent > h2 {
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}


/* ---------- 背景裝飾 ---------- */

.meowPuzzleBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.meowPuzzleBgDecor {
  position: absolute;
  display: block;
  height: auto;
  opacity: .72;
  transform-origin: center;
}

.meowPuzzleBgDecor--tl {
  width: clamp(190px,46vw,560px);
  top: -20px;
  left: -28px;
  animation: meowBgFloatA 8s ease-in-out infinite;
}

.meowPuzzleBgDecor--tr {
  width: clamp(180px,46vw,540px);
  top: -10px;
  right: -35px;
  animation: meowBgFloatB 9s ease-in-out infinite;
}

.meowPuzzleBgDecor--bl {
  width: clamp(190px,46vw,570px);
  bottom: -10px;
  left: -36px;
  animation: meowBgFloatB 9s ease-in-out infinite;
}

.meowPuzzleBgDecor--br {
  width: clamp(190px,46vw,570px);
  right: -30px;
  bottom: -10px;
  animation: meowBgFloatA 10s ease-in-out infinite;
}


/* ---------- 星星 / 泡泡 ---------- */

.meowPuzzleSparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: .9;
  animation: meowTwinkle 3.2s ease-in-out infinite;
}

.meowPuzzleSparkle::before,
.meowPuzzleSparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
}

.meowPuzzleSparkle::before { width: 4px; height: 100%; }
.meowPuzzleSparkle::after  { width: 100%; height: 4px; }

.meowPuzzleSparkle--1 { top:170px; right:12%; }
.meowPuzzleSparkle--2 { top:270px; right:9%; width:13px; height:13px; animation-delay:1.2s; }
.meowPuzzleSparkle--3 { top:360px; left:8%; width:14px; height:14px; animation-delay:.6s; }
.meowPuzzleSparkle--4 { right:7%; bottom:210px; width:11px; height:11px; animation-delay:1.8s; }

.meowPuzzleBubble {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}

.meowPuzzleBubble--1 { width:34px; height:34px; top:250px; left:7%; }
.meowPuzzleBubble--2 { width:48px; height:48px; top:380px; right:6%; }
.meowPuzzleBubble--3 { width:30px; height:30px; bottom:150px; left:8%; }


/* ---------- 卡片 / 圖片 ---------- */

.meowPuzzleCard {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: visible;
}

.meowPuzzlePieceWrap,
.meowPuzzleMissionPiece {
  position: relative;
  display: block;
  line-height: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.meowPuzzlePieceWrap { z-index: 3; }

.meowPuzzlePieceImg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
}


/* ---------- 活動名稱對話框 ---------- */

.meowPuzzleLabel {
  position: absolute;
  z-index: 80;
  width: max-content;
  min-width: 160px;
  max-width: 230px;
  padding: 10px 16px 11px;
  background: var(--label-bg);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(74,48,43,.15);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease .35s;
}

.meowPuzzleCard.is-in .meowPuzzleLabel { opacity: 1; }

.meowPuzzleLabel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--label-bg);
  transform: rotate(45deg);
}

.meowPuzzleName {
  display: block;
  color: #382e2a;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 900;
  white-space: nowrap;
}

.meowPuzzleSub {
  display: block;
  margin-top: 2px;
  color: var(--puzzle-pink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  white-space: nowrap;
}


/* ---------- 尚未上線 .unlink ---------- */
/* 尚未上線：加 unlink；上線後：刪掉 unlink */

.unlink { cursor: default !important; }

.meowPuzzleCard.unlink.is-in .meowPuzzleLabel { opacity: .80; }
.meowPuzzleCard.unlink .meowPuzzleName { color: #817873; }
.meowPuzzleCard.unlink .meowPuzzleSub { display: none; }

.meowPuzzleCard.unlink .meowPuzzleName::after {
  content: "即將開放";
  display: block;
  margin-top: 3px;
  color: #aaa09b;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.meowPuzzleCard:not(.unlink) { cursor: pointer; }


/* =========================================================
   2. 電腦版｜>= 768px
========================================================= */

@media screen and (min-width: 768px) {

  /* =======================================================
     ★ 可調整｜第一區整體
     -------------------------------------------------------
     stage-height      = 第一區高度
     core-piece-width  = 中間四片大小
     core-left/right-x = 中間四片左右
     core-top/bottom-y = 中間四片上下
     outerXX-width     = 四角手+拼圖大小
     outerXX-位置      = 四角位置
  ======================================================= */

  .meowPuzzlePage {
    --stage-width: min(1120px, calc(100% - 20px));
    --stage-height: 760px;

    --core-piece-width: 385px;
    --core-left-x: 275px;
    --core-right-x: 57px;
    --core-top-y: 140px;
    --core-bottom-y: 355px;

    --outer01-width: 530px;
    --outer04-width: 530px;
    --outer05-width: 530px;
    --outer08-width: 530px;

    --outer01-left: -130px;
    --outer01-top: -30px;
    --outer04-right: -130px;
    --outer04-top: -10px;
    --outer05-left: -60px;
    --outer05-bottom: -190px;
    --outer08-right: -130px;
    --outer08-bottom: -170px;

    --outer-enter-x: 250px;
    --outer-enter-y: 150px;
    --outer-hover-x: 10px;
    --outer-hover-y: 6px;
  }


  /* ---------- 第一區舞台 ---------- */

  .meowPuzzleStage {
    position: relative;
    width: var(--stage-width);
    height: var(--stage-height);
    margin: 0 auto;
    overflow: visible;
  }

  .meowPuzzleStage > .meowPuzzleCard { position: absolute; }


  /* ---------- 中間 02 / 03 / 06 / 07 ---------- */

  .meowPuzzleCard--core { width: var(--core-piece-width); }

  .meowPuzzleCard--02 {
    top: var(--core-top-y);
    left: calc(50% - var(--core-left-x));
    z-index: 27;
    --core-hover-x:-6px; --core-hover-y:-12px; --core-hover-rotate:-2deg;
  }

  .meowPuzzleCard--03 {
    top: var(--core-top-y);
    left: calc(50% - var(--core-right-x));
    z-index: 25;
    --core-hover-x:6px; --core-hover-y:-12px; --core-hover-rotate:2deg;
  }

  .meowPuzzleCard--06 {
    top: var(--core-bottom-y);
    left: calc(50% - var(--core-left-x));
    z-index: 28;
    --core-hover-x:-7px; --core-hover-y:-10px; --core-hover-rotate:-2deg;
  }

  .meowPuzzleCard--07 {
    top: var(--core-bottom-y);
    left: calc(50% - var(--core-right-x));
    z-index: 24;
    --core-hover-x:7px; --core-hover-y:-10px; --core-hover-rotate:2deg;
  }

  .meowPuzzleCard--core .meowPuzzlePieceWrap {
    opacity: 0;
    transform: translateY(30px) scale(.96);
    filter: drop-shadow(0 4px 0 rgba(58,40,32,.23));
    transition: opacity .5s ease, transform .75s cubic-bezier(.2,.8,.2,1), filter .25s ease;
  }

  .meowPuzzleCard--core.is-in .meowPuzzlePieceWrap {
    opacity: 1;
    transform: translateY(0) scale(1);
  }


  /* ---------- 四角 01 / 04 / 05 / 08 ---------- */

  .meowPuzzleHandPiece {
    width: 100%;
    opacity: 0;
    filter: drop-shadow(0 8px 0 rgba(58,40,32,.23));
    transition: opacity .55s ease, transform .95s cubic-bezier(.18,.82,.24,1), filter .25s ease;
  }

  .meowPuzzleCard--01 {
    top: var(--outer01-top);
    left: var(--outer01-left);
    width: var(--outer01-width);
    z-index: 30;
    --rest-rotate:-6deg; --hover-rotate:-3deg;
    --wiggle-x:var(--outer-hover-x); --wiggle-y:var(--outer-hover-y);
  }

  .meowPuzzleCard--04 {
    top: var(--outer04-top);
    right: var(--outer04-right);
    width: var(--outer04-width);
    z-index: 32;
    --rest-rotate:6deg; --hover-rotate:3deg;
    --wiggle-x:calc(var(--outer-hover-x) * -1); --wiggle-y:var(--outer-hover-y);
  }

  .meowPuzzleCard--05 {
    bottom: var(--outer05-bottom);
    left: var(--outer05-left);
    width: var(--outer05-width);
    z-index: 29;
    --rest-rotate:6deg; --hover-rotate:3deg;
    --wiggle-x:var(--outer-hover-x); --wiggle-y:calc(var(--outer-hover-y) * -1);
  }

  .meowPuzzleCard--08 {
    right: var(--outer08-right);
    bottom: var(--outer08-bottom);
    width: var(--outer08-width);
    z-index: 27;
    --rest-rotate:-6deg; --hover-rotate:-3deg;
    --wiggle-x:calc(var(--outer-hover-x) * -1); --wiggle-y:calc(var(--outer-hover-y) * -1);
  }

  .meowPuzzleCard--01 .meowPuzzleHandPiece {
    transform: translate(calc(var(--outer-enter-x)*-1),calc(var(--outer-enter-y)*-1)) rotate(var(--rest-rotate));
  }

  .meowPuzzleCard--04 .meowPuzzleHandPiece {
    transform: translate(var(--outer-enter-x),calc(var(--outer-enter-y)*-1)) rotate(var(--rest-rotate));
  }

  .meowPuzzleCard--05 .meowPuzzleHandPiece {
    transform: translate(calc(var(--outer-enter-x)*-1),var(--outer-enter-y)) rotate(var(--rest-rotate));
  }

  .meowPuzzleCard--08 .meowPuzzleHandPiece {
    transform: translate(var(--outer-enter-x),var(--outer-enter-y)) rotate(var(--rest-rotate));
  }

  .meowPuzzleCard--outer.is-in .meowPuzzleHandPiece {
    opacity: 1;
    transform: translate(0,0) rotate(var(--rest-rotate));
  }


  /* =======================================================
     ★ 可調整｜第一區 8 個名稱位置
  ======================================================= */

  .meowPuzzleCard--01 .meowPuzzleLabel { min-width:170px; top:82%; left:90px; transform:translateY(-50%); }
  .meowPuzzleCard--02 .meowPuzzleLabel { min-width:170px; top:-8px; left:45%; transform:translate(-50%,-100%); }
  .meowPuzzleCard--03 .meowPuzzleLabel { min-width:170px; top:-8px; left:50%; transform:translate(-50%,-100%); }
  .meowPuzzleCard--04 .meowPuzzleLabel { min-width:170px; top:90%; right:60px; transform:translateY(-50%); }
  .meowPuzzleCard--05 .meowPuzzleLabel { min-width:170px; top:20%; left:20px; transform:translateY(-50%); }
  .meowPuzzleCard--06 .meowPuzzleLabel { min-width:180px; bottom:40px; left:45%; transform:translate(-50%,100%); }
  .meowPuzzleCard--07 .meowPuzzleLabel { min-width:180px; bottom:40px; left:50%; transform:translate(-50%,100%); }
  .meowPuzzleCard--08 .meowPuzzleLabel { min-width:170px; top:20%; right:60px; transform:translateY(-50%); }

  .meowPuzzleCard--01 .meowPuzzleLabel::after,
  .meowPuzzleCard--05 .meowPuzzleLabel::after {
    top:50%; right:-7px; transform:translateY(-50%) rotate(45deg);
  }

  .meowPuzzleCard--04 .meowPuzzleLabel::after,
  .meowPuzzleCard--08 .meowPuzzleLabel::after {
    top:50%; left:-7px; transform:translateY(-50%) rotate(45deg);
  }

  .meowPuzzleCard--02 .meowPuzzleLabel::after,
  .meowPuzzleCard--03 .meowPuzzleLabel::after {
    left:50%; bottom:-7px; transform:translateX(-50%) rotate(45deg);
  }

  .meowPuzzleCard--06 .meowPuzzleLabel::after,
  .meowPuzzleCard--07 .meowPuzzleLabel::after {
    top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
  }


  /* =======================================================
     ★ 可調整｜第一區滑鼠感應範圍
     SVG 透明區太大時調這裡
  ======================================================= */

  #meowPuzzleStage > .meowPuzzleCard { pointer-events:none; }

  #meowPuzzleStage > .meowPuzzleCard::after {
    content:"";
    position:absolute;
    z-index:200;
    left:var(--hit-left,20%);
    top:var(--hit-top,15%);
    width:var(--hit-width,60%);
    height:var(--hit-height,70%);
    pointer-events:auto;
    background:transparent;
  }

  .meowPuzzleCard--01 { --hit-left:38%; --hit-top:25%; --hit-width:48%; --hit-height:58%; }
  .meowPuzzleCard--02,
  .meowPuzzleCard--03 { --hit-left:20%; --hit-top:12%; --hit-width:60%; --hit-height:76%; }
  .meowPuzzleCard--04 { --hit-left:14%; --hit-top:25%; --hit-width:48%; --hit-height:58%; }
  .meowPuzzleCard--05 { --hit-left:38%; --hit-top:16%; --hit-width:48%; --hit-height:58%; }
  .meowPuzzleCard--06 { --hit-left:12%; --hit-top:12%; --hit-width:76%; --hit-height:76%; }
  .meowPuzzleCard--07 { --hit-left:23%; --hit-top:12%; --hit-width:54%; --hit-height:76%; }
  .meowPuzzleCard--08 { --hit-left:14%; --hit-top:16%; --hit-width:48%; --hit-height:58%; }


  /* =======================================================
     ★ 可調整｜第二區桌機
  ======================================================= */

  .meowPuzzlePage {
    --mission-stage-width: 1000px;
    --mission-left-width: 530px;
    --mission-middle-width: 510px;
    --mission-right-width: 510px;
    --mission-overlap: -125px;

    --mission-left-x:0px; --mission-left-y:0px;
    --mission-middle-x:0px; --mission-middle-y:0px;
    --mission-right-x:0px; --mission-right-y:0px;

    --mission-enter-x:250px;
    --mission-enter-y:180px;
    --mission-hover-x:10px;
    --mission-hover-y:7px;
  }

  .meowPuzzleMissionStage {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(var(--mission-stage-width),100%);
    margin:0 auto;
    overflow:visible;
  }

  .meowPuzzleMissionCard {
    position:relative;
    flex:0 0 auto;
    overflow:visible;
    pointer-events:none;
  }

  .meowPuzzleMissionCard--middle,
  .meowPuzzleMissionCard--right {
    margin-left:var(--mission-overlap);
  }

  .meowPuzzleMissionPiece {
    width:100%;
    opacity:0;
    filter:drop-shadow(0 8px 14px rgba(58,40,32,.14));
    transition:opacity .55s ease, transform .95s cubic-bezier(.18,.82,.24,1), filter .25s ease;
  }

  .meowPuzzleMissionCard--left {
    width:var(--mission-left-width);
    transform:translate(var(--mission-left-x),var(--mission-left-y));
    z-index:2;
    --mission-rest-rotate:-3deg;
    --mission-wiggle-x:var(--mission-hover-x);
    --mission-wiggle-y:var(--mission-hover-y);
    --mission-hover-rotate:-1deg;
  }

  .meowPuzzleMissionCard--middle {
    width:var(--mission-middle-width);
    transform:translate(var(--mission-middle-x),var(--mission-middle-y));
    z-index:1;
    --mission-rest-rotate:0deg;
    --mission-wiggle-x:0px;
    --mission-wiggle-y:calc(var(--mission-hover-y)*-1);
    --mission-hover-rotate:1.2deg;
  }

  .meowPuzzleMissionCard--right {
    width:var(--mission-right-width);
    transform:translate(var(--mission-right-x),var(--mission-right-y));
    z-index:3;
    --mission-rest-rotate:3deg;
    --mission-wiggle-x:calc(var(--mission-hover-x)*-1);
    --mission-wiggle-y:var(--mission-hover-y);
    --mission-hover-rotate:1deg;
  }

  .meowPuzzleMissionCard--left .meowPuzzleMissionPiece {
    transform:translateX(calc(var(--mission-enter-x)*-1)) rotate(var(--mission-rest-rotate));
  }

  .meowPuzzleMissionCard--middle .meowPuzzleMissionPiece {
    transform:translateY(var(--mission-enter-y)) rotate(var(--mission-rest-rotate));
  }

  .meowPuzzleMissionCard--right .meowPuzzleMissionPiece {
    transform:translateX(var(--mission-enter-x)) rotate(var(--mission-rest-rotate));
  }

  .meowPuzzleMissionCard.is-in .meowPuzzleMissionPiece {
    opacity:1;
    transform:translate(0,0) rotate(var(--mission-rest-rotate));
    filter:drop-shadow(0 4px 0 rgba(58,40,32,.23));
  }


  /* ★ 第二區名稱位置 */
  .meowPuzzleMissionCard .meowPuzzleLabel {
    position:relative;
    display:table;
    min-width:175px;
    padding:11px 18px;
    opacity:0;
    transition:opacity .35s ease .3s;
  }

  .meowPuzzleMissionCard.is-in .meowPuzzleLabel { opacity:1; }

  .meowPuzzleMissionCard .meowPuzzleLabel::after {
    top:-7px;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
  }

  .meowPuzzleMissionCard .meowPuzzleName {
    font-size:23px;
    line-height:1.35;
  }

  .meowPuzzleMissionCard--left .meowPuzzleLabel {
    margin:-30px auto 0;
    right:-150px;
  }

  .meowPuzzleMissionCard--middle .meowPuzzleLabel {
    margin:-200px auto 0;
    left:0;
  }

  .meowPuzzleMissionCard--right .meowPuzzleLabel {
    margin:-30px auto 0;
    left:-150px;
  }


  /* 第二區滑鼠感應範圍 */
  .meowPuzzleMissionCard::after {
    content:"";
    position:absolute;
    z-index:200;
    left:var(--mission-hit-left);
    top:var(--mission-hit-top);
    width:var(--mission-hit-width);
    height:var(--mission-hit-height);
    pointer-events:auto;
    background:transparent;
  }

  .meowPuzzleMissionCard--left,
  .meowPuzzleMissionCard--right {
    --mission-hit-left:7%;
    --mission-hit-top:8%;
    --mission-hit-width:86%;
    --mission-hit-height:82%;
  }

  .meowPuzzleMissionCard--middle {
    --mission-hit-left:12%;
    --mission-hit-top:5%;
    --mission-hit-width:76%;
    --mission-hit-height:90%;
  }
}


/* ---------- 電腦 Hover ---------- */

@media screen and (min-width:768px) and (hover:hover) and (pointer:fine) {

  .meowPuzzleCard--core.is-in:not(.unlink):hover .meowPuzzlePieceWrap,
  .meowPuzzleCard--core.is-in:not(.unlink):focus-visible .meowPuzzlePieceWrap {
    animation:meowPuzzleCoreWiggle 1.05s ease-in-out infinite;
    filter:drop-shadow(0 17px 10px rgba(58,40,32,.36));
  }

  .meowPuzzleCard--outer.is-in:not(.unlink):hover .meowPuzzleHandPiece,
  .meowPuzzleCard--outer.is-in:not(.unlink):focus-visible .meowPuzzleHandPiece {
    animation:meowPuzzleHandWiggle 1.05s ease-in-out infinite;
    filter:drop-shadow(0 10px 10px rgba(58,40,32,.36));
  }

  .meowPuzzleMissionCard.is-in:not(.unlink):hover .meowPuzzleMissionPiece,
  .meowPuzzleMissionCard.is-in:not(.unlink):focus-visible .meowPuzzleMissionPiece {
    animation:meowPuzzleMissionWiggle 1.05s ease-in-out infinite;
    filter:drop-shadow(0 16px 14px rgba(58,40,32,.2));
  }

  .meowPuzzleCard:not(.unlink):hover,
  .meowPuzzleCard:not(.unlink):focus-visible {
    z-index:120 !important;
  }
}


/* =========================================================
   3. 手機版｜<= 767px
========================================================= */

@media screen and (max-width:767px) {

/* 第一區 */
  .meowPuzzleSection--main {
    padding-bottom: 20px;
   
  }

  /* 第二區標題 */
  .meowPuzzleHero--section2 {
    padding: 10px 0 24px;
    margin-top: -400px;
  }
    
    /* =======================================================
     ★ 可調整｜手機整體
  ======================================================= */

  .meowPuzzlePage {
    --mobile-card-width:min(360px,128vw);
    --mobile-card-gap:14px;

    --mission-mobile-width:72vw;
    --mission-mobile-gap:30px;
  }

  .meowPuzzleContent {
    width:calc(100% - 20px);
    max-width:520px;
  }

  .meowPuzzleHero {
    padding:0px 0 24px;
  }

  .meowPuzzleHeroTitleImg {
    width:110%;
    max-width:none;
    margin-left:-5%;
  }

  .meowPuzzleContent > h2 {
    width:90%;
    margin:20px auto;
    font-size:23px;
  }

  .meowPuzzleSection {
    padding:40px 0 66px;
  }

  .meowPuzzleSection--mission {
    padding:35px 0 70px;
  }

  .meowPuzzleBottomSpace { height:140px; }


  /* 背景 */
  .meowPuzzleBgDecor--tl { width:180px; top:-10px; left:-28px; }
  .meowPuzzleBgDecor--tr { width:180px; top:-5px; right:-26px; }
  .meowPuzzleBgDecor--bl { width:180px; bottom:-10px; left:-28px; }
  .meowPuzzleBgDecor--br { width:200px; right:-26px; bottom:-10px; }


  /* ---------- 第一區單欄 ---------- */

  .meowPuzzleStage {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:auto;
    margin:0 auto;
  }

  .meowPuzzleStage > .meowPuzzleCard {
    position:relative;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:var(--mobile-card-width);
    height:auto;
    margin:0 auto var(--mobile-card-gap);
    z-index:1 !important;
  }

  .meowPuzzleCard--01 { order:1; }
  .meowPuzzleCard--02 { order:2; }
  .meowPuzzleCard--03 { order:3; }
  .meowPuzzleCard--04 { order:4; }
  .meowPuzzleCard--05 { order:5; }
  .meowPuzzleCard--06 { order:6; }
  .meowPuzzleCard--07 { order:7; }
  .meowPuzzleCard--08 { order:8; }


  /* 圖片大小與位置 */
  #meowPuzzleStage .meowPuzzlePieceWrap {
    width:var(--mobile-piece-width,100%) !important;
    height:auto;
    left:var(--mobile-piece-x,0px) !important;
    top:var(--mobile-piece-y,0px) !important;
    margin:0 auto;
    opacity:1;
    transform:none !important;
  }

  #meowPuzzleStage .meowPuzzlePieceImg {
    width:100%;
    max-width:none;
    margin:0 auto;
    animation:meowMobilePuzzleFloat 4s ease-in-out infinite;
  }


  /* Scroll 飛入 */
  .meowPuzzlePage.meowScrollFx
  #meowPuzzleStage > .meowPuzzleCard:not(.meowScrollIn)
  .meowPuzzlePieceWrap {
    opacity:0 !important;
    transform:translateX(var(--mobile-enter-x,-180px)) scale(.92) !important;
    transition:opacity .55s ease, transform .82s cubic-bezier(.18,.82,.24,1) !important;
  }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleStage > .meowPuzzleCard.meowScrollIn
  .meowPuzzlePieceWrap {
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
    transition:opacity .55s ease, transform .82s cubic-bezier(.18,.82,.24,1) !important;
  }


  /* 活動名稱 */
  #meowPuzzleStage .meowPuzzleLabel {
    position:relative;
    top:var(--mobile-label-y,0px) !important;
    right:auto !important;
    bottom:auto !important;
    left:var(--mobile-label-x,0px) !important;
    display:table;
    width:max-content;
    min-width:170px;
    max-width:92%;
    margin:-30px auto 0;
    padding:10px 16px 11px;
    border-radius:16px;
    transform:none !important;
  }

  #meowPuzzleStage .meowPuzzleLabel::after {
    top:-7px !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }

  #meowPuzzleStage .meowPuzzleName { font-size:25px; }
  #meowPuzzleStage .meowPuzzleSub { margin-top:3px; font-size:17px; }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleStage > .meowPuzzleCard:not(.meowScrollIn)
  .meowPuzzleLabel {
    opacity:0 !important;
  }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleStage > .meowPuzzleCard.meowScrollIn
  .meowPuzzleLabel {
    opacity:1 !important;
    transition:opacity .4s ease .22s !important;
  }


  /* =======================================================
     ★ 可調整｜第一區 01～08
     -------------------------------------------------------
     piece-width = 拼圖大小
     piece-x/y   = 拼圖位置
     label-x/y   = 名稱位置
     enter-x     = 飛入方向/距離
       負數左飛、正數右飛
  ======================================================= */

  .meowPuzzleCard--01 {
    --mobile-piece-width:120%;
    --mobile-piece-x:-120px;
    --mobile-piece-y:-100px;
    --mobile-label-x:0px;
    --mobile-label-y:-100px;
    --mobile-enter-x:-180px;
  }

  .meowPuzzleCard--02 {
    --mobile-piece-width:100%;
    --mobile-piece-x:0px;
    --mobile-piece-y:-100px;
    --mobile-label-x:0px;
    --mobile-label-y:-100px;
    --mobile-enter-x:180px;
  }

  .meowPuzzleCard--03 {
    --mobile-piece-width:100%;
    --mobile-piece-x:15px;
    --mobile-piece-y:-100px;
    --mobile-label-x:0px;
    --mobile-label-y:-100px;
    --mobile-enter-x:-180px;
  }

  .meowPuzzleCard--04 {
    --mobile-piece-width:120%;
    --mobile-piece-x:0px;
    --mobile-piece-y:-130px;
    --mobile-label-x:0px;
    --mobile-label-y:-130px;
    --mobile-enter-x:180px;
  }

  .meowPuzzleCard--05 {
    --mobile-piece-width:120%;
    --mobile-piece-x:-80px;
    --mobile-piece-y:-130px;
    --mobile-label-x:0px;
    --mobile-label-y:-290px;
    --mobile-enter-x:-180px;
  }

  .meowPuzzleCard--06 {
    --mobile-piece-width:100%;
    --mobile-piece-x:0px;
    --mobile-piece-y:-300px;
    --mobile-label-x:0px;
    --mobile-label-y:-320px;
    --mobile-enter-x:180px;
  }

  .meowPuzzleCard--07 {
    --mobile-piece-width:100%;
    --mobile-piece-x:10px;
    --mobile-piece-y:-330px;
    --mobile-label-x:0px;
    --mobile-label-y:-340px;
    --mobile-enter-x:-180px;
  }

  .meowPuzzleCard--08 {
    --mobile-piece-width:120%;
    --mobile-piece-x:0px;
    --mobile-piece-y:-320px;
    --mobile-label-x:0px;
    --mobile-label-y:-420px;
    --mobile-enter-x:180px;
  }


  /* ---------- 第二區手機 ---------- */

  .meowPuzzleMissionStage {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin:0 auto;
    overflow:visible;
  }

  .meowPuzzleMissionCard {
    position:relative;
    width:var(--mission-mobile-width);
    margin:0 auto var(--mission-mobile-gap);
    transform:none;
    z-index:1;
  }

  .meowPuzzleMissionCard--middle,
  .meowPuzzleMissionCard--right {
    margin-left:auto;
  }

  .meowPuzzleMissionPiece {
    width:var(--mobile-mission-width,100%) !important;
    left:var(--mobile-mission-x,0px) !important;
    top:var(--mobile-mission-y,0px) !important;
    opacity:1;
    transform:none !important;
  }

  .meowPuzzleMissionCard .meowPuzzlePieceImg {
    animation:meowPuzzleMissionMobileFloat 4s ease-in-out infinite;
  }


  /* 第二區 Scroll 飛入 */
  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage > .meowPuzzleMissionCard:not(.meowScrollIn)
  .meowPuzzleMissionPiece {
    opacity:0 !important;
    transform:translateX(var(--mission-mobile-enter-x,-180px)) scale(.92) !important;
    transition:opacity .55s ease, transform .82s cubic-bezier(.18,.82,.24,1) !important;
  }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage > .meowPuzzleMissionCard.meowScrollIn
  .meowPuzzleMissionPiece {
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
    transition:opacity .55s ease, transform .82s cubic-bezier(.18,.82,.24,1) !important;
  }


  /* 第二區名稱 */
  .meowPuzzleMissionCard .meowPuzzleLabel {
    position:relative;
    top:var(--mobile-mission-label-y,0px) !important;
    right:auto !important;
    bottom:auto !important;
    left:var(--mobile-mission-label-x,0px) !important;
    display:table;
    min-width:180px;
    margin:8px auto 0;
    padding:11px 18px;
    transform:none !important;
  }

  .meowPuzzleMissionCard .meowPuzzleLabel::after {
    top:-7px !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }

  .meowPuzzleMissionCard .meowPuzzleName { font-size:25px; }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage > .meowPuzzleMissionCard:not(.meowScrollIn)
  .meowPuzzleLabel {
    opacity:0 !important;
  }

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage > .meowPuzzleMissionCard.meowScrollIn
  .meowPuzzleLabel {
    opacity:1 !important;
    transition:opacity .4s ease .22s !important;
  }


  /* =======================================================
     ★ 可調整｜第二區 09～11
  ======================================================= */

  .meowPuzzleMissionCard--left {
    --mobile-mission-width:160%;
    --mobile-mission-x:-200px;
    --mobile-mission-y:0px;
    --mobile-mission-label-x:0px;
    --mobile-mission-label-y:-30px;
    --mission-mobile-enter-x:-180px;
  }

  .meowPuzzleMissionCard--middle {
    --mobile-mission-width:160%;
    --mobile-mission-x:-100px;
    --mobile-mission-y:-100px;
    --mobile-mission-label-x:0px;
    --mobile-mission-label-y:-290px;
    --mission-mobile-enter-x:180px;
  }

  .meowPuzzleMissionCard--right {
    --mobile-mission-width:160%;
    --mobile-mission-x:0px;
    --mobile-mission-y:-50px;
    --mobile-mission-label-x:0px;
    --mobile-mission-label-y:-80px;
    --mission-mobile-enter-x:-180px;
  }

  .meowPuzzleCard.unlink .meowPuzzleName::after {
    margin-top:2px;
    font-size:12px;
  }
}


/* =========================================================
   4. 很小手機｜<= 390px
========================================================= */

@media screen and (max-width:390px) {
  .meowPuzzlePage {
    --mobile-card-width:min(275px,68vw);
    --mobile-card-gap:22px;
  }

  #meowPuzzleStage .meowPuzzleName { font-size:18px; }
  #meowPuzzleStage .meowPuzzleSub { font-size:12px; }
}


/* =========================================================
   5. 動畫
========================================================= */

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

@keyframes meowBgFloatB {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(7px) rotate(-1.2deg); }
}

@keyframes meowTwinkle {
  0%,100% { opacity:.38; transform:scale(.8); }
  50% { opacity:1; transform:scale(1.12); }
}

@keyframes meowPuzzleCoreWiggle {
  0%,100% { transform:translate(0,0) scale(1); }
  42% { transform:translate(var(--core-hover-x),var(--core-hover-y)) rotate(var(--core-hover-rotate)) scale(1.04); }
  72% { transform:translate(calc(var(--core-hover-x)*-.25),calc(var(--core-hover-y)*-.25)) rotate(calc(var(--core-hover-rotate)*-.35)) scale(1.02); }
}

@keyframes meowPuzzleHandWiggle {
  0%,100% { transform:translate(0,0) rotate(var(--rest-rotate)); }
  45% { transform:translate(var(--wiggle-x),var(--wiggle-y)) rotate(var(--hover-rotate)); }
  75% { transform:translate(calc(var(--wiggle-x)*-.25),calc(var(--wiggle-y)*-.25)) rotate(var(--rest-rotate)); }
}

@keyframes meowPuzzleMissionWiggle {
  0%,100% { transform:translate(0,0) rotate(var(--mission-rest-rotate)) scale(1); }
  45% { transform:translate(var(--mission-wiggle-x),var(--mission-wiggle-y)) rotate(var(--mission-hover-rotate)) scale(1.035); }
  75% { transform:translate(calc(var(--mission-wiggle-x)*-.25),calc(var(--mission-wiggle-y)*-.25)) rotate(var(--mission-rest-rotate)) scale(1.015); }
}

/* =========================================================
   手機｜第一區 8 張
   滑入後活潑跳動
========================================================= */

@keyframes meowMobilePuzzleFloat {

  0%,
  15%,
  100% {
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }


  /* 第一次彈起 */
  32% {
    transform:
      translateY(-14px)
      rotate(-2deg)
      scale(1.035);
  }


  /* 回彈 */
  48% {
    transform:
      translateY(3px)
      rotate(1.5deg)
      scale(.995);
  }


  /* 第二次小跳 */
  62% {
    transform:
      translateY(-8px)
      rotate(-1deg)
      scale(1.02);
  }


  /* 回原位 */
  78% {
    transform:
      translateY(0)
      rotate(.5deg)
      scale(1);
  }

}

/* =========================================================
   手機｜第二區 3 張
   滑入後活潑跳動
========================================================= */

@keyframes meowPuzzleMissionMobileFloat {

  0%,
  15%,
  100% {
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }


  32% {
    transform:
      translateY(-14px)
      rotate(2deg)
      scale(1.035);
  }


  48% {
    transform:
      translateY(3px)
      rotate(-1.5deg)
      scale(.995);
  }


  62% {
    transform:
      translateY(-8px)
      rotate(1deg)
      scale(1.02);
  }


  78% {
    transform:
      translateY(0)
      rotate(-.5deg)
      scale(1);
  }

}
/* =========================================================
   6. 使用者設定「減少動態」
========================================================= */

/* =========================================================
   使用者設定「減少動態」
   ---------------------------------------------------------
   ★ 拼圖本身保留手機動畫
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .meowPuzzleBgDecor,
  .meowPuzzleSparkle {
    animation:none !important;
  }

  .meowPuzzleHero,
  .meowPuzzleContent > h2,
  .meowPuzzleLabel {
    opacity:1 !important;
    transition:none !important;
  }
}


/* =========================================================
   ★ 手機版｜拼圖滑入完成後持續活潑跳動
   ---------------------------------------------------------
   第一區 8 張 + 第二區 3 張共用

   原理：
   - 外層負責 Scroll 滑入
   - 裡面的 img 負責持續跳動
   → 不會互相搶 transform
========================================================= */

@media screen and (max-width: 767px) {

  /* =====================================================
     尚未滑入前
     先不要執行持續動畫
  ===================================================== */

  .meowPuzzleCard
  .meowPuzzlePieceImg {
    animation: none;
    transform-origin: center center;
  }


/* =========================================================
   手機｜Scroll 滑入完成後開始跳動
========================================================= */

@media screen and (max-width:767px) {

  .meowPuzzleCard.meowScrollIn
  .meowPuzzlePieceImg {

    animation:
      meowMobilePuzzleWiggle
      2.8s
      ease-in-out
      .65s
      infinite
      !important;

    transform-origin:
      center center;
  }

}


  /* =====================================================
     第一區 8 張｜每張方向稍微不同
  ===================================================== */

  /* 01 */
  .meowPuzzleCard--01 {
    --mobile-wiggle-x: -7px;
    --mobile-wiggle-y: -9px;
    --mobile-wiggle-rotate: -2deg;
  }


  /* 02 */
  .meowPuzzleCard--02 {
    --mobile-wiggle-x: 5px;
    --mobile-wiggle-y: -10px;
    --mobile-wiggle-rotate: 1.8deg;
  }


  /* 03 */
  .meowPuzzleCard--03 {
    --mobile-wiggle-x: -5px;
    --mobile-wiggle-y: -8px;
    --mobile-wiggle-rotate: -1.5deg;
  }


  /* 04 */
  .meowPuzzleCard--04 {
    --mobile-wiggle-x: 7px;
    --mobile-wiggle-y: -9px;
    --mobile-wiggle-rotate: 2deg;
  }


  /* 05 */
  .meowPuzzleCard--05 {
    --mobile-wiggle-x: -6px;
    --mobile-wiggle-y: -8px;
    --mobile-wiggle-rotate: -1.8deg;
  }


  /* 06 */
  .meowPuzzleCard--06 {
    --mobile-wiggle-x: 6px;
    --mobile-wiggle-y: -11px;
    --mobile-wiggle-rotate: 2deg;
  }


  /* 07 */
  .meowPuzzleCard--07 {
    --mobile-wiggle-x: -5px;
    --mobile-wiggle-y: -9px;
    --mobile-wiggle-rotate: -1.5deg;
  }


  /* 08 */
  .meowPuzzleCard--08 {
    --mobile-wiggle-x: 7px;
    --mobile-wiggle-y: -10px;
    --mobile-wiggle-rotate: 2deg;
  }


  /* =====================================================
     第二區 3 張
  ===================================================== */

  /* 左｜拼出入場憑證 */
  .meowPuzzleMissionCard--left {
    --mobile-wiggle-x: -7px;
    --mobile-wiggle-y: -9px;
    --mobile-wiggle-rotate: -2deg;
  }


  /* 中｜拼出逛展說明書 */
  .meowPuzzleMissionCard--middle {
    --mobile-wiggle-x: 3px;
    --mobile-wiggle-y: -11px;
    --mobile-wiggle-rotate: 1.5deg;
  }


  /* 右｜拼出購買力 */
  .meowPuzzleMissionCard--right {
    --mobile-wiggle-x: 7px;
    --mobile-wiggle-y: -9px;
    --mobile-wiggle-rotate: 2deg;
  }

}


/* =========================================================
   ★ 手機拼圖活潑跳動動畫
   ---------------------------------------------------------
   中間故意留一點停頓，
   不會一直抖個不停，比較自然。
========================================================= */

@keyframes meowMobilePuzzleWiggle {

  /* 平常 */
  0%,
  18%,
  100% {
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(1);
  }


  /* 第一次跳起來 */
  38% {
    transform:
      translate(
        var(--mobile-wiggle-x, 6px),
        var(--mobile-wiggle-y, -9px)
      )
      rotate(
        var(--mobile-wiggle-rotate, 2deg)
      )
      scale(1.035);
  }


  /* 小回彈 */
  57% {
    transform:
      translate(
        calc(var(--mobile-wiggle-x, 6px) * -.35),
        2px
      )
      rotate(
        calc(var(--mobile-wiggle-rotate, 2deg) * -.45)
      )
      scale(.995);
  }


  /* 再輕輕彈一次 */
  70% {
    transform:
      translate(
        calc(var(--mobile-wiggle-x, 6px) * .25),
        calc(var(--mobile-wiggle-y, -9px) * .45)
      )
      rotate(
        calc(var(--mobile-wiggle-rotate, 2deg) * .35)
      )
      scale(1.015);
  }


  /* 回原位 */
  84% {
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(1);
  }

}

/* =========================================================
   ★ 手機｜第二區 3 張滑入方向【最終覆蓋版】
   ---------------------------------------------------------
   1. 拼出入場憑證     left   ：左 → 右
   2. 拼出購買力       right  ：右 → 左
   3. 拼出逛展說明書   middle ：下 → 上

   ★ 必須放 CSS 最後面
========================================================= */

@media screen and (max-width:767px) {


  /* =====================================================
     手機排列順序
  ===================================================== */

  /* 1｜拼出入場憑證 */
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--left {
    order: 1;
  }


  /* 2｜拼出購買力 */
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--right {
    order: 2;
  }


  /* 3｜拼出逛展說明書 */
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--middle {
    order: 3;
  }



  /* =====================================================
     1｜拼出入場憑證
     左 → 右
  ===================================================== */

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--left:not(.meowScrollIn)
  .meowPuzzleMissionPiece {

    opacity: 0 !important;

    transform:
      translateX(-180px)
      scale(.92)
      !important;
  }


  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--left.meowScrollIn
  .meowPuzzleMissionPiece {

    opacity: 1 !important;

    transform:
      translateX(0)
      scale(1)
      !important;
  }



  /* =====================================================
     2｜拼出購買力
     右 → 左
     -----------------------------------------------------
     +180px = 一開始在右邊
  ===================================================== */

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--right:not(.meowScrollIn)
  .meowPuzzleMissionPiece {

    opacity: 0 !important;

    transform:
      translateX(180px)
      scale(.92)
      !important;
  }


  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--right.meowScrollIn
  .meowPuzzleMissionPiece {

    opacity: 1 !important;

    transform:
      translateX(0)
      scale(1)
      !important;
  }



  /* =====================================================
     3｜拼出逛展說明書
     下 → 上
     -----------------------------------------------------
     +220px = 一開始在下面
  ===================================================== */

  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--middle:not(.meowScrollIn)
  .meowPuzzleMissionPiece {

    opacity: 0 !important;

    transform:
      translateY(220px)
      scale(.92)
      !important;
  }


  .meowPuzzlePage.meowScrollFx
  #meowPuzzleMissionStage
  > .meowPuzzleMissionCard--middle.meowScrollIn
  .meowPuzzleMissionPiece {

    opacity: 1 !important;

    transform:
      translateY(0)
      scale(1)
      !important;
  }

}
/* =========================================================
   ★ 手機｜縮小第二區最下方空白【最新版】
   ---------------------------------------------------------
   這段請放整份 CSS 最後面
========================================================= */

@media screen and (max-width:767px) {

  /* =====================================================
     1. 第二區本身底部 padding
     -----------------------------------------------------
     原本是 70px
  ===================================================== */

  .meowPuzzleSection--mission {
    padding-bottom: 0;
  }


  /* =====================================================
     2. 整頁最後額外空白
     -----------------------------------------------------
     原本是 140px

     0px  = 幾乎沒有額外空白
     20px = 建議
     40px = 想留多一點
  ===================================================== */

  .meowPuzzleBottomSpace {
    height: 20px;
  }


  /* =====================================================
     3. 收掉第二區圖片位移後留下的假空白
     -----------------------------------------------------
     因為你的拼圖有用 top 負值往上移，
     原本占據的高度還留著。

     -80px  = 收一點
     -120px = 建議先試
     -160px = 收更多
  ===================================================== */

  #meowPuzzleMissionStage {
    margin-bottom: -120px;
  }

}


/* =========================================================
   ★ 背景｜左右隨機散落拼圖
========================================================= */

.meowPuzzleScatter {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  z-index: 1;
}


/* 每一顆散落拼圖 */
.meowPuzzleScatterPiece {
  position: absolute;

  display: block;

  width:
    var(--scatter-size, 100px);

  height: auto;

  opacity:
    var(--scatter-opacity, .25);

  transform:
    rotate(
      var(--scatter-rotate, 0deg)
    );

  transform-origin: center;

  pointer-events: none;

  animation:
    meowScatterFloat
    var(--scatter-speed, 7s)
    ease-in-out
    infinite;
}


/* 左側 */
.meowPuzzleScatterPiece--left {
  left:
    var(--scatter-edge, -20px);
}


/* 右側 */
.meowPuzzleScatterPiece--right {
  right:
    var(--scatter-edge, -20px);
}


/* =========================================================
   輕微漂浮
========================================================= */

@keyframes meowScatterFloat {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate:
      0
      var(--scatter-float, -10px);
  }

}


/* =========================================================
   手機
========================================================= */

@media screen and (max-width:767px) {

  .meowPuzzleScatterPiece {

    /*
       手機不要太大，
       不然兩側容易壓到活動圖。
    */
    max-width: 170px;
  }

}

/* =========================================================
   ★ 平板版｜768px ～ 1100px
   ---------------------------------------------------------
   保留桌機的 8 片拼圖排列
   但整體縮小、往中間收
   避免左右被切掉、活動名稱太擠

   ★ 請放整份 CSS 最下面
========================================================= */

@media screen and (min-width:768px) and (max-width:1100px) {


  /* =====================================================
     平板整體內容
  ===================================================== */

  .meowPuzzleContent {
    width: calc(100% - 24px);
    max-width: none;
  }


  /* 主標題稍微縮小 */
  .meowPuzzleHeroTitleImg {
    width: min(760px, 92%);
  }


  /* =====================================================
     ★ 第一區｜8 張拼圖
  ===================================================== */

  .meowPuzzlePage {

    /*
       第一區舞台
    */
    --stage-width: calc(100% - 8px);
    --stage-height: 620px;


    /* =================================================
       中間四片
    ================================================= */

    --core-piece-width: 285px;

    --core-left-x: 205px;
    --core-right-x: 42px;

    --core-top-y: 115px;
    --core-bottom-y: 275px;


    /* =================================================
       四角手＋拼圖
       原本桌機 530px → 平板縮成 360px
    ================================================= */

    --outer01-width: 360px;
    --outer04-width: 360px;
    --outer05-width: 360px;
    --outer08-width: 360px;


    /*
       平板不要再用桌機的 -130px
       否則一定被裁掉
    */

    --outer01-left: 25px;
    --outer01-top: 5px;

    --outer04-right: 5px;
    --outer04-top: 10px;

    --outer05-left: 50px;
    --outer05-bottom: -70px;

    --outer08-right: 0px;
    --outer08-bottom: -55px;


    /* 進場距離也縮短 */
    --outer-enter-x: 160px;
    --outer-enter-y: 110px;

  }


  /* =====================================================
     第一區名稱框｜平板縮小
  ===================================================== */

  #meowPuzzleStage .meowPuzzleLabel {
    min-width: 135px;
    max-width: 180px;

    padding:
      8px
      12px
      9px;

    border-radius: 15px;
  }


  #meowPuzzleStage .meowPuzzleName {
    font-size: 18px;
  }


  #meowPuzzleStage .meowPuzzleSub {
    font-size: 13px;
  }


  /* =====================================================
     第一區 8 個名稱位置｜平板
  ===================================================== */

  /* 01 喵藝廊 */
  .meowPuzzleCard--01
  .meowPuzzleLabel {
    top: 66%;
    left: 45px;
  }


  /* 02 貓貓拼圖計畫 */
  .meowPuzzleCard--02
  .meowPuzzleLabel {
    top: -4px;
    left: 45%;
  }


  /* 03 Cat Walk Gala */
  .meowPuzzleCard--03
  .meowPuzzleLabel {
    top: -4px;
    left: 50%;
  }


  /* 04 喵廣場 */
  .meowPuzzleCard--04
  .meowPuzzleLabel {
    top: 70%;
    right: 10px;
  }


  /* 05 育貓學堂 */
  .meowPuzzleCard--05
  .meowPuzzleLabel {
    top: 18%;
    left: 0px;
  }


  /* 06 鏟屎官大賽 */
  .meowPuzzleCard--06
  .meowPuzzleLabel {
    bottom: 28px;
  }


  /* 07 VIP */
  .meowPuzzleCard--07
  .meowPuzzleLabel {
    bottom: 28px;
  }


  /* 08 貓奴拼運所 */
  .meowPuzzleCard--08
  .meowPuzzleLabel {
    top: 20%;
    right: 40px;
  }



  /* =====================================================
     ★ 第二區｜3 張拼圖
     平板也一起縮
  ===================================================== */

  .meowPuzzlePage {

    --mission-stage-width: 100%;

    /* ===============================================
       三張大小
       768px 平板：約 322 / 307 / 307px
       1024px 平板：約 430 / 410 / 410px
       最大不超過原本桌機尺寸
    =============================================== */

    --mission-left-width:
      min(530px, 42vw);

    --mission-middle-width:
      min(510px, 40vw);

    --mission-right-width:
      min(510px, 40vw);


    /* ===============================================
       拼接程度
       平板越寬，重疊也跟著增加
    =============================================== */

    --mission-overlap:
      max(-125px, -12vw);


    /* 進場距離 */
    --mission-enter-x: 180px;
    --mission-enter-y: 150px;
  }


  /* =====================================================
     第二區活動名稱
     不要縮得太小
  ===================================================== */

  .meowPuzzleMissionCard
  .meowPuzzleName {
    font-size: 21px;
  }


  .meowPuzzleMissionCard
  .meowPuzzleLabel {
    min-width: 160px;
    padding: 10px 15px;
  }


  /* =====================================================
     第二區名稱位置
  ===================================================== */

  /* 左｜拼出入場憑證 */
  .meowPuzzleMissionCard--left
  .meowPuzzleLabel {
    margin: -25px auto 0;
    right: -100px;
  }


  /* 中｜拼出逛展說明書 */
  .meowPuzzleMissionCard--middle
  .meowPuzzleLabel {
    margin: -170px auto 0;
    left: 0;
  }


  /* 右｜拼出購買力 */
  .meowPuzzleMissionCard--right
  .meowPuzzleLabel {
    margin: -25px auto 0;
    left: -100px;
  }

}