/* 熊掌廚世界首頁 — v2 規格（world-stage 1920:1080 + 直接 bbox_pct） */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  background: #b8dce8;
}

.viewport {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* SEO／無障礙用的頁面主標題：內容與 <title> 一致，僅螢幕閱讀器與爬蟲取用 */
.seo-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Stage 外殼（背景 + 置中 world-stage）── */
.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background-color: #c5e8f0;
  background-image: url("img/bg/BG.jpg?v=202609021100");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stage--pc {
  display: flex;
}

.stage--mobile {
  display: none;
}

/* ── 世界座標系（島嶼定位基準）── */
.world-stage {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.world-stage--pc {
  aspect-ratio: 1920 / 1080;
  width: min(100vw, calc(100vh * 1920 / 1080));
  max-width: 100%;
  max-height: 100vh;
  height: auto;
}

.world-stage--mobile {
  aspect-ratio: 632 / 1125;
  width: min(100vw, calc(100dvh * 632 / 1125));
  max-width: 100%;
  max-height: 100dvh;
  height: auto;
}

@media (max-width: 767px) {
  .viewport {
    align-items: flex-start;
    justify-content: center;
  }

  .stage--pc {
    display: none;
  }

  .stage--mobile {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-height: none;
    height: 100dvh;
  }

  .world-stage--mobile {
    width: min(100vw, calc(100dvh * 632 / 1125));
    max-width: 100%;
    max-height: 100dvh;
    height: auto;
    aspect-ratio: 632 / 1125;
  }
}

/* ── 世界層：六座島（bbox 直接矩形，無 anchor transform）── */
.world-island {
  position: absolute;
  left: calc(var(--bx) * 1%);
  top: calc(var(--by) * 1%);
  width: calc(var(--bw) * 1%);
  height: calc(var(--bh) * 1%);
  pointer-events: none;
  opacity: 0;
  transform-origin: center bottom;
}

.world-island.is-entering {
  animation: island-enter 0.55s both;
}

@keyframes island-enter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.88);
  }

  70% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* PC v2.1 / v27 world bbox */
.world-stage--pc [data-island="IPworld_Hertz"] {
  --bx: 20;
  --by: 12.5;
  --bw: 11.5;
  --bh: 27;
  z-index: 10;
}

.world-stage--pc [data-island="IPworld_BW"] {
  --bx: 16.4;
  --by: 42.3;
  --bw: 15.95;
  --bh: 37.4;
  z-index: 20;
}

.world-stage--pc [data-island="IPworld_Main"] {
  --bx: 27;
  --by: 10.5;
  --bw: 40.5;
  --bh: 70.5;
  z-index: 5;
}

.world-stage--pc [data-island="IPworld_Street"] {
  --bx: 47;
  --by: 75.5;
  --bw: 16.5;
  --bh: 20.5;
  z-index: 28;
}

.world-stage--pc [data-island="IPworld_NPGY"] {
  --bx: 66;
  --by: 26;
  --bw: 16;
  --bh: 23.5;
  z-index: 15;
}

.world-stage--pc [data-island="IPworld_Card"] {
  --bx: 64.14;
  --by: 50.44;
  --bw: 15.23;
  --bh: 23.63;
  z-index: 17;
}

/*
 * Mobile world bbox：只改板塊位置／整體縮放，不改島嶼長寬比。
 * 排列對齊示意圖：Hertz 左上、Main 偏右大島；其下兩欄 BW/Card、NPGY/Street。
 * bh = (bw * 632) / (pcPixelAspect * 1125)
 * pcPixelAspect = (bw_pc * 1920) / (bh_pc * 1080)
 */
.world-stage--mobile [data-island="IPworld_Hertz"] {
  --bx: 2.7;
  --by: 7.5;
  --bw: 22;
  --bh: 16.32;
  z-index: 10;
}

.world-stage--mobile [data-island="IPworld_Main"] {
  --bx: 8.49;
  --by: 9.51;
  --bw: 83.03;
  --bh: 45.67;
  z-index: 5;
}

.world-stage--mobile [data-island="IPworld_BW"] {
  --bx: 3.97;
  --by: 39.63;
  --bw: 43.05;
  --bh: 31.9;
  z-index: 20;
}

.world-stage--mobile [data-island="IPworld_Card"] {
  --bx: 51.36;
  --by: 51.13;
  --bw: 35.29;
  --bh: 17.29;
  z-index: 17;
}

.world-stage--mobile [data-island="IPworld_NPGY"] {
  --bx: 14.57;
  --by: 72.92;
  --bw: 33.86;
  --bh: 15.71;
  z-index: 22;
}

.world-stage--mobile [data-island="IPworld_Street"] {
  --bx: 49.36;
  --by: 77.71;
  --bw: 35.28;
  --bh: 13.85;
  z-index: 28;
}

/* 島內物件（PC / Mobile 共用 localPct） */
[data-island="IPworld_Main"] [data-object="rocket"] {
  --lx: 32.32;
  --ly: -5.63;
  --lw: 14.56;
  --lh: 30.55;
  --rocket-lift-peak: -72%;
  z-index: 9;
  animation: rocket-fly-over-donut 7s infinite;
}

[data-island="IPworld_Main"] [data-object="donut"] {
  --lx: 55.3;
  --ly: -18.9;
  --lw: 22;
  --lh: 38;
}

[data-island="IPworld_Main"] [data-object="baseball-alpaca"] {
  --lx: 60.9;
  --ly: 22.1;
  --lw: 10.8;
  --lh: 19.2;
  z-index: 4;
}

[data-island="IPworld_Main"] [data-object="party-hippo-left"] {
  display: none;
}

[data-island="IPworld_Main"] [data-object="restaurant-hotspot"] {
  --lx: 26;
  --ly: 30;
  --lw: 13;
  --lh: 28;
}

[data-island="IPworld_Main"] [data-object="store-hotspot"] {
  --lx: 38;
  --ly: 32;
  --lw: 14;
  --lh: 24;
}

[data-island="IPworld_Main"] [data-object="foodtruck"] {
  --lx: 14.2;
  --ly: 36.8;
  --lw: 32.5;
  --lh: 68.5;
  z-index: 7;
}

[data-island="IPworld_Main"] [data-object="zombie"] {
  --lx: 17.89;
  --ly: 3.46;
  --lw: 76.23;
  --lh: 127.05;
  z-index: 6;
}

[data-island="IPworld_Main"] [data-object="customer-dog"] {
  --lx: 49.7;
  --ly: 63.5;
  --lw: 13.2;
  --lh: 26.4;
  z-index: 5;
}

[data-island="IPworld_Main"] [data-object="customer-hippo"] {
  --lx: 66;
  --ly: 63.5;
  --lw: 13.2;
  --lh: 26.4;
  z-index: 5;
}

@keyframes rocket-fly-over-donut {
  0% {
    transform: translate(-50%, -100%) translateY(0);
    animation-timing-function: ease-out;
  }

  18% {
    transform: translate(-50%, -100%) translateY(var(--rocket-lift-peak, -72%));
    animation-timing-function: linear;
  }

  32% {
    transform: translate(-50%, -100%) translateY(var(--rocket-lift-peak, -72%));
    animation-timing-function: ease-out;
  }

  100% {
    transform: translate(-50%, -100%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-island {
    animation: none;
    transform: none;
  }

  .world-island.is-entering {
    opacity: 1;
  }

  .world-island.is-entering .island-local {
    animation: none;
    pointer-events: auto;
  }

  [data-island="IPworld_Main"] [data-object="rocket"],
  [data-island="IPworld_Card"] [data-object="card-deco"],
  [data-island="IPworld_Hertz"] .island-fill,
  [data-island="IPworld_Hertz"] [data-object="hertz-deco"],
  [data-island="IPworld_Street"] [data-object="god-of-wealth"],
  .popup-overlay:not([hidden]),
  .popup-overlay.is-leaving,
  .popup-envelope.is-entering,
  .popup-envelope.is-leaving,
  .popup-cta.is-popping,
  .popup-official.is-popping,
  .speech-bubble-inner {
    animation: none;
  }
}

[data-island="IPworld_Hertz"] .island-fill {
  z-index: 1;
  transform: scale(0.85);
  transform-origin: center center;
  animation: hertz-island-float 5s ease-in-out infinite;
}

@keyframes hertz-island-float {
  0%,
  100% {
    transform: scale(0.85) translateY(0);
  }

  50% {
    transform: scale(0.85) translateY(-4%);
  }
}

[data-island="IPworld_Hertz"] [data-object="hertz-deco"] {
  --lx: 1.38;
  --ly: -46;
  --lw: 97.5;
  --lh: 123.5;
  z-index: 0;
  animation: hertz-deco-pulse 6s ease-in-out infinite;
}

@keyframes hertz-deco-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

[data-island="IPworld_NPGY"] [data-object="nurse"] {
  --lx: 48.4;
  --ly: 15.2;
  --lw: 36.6;
  --lh: 99.6;
  z-index: 2;
}

[data-island="IPworld_Card"] .island-fill {
  z-index: 1;
}

[data-island="IPworld_Card"] [data-object="suit-cat"] {
  --lx: 15.82;
  --ly: 30.62;
  --lw: 34.56;
  --lh: 63.36;
  z-index: 2;
}

[data-island="IPworld_Card"] [data-object="card-deco"] {
  --lx: -37.42;
  --ly: 74;
  --lw: 160;
  --lh: 66.5;
  z-index: 0;
  animation: card-deco-float 5s ease-in-out infinite;
}

@keyframes card-deco-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-6%);
  }
}

[data-island="IPworld_BW"] [data-object="bw-chef-1"] {
  --lx: 22.9;
  --ly: 31.8;
  --lw: 28.4;
  --lh: 66.4;
  z-index: 2;
}

[data-island="IPworld_BW"] [data-object="bw-chef-2"] {
  --lx: 49.9;
  --ly: 31.8;
  --lw: 30.8;
  --lh: 66.4;
  z-index: 2;
}

[data-island="IPworld_Street"] [data-object="god-of-wealth"] {
  --lx: 44.3;
  --ly: 41.5;
  --lw: 33.5;
  --lh: 49.5;
  --god-walk-peak: 59.7%;
  z-index: 2;
  transform-origin: center bottom;
  animation: god-of-wealth-walk 6s linear infinite;
}

/* 財神：左右各 ±20% 來回走動，到邊界翻轉朝向 */
@keyframes god-of-wealth-walk {
  0% {
    transform: translate(-50%, -100%) translateX(calc(-1 * var(--god-walk-peak, 59.7%))) scaleX(1);
  }

  49% {
    transform: translate(-50%, -100%) translateX(var(--god-walk-peak, 59.7%)) scaleX(1);
  }

  50% {
    transform: translate(-50%, -100%) translateX(var(--god-walk-peak, 59.7%)) scaleX(-1);
  }

  99% {
    transform: translate(-50%, -100%) translateX(calc(-1 * var(--god-walk-peak, 59.7%))) scaleX(-1);
  }

  100% {
    transform: translate(-50%, -100%) translateX(calc(-1 * var(--god-walk-peak, 59.7%))) scaleX(1);
  }
}

.island-local {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.world-island.is-entering .island-local {
  animation: island-unlock-hit 1ms 550ms forwards;
}

@keyframes island-unlock-hit {
  to {
    pointer-events: auto;
  }
}

/* 島嶼主圖填滿 world bbox 容器 */
.island-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.island-fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

/* ── 島內疊加物件（v2 localObjectSpecs，PC/Mobile 共用）── */
.local-obj {
  position: absolute;
  line-height: 0;
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.local-obj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.local-obj--bottom-center {
  left: calc((var(--lx) + var(--lw) / 2) * 1%);
  top: calc((var(--ly) + var(--lh)) * 1%);
  width: calc(var(--lw) * 1%);
  height: calc(var(--lh) * 1%);
  transform: translate(-50%, -100%);
}

.local-obj--center {
  left: calc((var(--lx) + var(--lw) / 2) * 1%);
  top: calc((var(--ly) + var(--lh) / 2) * 1%);
  width: calc(var(--lw) * 1%);
  height: calc(var(--lh) * 1%);
  transform: translate(-50%, -50%);
}

.local-obj--flip.local-obj--bottom-center {
  transform: translate(-50%, -100%) scaleX(-1);
}

.local-obj--flip.local-obj--center {
  transform: translate(-50%, -50%) scaleX(-1);
}

.local-obj[data-module],
.local-obj.hotspot {
  cursor: pointer;
}

.local-obj:focus-visible,
.hotspot:focus-visible {
  outline: 2px solid #ff6b9d;
  outline-offset: 2px;
}

.hotspot {
  overflow: visible;
}

/* ── Logo（世界層）── */
.world-obj {
  position: absolute;
  line-height: 0;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.world-obj img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

a.obj-logo {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.world-stage--pc .obj-logo {
  left: 91.8%;
  top: 7.4%;
  width: 7.81%;
  aspect-ratio: 211 / 176;
}

.world-stage--mobile .obj-logo {
  left: 89.79%;
  top: 5.07%;
  width: 15.03%;
  aspect-ratio: 211 / 176;
}

/*
 * 語言地球：獨立 overlay，對齊 Logo 同一錨點與尺寸，但不進入 Logo 排版流。
 * 不可放進 .obj-logo：.translate(-50%,-50%) 會因盒子變高把 Logo 往上擠；
 * lang-switcher 注入的 position:relative 也會蓋掉子層 absolute，造成地球離 Logo 過遠。
 */
.world-stage--pc .obj-lang-slot {
  left: 91.8%;
  top: 7.4%;
  width: 7.81%;
  aspect-ratio: 211 / 176;
  z-index: 51;
  pointer-events: none;
  line-height: normal;
}

.world-stage--mobile .obj-lang-slot {
  left: 89.79%;
  top: 5.07%;
  width: 15.03%;
  aspect-ratio: 211 / 176;
  z-index: 51;
  pointer-events: none;
  line-height: normal;
}

.obj-lang-slot .lang-globe-host,
.obj-lang-slot .lang-globe-host.lang-switcher,
.obj-lang-slot .lang-globe-host.lang-switcher--logo {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 36px;
  height: 36px;
  margin-top: 10px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: auto;
}

/* ── 彈窗 ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 40, 60, 0.55);
}

.popup-overlay:not([hidden]) {
  animation: postcard-mask-fade 0.2s ease-out both;
}

.popup-overlay[hidden] {
  display: none;
}

.popup-envelope {
  position: relative;
  width: min(92vw, 946px);
  max-width: 946px;
  transform: rotate(5deg);
  transform-origin: center center;
}

.popup-envelope.is-entering {
  animation: postcard-slide-out 0.5s ease-out both;
}

.popup-overlay.is-leaving {
  animation: postcard-mask-fade-out 0.45s ease-in both;
  pointer-events: none;
}

.popup-envelope.is-leaving {
  animation: postcard-slide-in 0.45s ease-in both;
}

@keyframes postcard-mask-fade {
  from {
    background: rgba(20, 40, 60, 0);
  }

  to {
    background: rgba(20, 40, 60, 0.55);
  }
}

@keyframes postcard-mask-fade-out {
  from {
    background: rgba(20, 40, 60, 0.55);
  }

  to {
    background: rgba(20, 40, 60, 0);
  }
}

@keyframes postcard-slide-out {
  0% {
    transform: translateY(32px) rotate(-4deg) scale(0.92);
    opacity: 0;
  }

  100% {
    transform: translateY(0) rotate(5deg) scale(1);
    opacity: 1;
  }
}

@keyframes postcard-slide-in {
  0% {
    transform: translateY(0) rotate(5deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(32px) rotate(-4deg) scale(0.92);
    opacity: 0;
  }
}

.popup-frame {
  width: 100%;
  height: auto;
  display: block;
}

.popup-content {
  position: absolute;
  inset: 12% 10% 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 8px;
  min-height: 0;
  overflow: hidden;
}

.popup-title {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  color: #5a3e2b;
  line-height: 1.3;
  flex-shrink: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.popup-desc {
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  color: #6b4f3a;
  line-height: 1.7;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex-shrink: 0;
}

.popup-close {
  position: absolute;
  top: 4%;
  right: 4%;
  width: clamp(36px, 8vw, 49px);
  height: clamp(36px, 8vw, 49px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.popup-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.popup-cta {
  position: relative;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  width: min(42%, 148px);
  flex-shrink: 0;
}

.popup-cta.is-waiting,
.popup-official.is-waiting {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.45);
  pointer-events: none;
}

.popup-cta.is-popping {
  visibility: visible;
  animation: postcard-cta-pop 0.45s cubic-bezier(0.22, 1.35, 0.36, 1) both;
}

.popup-official.is-popping {
  visibility: visible;
  animation: postcard-cta-fade 0.35s ease-out both;
}

@keyframes postcard-cta-pop {
  0% {
    visibility: visible;
    opacity: 0;
    transform: scale(0.4);
  }

  62% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes postcard-cta-fade {
  0% {
    visibility: visible;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .popup-cta {
    width: min(70%, 279px);
  }
}

.popup-cta img {
  width: 100%;
  height: auto;
  display: block;
}

.popup-cta-text {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.08rem, 3.3vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  white-space: normal;
  line-height: 1.05;
  text-align: center;
}

.popup-official {
  margin-top: 2px;
  font-size: clamp(0.62rem, 2.1vw, 0.78rem);
  line-height: 1.35;
  color: #6b4f3a;
  text-decoration: underline;
  flex-shrink: 0;
  max-width: 94%;
}

.popup-official[hidden] {
  display: none !important;
}

/* 角色頭上漫畫框：米色紙感 + 深棕描邊，與明信片彈窗同色系但不共用信封圖 */
.local-obj.is-speaking {
  z-index: 40;
}

.speech-bubble {
  position: absolute;
  left: 50%;
  /* 預設在外框頂再加 20px；實際位置由 JS 依 GIF 可見頭頂覆寫 */
  bottom: calc(100% + 20px);
  transform: translateX(-50%);
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(90, 50, 30, 0.22));
}

/* 角色本身 scaleX(-1) 時，把框再鏡一次，避免中文反白 */
.local-obj--flip .speech-bubble {
  transform: translateX(-50%) scaleX(-1);
}

.speech-bubble-inner {
  position: relative;
  display: block;
  width: max-content;
  min-width: 4.6em;
  max-width: 10em;
  padding: 0.38em 0.55em 0.42em;
  background: #f7ecd4;
  color: #5a3e2b;
  border: 3px solid #7a4a32;
  border-radius: 14px;
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  transform-origin: center bottom;
}

.speech-bubble.is-in .speech-bubble-inner {
  animation: speech-pop 0.24s ease-out both;
}

.speech-bubble-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #f7ecd4;
  border-right: 3px solid #7a4a32;
  border-bottom: 3px solid #7a4a32;
  transform: rotate(45deg);
}

.speech-bubble-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 1.35em;
}

@keyframes speech-pop {
  from {
    opacity: 0;
    transform: scale(0.42);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.privacy-link {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: #1a4d38;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.privacy-link:hover,
.privacy-link:focus-visible {
  color: #fff;
  background: #0f3326;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}