body {
    margin: 0;
    background-color: #fff9a8a1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.store-world {
    position: relative;
    width: clamp(320px, 90vw, 620px);
    aspect-ratio: 2 / 3;
    /* min-width: 420px; */
    /* min-height: calc(460px * 1.5); */
    overflow: hidden;
    background-color: #fff9a8a1;
    background:#fff9ac7a;
}


/* 最底：完整彩色背景 */
#bg-color-final { 
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    z-index: 2;
    
    opacity: 0;                     /* 初始透明 → 看不到 */
    transition: opacity 4s ease-out;/* 淡入動畫 */
    
} 
 

/* 彩色背景 */
.bg-color {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    z-index: 3;
    opacity: 0;                /* 起始不顯示（重要！）*/
    transition: opacity 4s ease-out;
    
}

/* 遮罩 canvas */
#maskCanvas {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 1;
    pointer-events: none;
    
}


/* 素描背景（被遮罩）*/
.bg-sketch {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 10;
    
    opacity: 0.5;                     
    transition: opacity 1s ease-out;/* 淡入動畫 */
    
}

#bg-sketch-2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 11;
    
    opacity: 1;                     /* 初始透明 → 看不到 */
    transition: opacity 1s ease-out;/* 淡入動畫 */
    
}

/* 筆刷 */
.brush {
    position: absolute;
    width: 14%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 12;
    
}

/* 筆刷淡出 */
.brush.fade-out {
    transition: opacity 0.6s ease-out;
    opacity: 0 !important;
}


/* ===== 筆刷影子（存在感用，不是角色） ===== */
#brush-shadow {
  position: absolute;

  /* 初始大小，之後 JS 會動態改 */
  width: 40%;
  height: 18%;

  background: rgba(248, 112, 0, 0); /* 非常淡 */
  border-radius: 50%;
  filter: blur(3px);

  transform: translate(-50%, -50%);
  pointer-events: none;

  z-index: 9; /* 比筆刷低 */
  opacity: 1;
}

/* ✨ 影子淡出（比筆刷慢一點） */
#brush-shadow.fade-out {
  opacity: 0;
  transition: opacity 0.9s ease-out;
}


#door-hitbox {
  position: absolute;

  /* 跟門一樣的位置 */
  left: 82%;
  top: 65%;
  transform: translate(-50%, -50%);

  /* 可以比門稍微大一點（手感用） */
  width: 25%;
  height: 40%;

  background: rgba(255, 0, 0, 0); /* 完全透明 */
  z-index: 19;

  pointer-events: auto;
}

#door {
  position: absolute;

  /* 👇 用百分比對齊背景門的位置 */
  left: 83.5%;
  top: 66.5%;

  /* 👇 門的中心點校正（非常重要） */
  transform: translate(-50%, -50%);

  /* 👇 尺寸跟背景比例一致 */
  width: 50%;        /* 依你背景實際比例微調 */
  /* min-width: 230px; */
  height: auto;

  z-index: 18;

  pointer-events: none; /* 互動由 world 接 */
  opacity: 0;
  
}

.bg-in {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或 cover，看你原本背景規格 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 4;
}

.cake-bg{
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或 cover，看你原本背景規格 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 20;
}


#mute-btn {
  position: absolute;
  right: 1%;
  top: 1%;
  width: 5vw;
  max-width: 48px;
  min-width: 32px;
  cursor: pointer;
  z-index: 210;
  display: none; /* 一開始不出現 */
  opacity: 0.6;
  transition: transform 0.2s ease-out;
}

#mute-btn:hover {
  opacity: 1;
}
#mute-btn:active {
  transform: scale(0.8);
}

.menu-trigger {
  position: absolute;
  width: 20%;
  height: 9%;
  top: 58%;
  left: 12%;
  display: none;
  cursor: pointer;
  
  z-index: 50;
}
/* hover 提示 */
.menu-trigger::after {
  content: '柚孜菜單';
  position: absolute;

  /* 提示出現的位置（在 hitbox 中央偏上） */
  top: 30%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  font-size: clamp(1em, 2vw, 1.3em);
  color: #111;
  background: rgba(248, 248, 248, 0.575);
  padding: 4px 4px;
  border-radius: 8px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* hover 狀態 */
.menu-trigger:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 菜單區 */
.menu-layer {
  position: absolute;
  top: 55%;
  left: 52%;
  transform: translate(-50%, -50%);

  width: 60%;              /* 比背景小一半 ✔ */
  max-width: 420px;        /* 桌機上不會爆 */
  
  display: none;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 60;
  transition: opacity 0.4s ease;
}

.menu-layer.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.menu-frame {
  position: relative; /* 🔑 就是這一行 */
  width: 100%;
  aspect-ratio: 2 / 3;   /* ⚠️ 改成你的菜單實際比例 */
  overflow: visible;
}


.menu-close-btn {
  position: absolute;
  top: 90%;    /* 👈 上下現在可控 */
  right: 36%;   /* 👈 左右可控 */
  width: 30%;
  cursor: pointer;
  z-index: 120;
}




.menu-hit {
  position: absolute;
  pointer-events: none; /* 預設不能點 */
}

/* 點正面菜單 → 下一頁 */
.hit-next {
  top: 25%;
  left: 10%;
  width: 80%;
  height: 60%;
  z-index: 200;
  /* background-color: black; */
}

/* 點翻起來的紙 → 上一頁 */
.hit-prev {
  top: 5%;
  left: 10%;
  width: 80%;
  height: 18%;
  z-index: 200;
  /* background-color: red; */
  
}

.menu-backboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10; /* 最底 */
  pointer-events: none;
}

.menu-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;

  z-index: 20;
  opacity: 1;
  pointer-events: none;
}

.page-3 { transform: translateY(2%); }
.page-4 { transform: translateY(1%); }

/* 菜單頁（固定順序，不再動） */
.menu-page.page-1 { z-index: 190; }
.menu-page.page-2 { z-index: 180; }
.menu-page.page-3 { z-index: 170; }
.menu-page.page-4 { z-index: 160; }
.menu-page.page-5 { z-index: 150; }

 .menu-page {
  transition:
    clip-path 0s ease,
    opacity 0s ease,
    transform 0s ease;
}

/* 全顯示（預設） */
.menu-page.full {
  clip-path: inset(0% 0% 0% 0%);
}

/* 只顯示上半部 */
.menu-page.top-half {
  clip-path: inset(
    0% 0% 40% 0%
    /* ↑ 這個 50% 之後你可以調 */
  );
}

/* 只顯示下半部 */
.menu-page.bottom-half {
  clip-path: inset(
    50% 0% 0% 0%
    /* ↑ 這個 50% 之後你可以調 */
  );
}

.page-flip-mid {
  position: absolute;
  top: 25%;
  left: -12%;
  width: 118%;
  z-index: 200;
  display: none;
  pointer-events: none;
  
}

.page-flip-top {
  position: absolute;
  top: -8.8%;
  left: 0;
  width: 100%;
  z-index: 200;
  display: none;
  pointer-events: none;
}

.signboard-hitbox {
  position: absolute;
  top: 7%;
  left: 10%;
  width: 80%;
  height: 20%;
  cursor: pointer;
  /* background-color: black; */
  z-index: 100;
}
/* hover 提示 */
.signboard-hitbox::after {
  content: '柚孜 & yozi';
  position: absolute;

  /* 提示出現的位置（在 hitbox 中央偏上） */
  top: 30%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  font-size: clamp(1em, 2vw, 1.3em);
  color: #111;
  background: rgba(248, 248, 248, 0.575);
  padding: 4px 4px;
  border-radius: 8px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* hover 狀態 */
.signboard-hitbox:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.seat-hitbox {
  position: absolute;
  cursor: pointer;
  display: none;
  /* background-color: black; */
  z-index: 50;
}

/* 蛋糕典籍位置 */
#gotocake {
  position: absolute;
  cursor: pointer;
  display: none;
  z-index: 50;
  top: 40%;
  left: 60%;
  width: 35%;
  height: 10%;
  /* background-color: black; */
}

/* hover 提示 */
#gotocake::after {
  content: '這裡有蛋糕唷';
  position: absolute;

  /* 提示出現的位置（在 hitbox 中央偏上） */
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  font-size: clamp(0.8em, 2vw, 1em);
  color: #111;
  background: rgba(248, 248, 248, 0.575);
  padding: 4px 4px;
  border-radius: 8px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* hover 狀態 */
#gotocake:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 二個座位位置 */
.seat-b {
  top: 70%;
  left: 20%;
  width: 20%;
  height: 15%;
}

.seat-c {
  top: 60%;
  left: 80%;
  width: 17%;
  height: 25%;
  /* background-color: #111; */
}

#gobackstore {
  position: absolute;
  cursor: pointer;
  display: none;
  /* background-color: rgb(253, 0, 0); */
  z-index: 510;
  top: 10%;
  left: 0%;
  width: 20%;
  height: 20%;
}

/* hover 提示 */
#gobackstore::after {
  content: '返回吧台';
  position: absolute;

  /* 提示出現的位置（在 hitbox 中央偏上） */
  top: 30%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  font-size: clamp(1em, 2vw, 1.3em);
  color: #111;
  background: rgba(248, 248, 248, 0.575);
  padding: 4px 4px;
  border-radius: 8px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* hover 狀態 */
#gobackstore:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cake-item {
  position: absolute;
  display: none;        /* 只在蛋糕櫃時出現 */
  cursor: pointer;
  z-index: 230;         /* 高於 cake-bg */
}

/*蛋糕們 以下是示意位置，你照你的櫃子調 */
.cake-item[data-cake="0"] { top: 42%; left: 5%; width: 11%; height: 12%; background-color: #11111100;}


.cake-item[data-cake="1"] { top: 42%; left: 18%; width: 11%; height: 12%; background-color: #11111100;}


.cake-item[data-cake="2"] { top: 42%; left: 31%; width: 11%; height: 12%; background-color: #11111100;}


.cake-item[data-cake="3"] { top: 42%; left: 44%; width: 11%; height: 12%;  background-color: #11111100;}


.cake-item[data-cake="4"] { top: 42%; left: 57%; width: 11%; height: 12%; background-color: #11111100; }


.cake-item[data-cake="5"] { top: 42%; left: 70%; width: 11%; height: 12%; background-color: #11111100;}


.cake-item[data-cake="6"] { top: 42%; left: 83%; width: 11%; height: 12%; background-color: #11111100;}

/* 滑鼠提示文字 */
.cake-item::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: 110%;              /* 在蛋糕上方一點 */
  transform: translateX(-50%);

  padding: 4px 6px;
  font-size: clamp(0.6em, 1vw, 0.9em);
  color: #5a3a2e;             /* 咖啡色 */
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* hover 時顯示 */
.cake-item:hover::after {
  opacity: 1;
}







/* 蛋糕展示世界：預設隱藏，顯示時蓋在蛋糕櫃之上 */
#cakeDisplay{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none ;
  z-index: 500; /* 要高於 cake-bg(20) / cake-item(230) / gobackstore(220) */
}
#cakeDisplay{
  transition: opacity .4S ease-in-out;
}


/* 打開時（你也可以用 display block，我這裡提供 class 版） */
#cakeDisplay.is-on{
  opacity: 1;
  pointer-events: auto;
  
}

/* 返回按鈕：沿用菜單返回的概念（你換成你的圖） */
#cakeDisplayClose{
  position: absolute;
  top: 66%;
  left: 40%;
  width: 20%;
  height: 20%;
  max-width: 100px;
  max-height: 100px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 510;
}

/* 【假設】你想沿用菜單返回圖：把這裡換成你實際的返回圖路徑 */
#cakeDisplayClose{
  background-image: url("img/menu-close.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 每顆蛋糕展示容器：一次只會顯示一個 */
.cake-view{
  position: absolute;
  inset: 0;
  /* display: none; */
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* 當前被選中的蛋糕 */
.cake-view.is-on{
  opacity: 1;
  /* display: block; */
  pointer-events: auto;
}

/* 蛋糕每一張 frame 疊在一起 */
.cake-frame{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 70%;
  opacity: 0;
  pointer-events: none;
  
  /* transition: opacity .12s ease; */
}

/* 目前顯示中的那張 */
.cake-frame.is-on{
  opacity: 1;
}


/* 只有被關掉時才淡出 */
.cake-frame.fade-out {
  transition: opacity .12s ease;
}
.cake-frame {
  will-change: opacity;
}


/* 讓整個 overlay 可點（吃蛋糕） */
#cakeDisplay{
  cursor: pointer;
}

/* #cakeDisplayMount {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none; /* 預設不干擾 */
/* }   */


@keyframes idlePulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 120, 0);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 210, 105, 0.877);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 215, 120, 0);
  }
}
.interactive {
  animation: idlePulse 4s ease-in-out 1;
  border-radius: 8px; /* 讓光柔一點，不那麼方 */
  pointer-events: auto;
}
.eaten {
  animation: none;
}