/* 1️⃣ 在 CSS 最上方先載入 Web Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');


#loadingScreen {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}

/* ===== Screen 管理（結構層）===== */
.screen {
  position: absolute;
  inset: 0;
}

.hidden {
  display: none;
}


.loading-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-sakura {
  width: 120px;
  animation: spin 3.5s linear infinite;
  z-index: 2;
}

#loadingText {
  margin-top: 20px;
  color: white;
  font-size: 20px;
  letter-spacing: 2px;
  z-index: 2;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 導覽頁 */
#introScreen {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;   /* 與設計稿寬一致 */
  height: 1920px;  /* 與設計稿高一致 */
  transform: translate(-50%, -50%);
  z-index: 1000;   /* 高於 Loading 畫面和舞台底圖 */
  opacity: 1;      /* 初始完全可見 */
  transition: opacity 1s ease; /* 淡出效果 */
}

.intro-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#introText {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: rgb(78, 51, 55);
  font-size: 40.3px;
  line-height: 2;
  width: 100%; 
  max-width: 800px;
}

#introText div {
  opacity: 0;
  transform: translateY(20px);
}


@keyframes fadeUpLine {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


#menuScreen {
  position: absolute;
  inset: 0;
}


.menu-background {
  position: absolute;
  inset: 0;              /* 全螢幕 */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 白天背景 */
.menu-background.day {
  background-image: url("images/menu-bg.jpg");
}

/* 夜晚背景 */
.menu-background.night {
  background-image: url("images/menu-bg-night.jpg");
}

/* menu 按鈕呼吸動畫 */
@keyframes menuPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* 最大放大 3% */
  }
  100% {
    transform: scale(1);
  }
}

#menuScreen {
  opacity: 1;            /* 一開始就顯示 */
}

.menu-content {
  opacity: 0;                  /* 初始完全透明 */
  transform: translateY(20px); /* 往上 20px，製造浮動感 */
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.menu-content.show {
  opacity: 1;                  /* 完全可見 */
  transform: translateY(0);    /* 回到原本位置 */
}


.menu-content {
  position: relative;     /* 讓 z-index 有效 */
  z-index: 2;             /* 高於背景 */
  width: 100%;
  height: 100%;           /* 填滿整個 menuScreen */
  display: flex;          /* 啟用 Flex */
  flex-direction: column; /* 上下排列 header + buttons */
  align-items: center;    /* 水平置中 */
  justify-content: center; /* 垂直置中 */
  padding-top: 40px;      /* ← 加這行讓整組往下 */
}


.menu-buttons {
  display: flex;          /* 讓按鈕水平排列 */
  flex-direction: column; /* 改成垂直排列 */
  align-items: center;    /* 水平置中 */
  gap: 20px;              /* 按鈕間距 */
    /* 三顆按鈕時，整組稍微往上，避免壓到下方 LOGO */
  transform: translateY(-110px);
}


.menu-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 600px;           /* 按鈕寬度 */
  height: auto;
  animation: menuPulse 2s ease-in-out infinite; /* ← 呼吸動畫 */
}

.menu-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.menu-btn-mission {
  width: 638px; /* 這裡單獨調 Mission 按鈕大小 */
  margin-top: -45px;
}

/* ===== Menu LOGO ===== */
#menuLogo {
  position: absolute;
  left: 50%;
  bottom: 75px;   /* 比歡迎文字高一點（120 + 約 90）可微調 */

  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;

  opacity: 0;
  transition: opacity 1.5s ease;
}

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

#menuLogo img {
  width: 800px;   /* LOGO 大小可調 */
  height: auto;
  display: block;
}

#menuScreen:not(.hidden) #menuLogo {
  opacity: 1;
}

#menuLogo {
  animation: welcomeFloat 4s ease-in-out infinite;
}

body:not(.night-mode) #menuScreen:not(.hidden) #menuLogo img {
  filter:
    drop-shadow(0 0 35px rgb(255, 240, 240))
    drop-shadow(0 0 10px rgba(255, 137, 202, 0.808))
    drop-shadow(0 0 10px rgba(255, 231, 151, 0.973));
}

body.night-mode #menuScreen:not(.hidden) #menuLogo img {
  filter:
    drop-shadow(0 0 10px rgba(255,230,200,0.6))
    drop-shadow(0 0 15px rgba(255, 228, 140, 0.644))
    drop-shadow(0 0 30px rgba(255, 168, 146, 0.76));
}



#transitionDoors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5000;
}

.door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  object-fit: cover; /* 或 contain，看你門圖想怎麼塞滿 */
}

.door.left  { left: 0;  transform: translateX(-100%); }
.door.right { right: 0; transform: translateX(100%); }

.door.show.left  { animation: doorLeftIn 0.5s forwards; }
.door.show.right { animation: doorRightIn 0.5s forwards; }
.door.hide.left  { animation: doorLeftOut 0.7s forwards; }
.door.hide.right { animation: doorRightOut 0.7s forwards; }

/* ✅ 門完全闔上後固定在中間，不會因為移除 show 而跳回畫面外 */
.door.closed.left  { transform: translateX(0); }
.door.closed.right { transform: translateX(0); }

@keyframes doorLeftIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes doorRightIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes doorLeftOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes doorRightOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}




html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
}

/* ✅ viewport：負責置中，黑邊自然出現 */
#viewport {
  position: fixed;
  inset: 0;
  background: black;
  overflow: hidden; /* 保證超出只會被裁掉，黑邊自然留下 */
}


/* ✅ gameRoot：固定設計稿大小，只做 scale，不做 translate 置中 */
#gameRoot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;

  /* ⚠️ 置中 + 縮放由同一個 transform 完成 */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;

  background: black;
  overflow: hidden;
}


/* screen 都填滿舞台 */
.screen {
  position: absolute;
  inset: 0;
}

.hidden { display: none; }

#sakura {
  position: absolute;
  inset: 0;
  width: 1080px;
  height: 1920px;
  pointer-events: none;
  z-index: 1200;
}





/* 包裝層控制飛走動畫，初始隱藏 */
#blessingWrapper {
  position: absolute;
  left: 86%;
  bottom: 220px;
  transform: translateX(-50%) translateY(0);
  z-index: 1300;
  opacity: 0; /* 初始隱藏 */
  pointer-events: none;
}

/* 卡片浮動 + 光暈 */
#blessingCard {
  width: 800px;
}

/* 飛走動畫套在 wrapper 上 */
@keyframes cardFlyAway {
  0% {
    transform: translateX(-100%) translateY(0) scale(1);
    opacity: 1;
  }
  60% {
    transform: translateX(-100%) translateY(-600px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(-1000px) scale(0.9);
    opacity: 0;
  }
}

.card-hide {
  animation: cardFlyAway 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 浮動 + 光暈動畫 */
@keyframes cardFloat {
  0%   { transform: translateX(-50%) translateY(0px); }
  50%  { transform: translateX(-50%) translateY(-18px); }
  100% { transform: translateX(-50%) translateY(0px); }
}

@keyframes cardGlow {
  0%   { filter: drop-shadow(0 0 8px rgba(255,180,200,0.4)); }
  50%  { filter: drop-shadow(0 0 22px rgba(255,200,220,0.9)); }
  100% { filter: drop-shadow(0 0 8px rgba(255,180,200,0.4)); }
}

/* 動畫啟用 class */
.card-animate {
  animation: cardFloat 3.5s ease-in-out infinite, cardGlow 2.8s ease-in-out infinite;
}


/* 御守製作背景 */
#omamoriScreen .omamori-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 1080×1920 對上舞台會剛好，不會變形 */
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ====== Omamori 排版骨架 ====== */

/* omamoriScreen 背景你已有：#omamoriScreen .omamori-bg {...} */

/* 所有御守物件的容器（跟舞台同大小） */
#omamoriStage {
  position: absolute;
  inset: 0;
}

/*
  ✅ 只要調這裡，就能讓「整個御守+按鈕+完成」上下移動
  - 往上：數字變小（例如 320）
  - 往下：數字變大（例如 420）
*/
:root {
  --omamori-y: 200px;
}

/* 共用：御守三個部件 */
.omamori-part {
  position: absolute;
  width: 600px;
  left: 240px;         /* 540(舞台中心) - 300 = 240 */
  display: block;
  pointer-events: none;
}

/* 上半部 / 下半部貼合 */
.omamori-part.top {
  top: var(--omamori-y);
  height: 453px;
  z-index: 10;
}

.omamori-part.bottom {
  top: calc(var(--omamori-y) + 453px);
  height: 342px;
  z-index: 10;
}

/* 蝴蝶結：蓋在上層、偏中上 */
.omamori-part.knot {
  top: calc(var(--omamori-y) + 10px);
  height: 197px;
  z-index: 20;
}

/* 左右按鈕（200x90） */
.omamori-arrow {
  position: absolute;
  width: 200px;
  height: 90px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 30;
}

.omamori-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* X 位置：御守左右各留 40px */
.omamori-arrow.left  { left: 30px; }
.omamori-arrow.right { left: 850px; } 

/*
  三排按鈕 Y 位置：對齊各部件的視覺中心

*/
.omamori-arrow.row-knot {
  top: calc(var(--omamori-y) + 60px);
}

.omamori-arrow.row-top {
  top: calc(var(--omamori-y) + 330px);
}

.omamori-arrow.row-bottom {
  top: calc(var(--omamori-y) + 590px);
}

/* 完成按鈕（600x295）：御守下方留一段距離 */
.omamori-finish {
  position: absolute;
  width: 600px;
  height: 295px;
  left: 265px;
  top: calc(var(--omamori-y) + 760px + 70px); 
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 30;
}

.omamori-finish img {
  width: 90%;
  height: 90%;
  display: block;
}

/* 觸控按壓回饋 */
.omamori-arrow:active,
.omamori-finish:active {
  transform: scale(0.96);
}

/* ===== 御守部件切換：微彈跳提示（不影響定位）===== */

#omamoriPreview .omamori-part-wrap {
  position: absolute;
  inset: 0;              /* 讓 wrapper 覆蓋舞台，不參與排版 */
  pointer-events: none;  /* 不擋按鈕 */
  z-index: 0;            /* 真正層級由 img 自己的 z-index 控制 */
}

/* 套在 wrapper 上，避免跟 img 的定位 transform 打架 */
#omamoriPreview .omamori-part-wrap.pop {
  animation: omamoriPartPop 220ms ease-out;
}

@keyframes omamoriPartPop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.03); }
  70%  { transform: translateY(0) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}


/* ====== Omamori 按鈕動態 ====== */

/* 1) 左右按鈕：微微平移（動畫套在 img，避免跟 :active 的 transform 打架） */
@keyframes arrowDriftLeft {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-10px); } /* 幅度可調：-6 ~ -14 */
}

@keyframes arrowDriftRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(10px); }  /* 幅度可調：6 ~ 14 */
}

/* 左按鈕 img：向左漂 */
.omamori-arrow.left img {
  animation: arrowDriftLeft 1.6s ease-in-out infinite;
}

/* 右按鈕 img：向右漂 */
.omamori-arrow.right img {
  animation: arrowDriftRight 1.6s ease-in-out infinite;
}

/* 2) 完成按鈕：原地呼吸（同樣套在 img） */
@keyframes finishBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); } /* 幅度可調：1.02 ~ 1.06 */
}

.omamori-finish img {
  /* 你原本是 90% 90%，保留，再加動畫 */
  animation: finishBreathe 1.8s ease-in-out infinite;
  transform-origin: center center;
}

/* =========================
   右上角：返回 Menu 按鈕（共用）
========================= */
.ui-btn-menu-topright {
  position: absolute;
  top: 14px;    /* 你想更貼邊可改 24px */
  right: 20px;
  width: 140px; /* 你也可以改 120/160 */
  height: 138px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
   opacity: 100%;

  z-index: 4999; /* 壓過角色/背景/御守，不壓 modal（modal 你是 20000） */
}

.ui-btn-menu-topright img{
  width: 100%;
  height: 100%;
  display: block;
}

.ui-btn-menu-topright:active{
  transform: scale(0.96);
}

/* =========================
   ✅ Omamori Glow Layer（效能版）
   - 取代 filter: drop-shadow 動畫
   - 只動 opacity（手機超順）
========================= */

/* 讓 #omamoriPreview 成為定位容器（你本來就有 position:absolute; inset:0; 這裡只補保險） */
#omamoriPreview{
  position: absolute;
  inset: 0;
}

/* Glow 層：跟御守同一套定位（用跟部件一樣的寬與 left/top） */
#omamoriGlowLayer{
  position: absolute;

  /* ✅ 對齊御守本體的位置（跟 .omamori-part 一樣） */
  left: 135px;
  top: 100px;
  width: 800px;
  height: 995px; /* 453 + 342 */

  pointer-events: none;

  /* 放在本體下面（比 top/bottom/knot 低），這樣像「從裡面透出來」 */
  z-index: 0; /* 低於 top/bottom(10) & knot(20)，高於背景 */

  opacity: 0;

  /* ✅ 這兩個很重要：逼瀏覽器走合成層，減少卡頓 */
  transform: translateZ(0);
  will-change: opacity;
}

/* ✅ 聚焦時才打開 Glow（只做 opacity 呼吸） */
#omamoriScreen.focus #omamoriGlowLayer{
  opacity: 1;
  animation: omamoriGlowBreath 2.4s ease-in-out infinite;
}

/* 只動 opacity，不動 filter（效能很好） */
@keyframes omamoriGlowBreath{
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.00; }
}

#omamoriGlowLayer{
  background: url("images/omamori-glow.png") center/contain no-repeat;
}


/* ✅ 御守 focus（完成聚焦）時，右上角那顆先隱藏，避免跟你三顆 focus actions 重複 */
#omamoriScreen.focus #btnOmamoriMenu {
  display: none;
}





/* ====== Omamori 完成聚焦模式（暗幕 + 御守突出） ====== */

#omamoriScreen {
  position: absolute; /* 保險：明確讓它是定位元素 */
  inset: 0;
  z-index: 1301;
}


/* ✅ 外層 wrapper：只負責完成瞬間彈跳（不干涉內層漂浮） */
#omamoriPreviewWrap {
  position: absolute;
  inset: 0;
  z-index: 20;
  transform-origin: center center;
}

/* ✅ focus 時，把御守整包抬到黑幕上面 */
#omamoriScreen.focus #omamoriPreviewWrap {
  z-index: 60; /* > 40 (黑幕) */
}


/* 完成瞬間彈跳一次（外層） */
@keyframes omamoriFinishPop {
  0%   { transform: translateY(0) scale(1.00); }
  35%  { transform: translateY(-10px) scale(1.05); }
  65%  { transform: translateY(2px)  scale(1.02); }
  100% { transform: translateY(0)    scale(1.00); }
}

/* 觸發 class */
#omamoriScreen.focus .omamori-finish-pop {
  animation: omamoriFinishPop 380ms ease-out both;
}


/* 御守預覽 wrapper：平常不做事，只給完成時 transform 用 */
#omamoriPreview {
  position: absolute;
  inset: 0;
  z-index: 20;            /* 平常跟部件差不多層 */
  transform-origin: center center;
 transition: transform 280ms ease;
}

/* 暗幕：只暗「御守畫面內的東西」，不會影響整個網站其他 screen */
#omamoriScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.80); /* 你想更暗可改 0.55 */
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 40; /* 介於背景與御守之間/之上，用來壓暗按鈕與背景 */
}

/* 聚焦狀態 class：我們等一下用 JS 加在 #omamoriScreen 上 */
#omamoriScreen.focus::before {
  opacity: 1;
}

#omamoriScreen.focus #omamoriPreview {
  z-index: 60;

  /* ✅ 只留位移/縮放動畫（GPU 合成層），不要再動畫 filter */
  animation: omamoriFloat 2.2s ease-in-out infinite;

  will-change: transform;
  transform: translateZ(0);
}



/* 聚焦時：把左右鍵與完成鍵「淡出 + 不能點」讓視覺更乾淨 */
#omamoriScreen.focus .omamori-arrow,
#omamoriScreen.focus .omamori-finish {
  opacity: 0;          /* 你想完全消失就改 0 */
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* 可選：聚焦時把飄落櫻花稍微變淡（不是必須）
   注意：#sakura 在整個舞台上層，若你覺得它干擾，就打開這段
*/
/*
#omamoriScreen.focus ~ #sakura,
#omamoriScreen.focus #sakura {
  opacity: 0.35;
}
*/

/* ====== 完成後：御守漂浮 + 發光起伏 ====== */

@keyframes omamoriFloat {
  0%, 100% { transform: translateY(0) scale(1.06); }
  50%      { transform: translateY(-14px) scale(1.06); } /* 漂浮高度可調：-8 ~ -18 */
}

@keyframes omamoriGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(255, 230, 180, 0.45))
      drop-shadow(0 0 22px rgba(255, 215, 120, 0.35))
      drop-shadow(0 0 38px rgba(255, 255, 255, 0.15));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 230, 180, 0.70))
      drop-shadow(0 0 30px rgba(255, 215, 120, 0.55))
      drop-shadow(0 0 55px rgba(255, 255, 255, 0.28));
  }
}

/* 桌機（滑鼠環境）才加「靜態」drop-shadow 提升質感：注意是靜態，不動畫 */
@media (hover: hover) and (pointer: fine) {
  #omamoriScreen.focus #omamoriGlowLayer{
    filter: drop-shadow(0 0 18px rgba(255, 215, 120, 0.35));
  }
}


/* ====== Omamori：角色與對話框 ====== */

#omamoriDialogue {
  position: absolute;
  inset: 0;
  z-index: 35; /* 背景(0) < 御守(10~20) < 按鈕(30)；這裡放在按鈕之上或附近都可 */
  pointer-events: none; /* 先不吃點擊；之後要點角色再打開 */
}

/* 共用：角色容器 */
#omamoriDialogue .npc {
  position: absolute;
  bottom: 170px; /* 離底部一點點，避免貼邊 */
  width: 410px;
  height: 432px;
}

/* 左右位置：各留一點邊距 */
#omamoriDialogue .npc.left  { left: 40px; }
#omamoriDialogue .npc.right { right: 40px; }

/* 角色圖本體 */
#omamoriDialogue .npc-img {
  width: 410px;
  height: 432px;
  display: block;
}

/* 對話框容器：放在角色「下方但稍微蓋到角色」 */
#omamoriDialogue .bubble {
  position: absolute;
  left: 50%;
  bottom: -110px;            /* 往下壓一點；負值代表會蓋到角色 */
  transform: translateX(-50%);
  width: 495px;
  height: 165px;
}

/* 對話框圖片 */
#omamoriDialogue .bubble-img {
  width: 495px;
  height: 195px;
  display: block;
}

/* 對話文字：疊在氣泡上 */
#omamoriDialogue .bubble-text {
  position: absolute;
  left: 50px;
  right: 40px;
  top: 36px;

  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;

  font-size: 22px;
  line-height: 1.3;
  color: rgb(155, 86, 98);
  font-family: 'Open Sans', sans-serif;

  word-break: break-word;

  user-select: none;
  pointer-events: none;
}

/* 角色呼吸：放在 wrapper 上，避免跟彈跳搶 transform */
#omamoriDialogue .npc-breathe {
  animation: npcBreathe 3s ease-in-out infinite;
}

/* ✅ pop 的時候把 pop 疊上去（用逗號） */
#omamoriDialogue .npc-breathe.npc-pop {
  animation: npcBreathe 3s ease-in-out infinite, npcPop 220ms ease-out;
}


/* ===== Omamori 對話框文字調整 ===== */

@keyframes npcBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.015); }
}


/* 彈跳動畫：放在 img 上，跟呼吸分離 */
#omamoriDialogue .npc-img {
  display: block;
  transform-origin: center bottom;
}

/* 彈跳 keyframes（你原本那套可留） */
@keyframes npcPop {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-6px) scale(1.03); }
  60%  { transform: translateY(0) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

/* 觸發彈跳 class */
#omamoriDialogue .npc-img.npc-pop {
  animation: npcPop 260ms ease-out;
}

/* ✅ 完成聚焦後的三顆按鈕（預設隱藏） */
#omamoriFocusActions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* 放在御守正下方：453 + 342 = 795
     你之前完成按鈕 top 是 +820+70，這裡我們先用 +820+55 當作按鈕列位置（可微調） */
  top: calc(var(--omamori-y) + 820px + 270px);

  display: flex;
  gap: 120px;
  z-index: 9999;        /* 確保在暗幕與御守光暈之上 */
  pointer-events: auto;
}

/* hidden 就不顯示 */
#omamoriFocusActions.hidden {
  display: none;
}

#omamoriFocusActions .focus-btn {
  width: 140px;
  height: 138px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

#omamoriFocusActions .focus-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

#omamoriFocusActions .focus-btn:active {
  transform: scale(0.96);
}

/* ✅ 聚焦時：三顆按鈕微微發光（不閃爍、無動畫） */
#omamoriScreen.focus #omamoriFocusActions .focus-btn img {
  /* 這裡用固定 drop-shadow，達到「柔光」但不會跳動 */
  filter:
    drop-shadow(0 0 10px rgb(255, 255, 255, 0.5))
    drop-shadow(0 0 22px rgb(255, 237, 237, 0.5));
  
  /* 讓畫面更乾淨：稍微提亮一點點（可選） */
  /* filter: ... brightness(1.02);  ← 如果你想要更亮可打開 */
  
  transition: filter 160ms ease, transform 120ms ease;
}

/* ✅ 觸控按壓：稍微更亮 + 微縮（你原本 focus-btn:active 有縮放，這裡補光） */
#omamoriScreen.focus #omamoriFocusActions .focus-btn:active img {
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 28px rgb(255, 237, 237, 0.5));
}

/* （可選）桌機 hover：也稍微更亮一點點 */
@media (hover: hover) and (pointer: fine) {
  #omamoriScreen.focus #omamoriFocusActions .focus-btn:hover img {
    filter:
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
      drop-shadow(0 0 28px rgba(255, 237, 237, 0.5));
    transform: scale(1.02);
  }
}



/* ✅ Perfect 圖（完成聚焦才出現） */
#omamoriPerfect {
  position: absolute;
  left: 0;
  width: 1080px;
  height: 189px;
  display: block;

  /* 放在三顆按鈕正上方（你已經把按鈕往下騰空間）
     如果你想更貼近御守/按鈕，只要調最後的 10px */
  top: calc(var(--omamori-y) + 820px + 200px - 189px - 5px);

  /* 預設隱藏 */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;

  /* 層級：要在暗幕之上，也要在御守附近，但不一定要高過按鈕 */
  z-index: 70;

  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

/* ✅ focus 先不立刻出現，改由 perfect-show 控制 */
#omamoriScreen.focus #omamoriPerfect {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: none;
}

/* ✅ Perfect 彈跳（一次） */
@keyframes omamoriPerfectPop {
  0%   { transform: translateY(12px) scale(0.92); opacity: 0; }
  55%  { transform: translateY(-6px) scale(1.04); opacity: 1; }
  80%  { transform: translateY(2px) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

#omamoriScreen.focus.perfect-show #omamoriPerfect {
  opacity: 1;

  /* ✅ 同時做：彈跳一次 + 持續發光（用逗號分開） */
  animation:
    omamoriPerfectPop 360ms ease-out both,
    omamoriPerfectGlow 2.4s ease-in-out infinite;

  will-change: filter, transform, opacity;
}



/* Perfect 專用發光（你也可以直接沿用 omamoriGlowPulse，但分開比較好調） */
@keyframes omamoriPerfectGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(255, 230, 180, 0.35))
      drop-shadow(0 0 22px rgba(255, 215, 120, 0.25))
      drop-shadow(0 0 38px rgba(255, 255, 255, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 230, 180, 0.52))
      drop-shadow(0 0 30px rgba(255, 215, 120, 0.47))
      drop-shadow(0 0 55px rgba(255, 255, 255, 0.10));
  }
}


/* ✅ 截圖舞台：平常放很下面、不吃事件、不影響畫面 */
#omamoriCaptureStage{
  position: fixed;
  left: 0;
  top: 0;
  width: 976px;
  height: 1814px;
  overflow: hidden;

  /* 讓它不會被看到：放到最底層 */
  z-index: -9999;
  pointer-events: none;

  /* 不要用 visibility:hidden（會讓 filter / html2canvas 支援變差） */
  opacity: 0; /* 平常不可見 */
}



/* 底圖鋪滿 */
#omamoriCaptureBg {
  position: absolute;
  inset: 0;
  width: 976px;
  height: 1814px;
  display: block;
}

/* 御守成品容器：之後你要調位置/大小就改這裡 */
#omamoriCaptureOmamori {
  position: absolute;

  /* ✅ 先給你一個「中上方」的預設值（之後再微調） */
  left: 50%;
  top: 200px;
  transform: translateX(-50%);

  /* 你先用這個寬度，之後再調 */
  width: 600px;
  height: 795px; /* top453 + bottom342 = 795 */
}

/* 三張疊合（跟你主畫面一致） */
#omamoriCaptureOmamori img {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

#capTop    { top: 0; height: 453px; z-index: 10; }
#capBottom { top: 453px; height: 342px; z-index: 10; }
#capKnot   { top: 10px; height: 197px; z-index: 20; }
#resultModal { z-index: 20000; }

/* ✅ 截圖用御守發光（套在每張圖上，比套容器更穩） */
#omamoriCaptureOmamori.cap-glow img{
  filter:
    drop-shadow(0 0 10px rgba(255, 230, 180, 0.70))
    drop-shadow(0 0 26px rgba(255, 215, 120, 0.55))
    drop-shadow(0 0 52px rgba(255, 255, 255, 0.22));
}








/* 🎴 籤紙（請填你實際設計尺寸） */
.omikuji {
    position: absolute;
    left: 540px;   /* 設計稿中心X */
    top: 960px;    /* 設計稿中心Y */
    transform: translate(-50%, -50%);
    width: 1150px;  /* ← 改成你實際寬度 */
    z-index: 2;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ✅ 背景圖：一定要鋪滿舞台，並且在最底層 */
.bg {
  position: absolute;
  inset: 0;              /* 等同 top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 你想完整顯示可以改 contain，但通常背景用 cover */
  z-index: 0;
  pointer-events: none;
  display: block;        /* 避免 img 的 inline 行為造成怪間隙 */
}


/* 👥 角色微呼吸動畫 */
.characters {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1080px;
    z-index: 3;
    pointer-events: none;

    animation: breathe 4s ease-in-out infinite;
    transform-origin: center bottom; /* 從腳底為基準呼吸 */
}
@keyframes breathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.015); } /* 只放大 1.5% */
    100% { transform: scale(1); }
}


/* 🔘 抽籤按鈕（請填你的設計位置） */
.draw-btn {
    position: absolute;
    left: 540px;
    top: 1760px;
    transform: translate(-50%, -50%);

    width: 680px;
    height: 300px;

    background: url("images/draw-btn.png") no-repeat center/contain;
    background-color: transparent;

    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 4;

    animation: pulse 1.6s ease-in-out infinite;

    transition:
        filter 0.3s ease,
        transform 0.15s ease;
}


.draw-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
    filter: brightness(0.9);
}

/* 抽中後特效 */
.omikuji.glow {
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 0 25px gold);
}
/* 🔄 按鈕呼吸動畫 */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

#resultModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 20000;
}

.modalContent {
  width: 860px;
  background: white;
  border-radius: 30px;
  padding: 40px 30px 50px;
  text-align: center;
  position: relative;
  animation: modalPop 0.4s ease;
}

@keyframes modalPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

#resultImage {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 30px;
}

.modalButtons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.modalButtons img {
  width: 420px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.modalButtons img:active {
  transform: scale(0.92);
}

#closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
}

/* 夜晚圖預設隱藏 */
/* ✅ 白天圖預設顯示 */
#omikujiScreen .day { opacity: 1; transition: opacity 1.5s ease-in-out; }
body.night-mode #omikujiScreen .day { opacity: 0; pointer-events:none; }

#omikujiScreen .night { opacity: 0; transition: opacity 1.5s ease-in-out; pointer-events:none; }
body.night-mode #omikujiScreen .night { opacity: 1; }


.menu-background.night { display: none; background-image: url("images/menu-bg-night.jpg"); }

body.night-mode .menu-background.day { display: none; }
body.night-mode .menu-background.night { display: block; }

/* ✅ 關掉手機點擊時的藍色高亮（iOS/Android/部分 WebView） */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 更保守：只套在可點擊元素上 */
button, a, img, .menu-btn, .omamori-arrow, .omamori-finish, .ui-btn-menu-topright, #drawBtn {
  -webkit-tap-highlight-color: transparent;
}

/* ✅ 防止圖片長按被選取或拖曳 */
img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
button {
  -webkit-user-select: none;
  user-select: none;
}

/* =========================
   Wind Game Screen
========================= */



#windGameScreen {
  position: absolute;
  inset: 0;
  background: black;
  overflow: hidden;
}

.wind-game-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  z-index: 0;
}

#windGameScreen .ui-btn-menu-topright {
  z-index: 20;
}

/* =========================
   Wind Game Pause Overlay
========================= */

.wind-pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 235, 250, 0.12),
      rgba(0, 0, 0, 0.46) 62%,
      rgba(0, 0, 0, 0.58) 100%
    );

  pointer-events: none;
  opacity: 1;

  animation: windPauseFadeIn 220ms ease-out both;
}

body.wind-game-paused #sakura {
  filter: brightness(0.52) saturate(0.85);
}

body.wind-game-active #sakura {
  z-index: 50 !important;
}

.wind-pause-overlay {
  z-index: 55;
}


.wind-pause-overlay {
  z-index: 80;
}

#windGameScreen #btnWindGameMenu {
  z-index: 100;
}

.wind-result-panel {
  z-index: 110;
}


#windGameScreen #btnWindGameMenu {
  z-index: 100;
}

.wind-pause-overlay.hidden {
  display: none;
}

.wind-pause-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 118px;
  font-weight: 800;
  letter-spacing: 4px;

  color: rgba(255, 245, 252, 0.96);

  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 32px rgba(255, 175, 220, 0.78),
    0 0 68px rgba(120, 80, 180, 0.62);

  transform: translateY(-80px);
}

@keyframes windPauseFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================
   Wind Game Player
========================= */

#windPlayer {
  position: absolute;

  /* 先用這組測試：左側偏中、畫面中間附近 */
  left: 50px;
  top: 800px;

  width: 440px;
  height: 289px; /* 640:420 等比例縮小到 width 440 */

  z-index: 10;
  pointer-events: none;

  /* 之後做飛行時，會改這個 transform 或 top */
  transform-origin: center center;
}

.wind-player-layer {
  transform-origin: center center;
  will-change: transform;
}

.wind-player-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* 刀光獨立處理，不使用 640×420 角色畫布比例 */
.wind-player-slash {
  position: absolute;

  left: 250px;
  top: -70px;

  width: 420px;
  height: 300px;

  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 20;

  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.9);
  transform-origin: center center;

  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 攻擊時啟用：劍氣向前飛出並淡出 */
.wind-player-slash.slash-active,
.wind-player-slash.slash-active-a,
.wind-player-slash.slash-active-b {
  opacity: 1;
  animation: windSlashWave 280ms linear forwards;
}

@keyframes windSlashWave {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.85);
  }

  12% {
    opacity: 1;
    transform: translate3d(45px, 0, 0) scale(0.95);
  }

  45% {
    opacity: 0.65;
    transform: translate3d(170px, 0, 0) scale(1.04);
  }

  75% {
    opacity: 0.25;
    transform: translate3d(285px, 0, 0) scale(1.12);
  }

  100% {
    opacity: 0;
    transform: translate3d(390px, 0, 0) scale(1.18);
  }
}

#windSlash.hidden {
  display: none;
}

/* =========================
   Wind Game Controls
========================= */

#windControls {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.wind-control-btn {
  position: absolute;

  width: 380px;
  height: 380px;

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  pointer-events: auto;

  transform-origin: center center;
  transition: transform 100ms ease, filter 100ms ease;
}

.wind-control-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 左下：攻擊 */
.wind-attack-btn {
  left: 95px;
  bottom: 135px;
}

/* 右下：飛行 */
.wind-fly-btn {
  right: 95px;
  bottom: 135px;
}

.wind-control-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;

  transform-origin: center center;
  transition:
    transform 100ms ease,
    filter 100ms ease,
    opacity 100ms ease;
}

.wind-control-btn.is-pressed img {
  transform: scale(0.82);
  filter: brightness(0.82);
  opacity: 0.88;
}

/* =========================
   Wind Game Countdown
========================= */

#windCountdown {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);

  z-index: 40;
  pointer-events: none;

  opacity: 0; /* 加這行 */

  font-family: 'Open Sans', sans-serif;
  font-size: 150px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;

  text-align: center;

  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(255, 190, 220, 0.8),
    0 0 52px rgba(255, 220, 150, 0.55);
}

#windCountdown.countdown-pop {
  animation: windCountdownPop 820ms ease-out both;
}

@keyframes windCountdownPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* =========================
   Wind Game Obstacles
========================= */

#windObstacleGroup {
  position: absolute;
  left:0px;
  top: 0;

  width: 260px;
  height: 1920px;

  z-index: 8;
  pointer-events: none;
}

.wind-obstacle {
  position: absolute;
  left: 0;

  width: 260px;
  height: 1200px;

  object-fit: fill;
  display: block;
  pointer-events: none;
}

/* 位置由 JS 控制 */
.wind-obstacle-top,
.wind-obstacle-bottom {
  top: 0;
}



/* =========================
   Wind Game Sakura Trail
========================= */

#windSakuraTrail {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.wind-route-sakura {
  position: absolute;

  width: 130px;
  height: 130px;

  object-fit: contain;
  display: block;
  pointer-events: none;

  transform: translate(-50%, -50%);
}

/* 夜晚時讓粉櫻花稍微亮一點 */
body.night-mode #windGameScreen .wind-route-sakura {
  filter:
    drop-shadow(0 0 8px rgba(255, 210, 235, 0.75))
    drop-shadow(0 0 18px rgba(255, 180, 220, 0.45));
}

#windSakuraBonus {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.wind-bonus-sakura {
  position: absolute;

  width: 130px;
  height: 130px;

  object-fit: contain;
  display: block;
  pointer-events: none;

  transform: translate(-50%, -50%);
}

body.night-mode #windGameScreen .wind-bonus-sakura {
  filter:
    drop-shadow(0 0 8px rgba(255, 210, 235, 0.75))
    drop-shadow(0 0 18px rgba(255, 180, 220, 0.45));
}

#windGoldRoute {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.wind-route-gold {
  position: absolute;

  width: 170px;
  height: 170px;

  object-fit: contain;
  display: block;
  pointer-events: none;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(0 0 10px rgba(255, 235, 150, 0.9))
    drop-shadow(0 0 24px rgba(255, 190, 80, 0.65));
}

#windBonusGold {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.wind-bonus-gold {
  position: absolute;

  width: 170px;
  height: 170px;

  object-fit: contain;
  display: block;
  pointer-events: none;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(0 0 10px rgba(255, 235, 150, 0.95))
    drop-shadow(0 0 24px rgba(255, 190, 80, 0.7));
}


/* =========================
   Wind Game Hitbox Debug
========================= */

#windHitboxLayer {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.wind-hitbox {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.wind-hitbox-player {
  border: 3px solid rgba(255, 70, 70, 0.9);
  background: rgba(255, 70, 70, 0.12);
}

.wind-hitbox-obstacle {
  border: 3px solid rgba(255, 150, 40, 0.9);
  background: rgba(255, 150, 40, 0.12);
}

.wind-hitbox-sakura {
  border: 3px solid rgba(255, 120, 200, 0.9);
  background: rgba(255, 120, 200, 0.12);
  border-radius: 50%;
}

.wind-hitbox-gold {
  border: 3px solid rgba(255, 220, 60, 0.95);
  background: rgba(255, 220, 60, 0.14);
  border-radius: 50%;
}

#windScore {
  position: absolute;
  left: 50px;
  top: 45px;

  z-index: 60;
  pointer-events: none;

  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  font-weight: 700;
  color: #fff;

  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(255, 190, 220, 0.75),
    0 0 42px rgba(255, 220, 120, 0.55);
}

/* =========================
   Wind Game Result Panel
========================= */


/* 小遊戲期間，櫻花 canvas 會被 JS 搬進 #windGameScreen */
#windGameScreen #sakura {
  position: absolute;
  inset: 0;
  width: 1080px;
  height: 1920px;
  z-index: 25;
  pointer-events: none;
}

/* 暫停 / Mission Complete 時，櫻花變暗 */
body.wind-game-paused #sakura {
  filter: brightness(0.52) saturate(0.85);
}

/* Pause 暗幕與文字 */
.wind-pause-overlay {
  z-index: 80;
}

/* 右上角 Pause / Resume 按鈕不要被暗幕蓋住 */
#windGameScreen #btnWindGameMenu {
  z-index: 100;
}

/* Mission Complete 面板最高 */
.wind-result-panel {
  z-index: 110;
}


.wind-result-panel {
  z-index: 90;
}


.wind-result-panel {
  position: absolute;
  inset: 0;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 80px;
  box-sizing: border-box;

  background:
    radial-gradient(circle at 50% 36%,
      rgba(255, 230, 245, 0.22),
      rgba(20, 12, 36, 0.72) 58%,
      rgba(0, 0, 0, 0.78) 100%);

  opacity: 1;
  pointer-events: auto;
}

.wind-result-panel.hidden {
  display: none;
}


.wind-result-image-card {
  position: relative;

  width: 880px;
  min-height: auto;

  margin-top: -70px;
  padding: 0;

  border: none;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  text-align: center;

  animation: windResultCardIn 520ms ease-out both;
}

.wind-result-image {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(0 0 28px rgba(255, 225, 190, 0.45))
    drop-shadow(0 20px 42px rgba(0, 0, 0, 0.34));
}


.wind-result-image-card .wind-result-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  font-family: 'Open Sans', sans-serif;
  font-size: 38px;
  font-weight: 800;

  color: rgba(88, 58, 42, 0.95);

  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.65),
    0 0 10px rgba(255, 235, 200, 0.75);
}

.wind-result-image-card .wind-result-score-row strong {
  font-size: 50px;
  font-weight: 900;

  color: rgba(120, 62, 46, 0.98);
}

.wind-result-image-card .wind-result-best {
  opacity: 0.9;
}

.wind-result-image-card .wind-result-icon-actions {
  position: absolute;

  left: 50%;
  bottom: 12%;

  transform: translateX(-50%);

  margin-top: 0;

  display: flex;
  justify-content: center;
  gap: 34px;
}




.wind-result-card {
  width: 760px;
  min-height: 520px;

  margin-top: -250px;

  padding: 58px 62px 54px;
  box-sizing: border-box;

  border-radius: 42px;
  border: 2px solid rgba(255, 238, 210, 0.62);

  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 245, 0.76),
      rgba(255, 239, 229, 0.66)
    );

  box-shadow:
    0 0 28px rgba(255, 220, 180, 0.52),
    0 0 80px rgba(255, 160, 210, 0.34),
    0 22px 70px rgba(0, 0, 0, 0.32);

  text-align: center;

  animation: windResultCardIn 520ms ease-out both;
}

.wind-result-kicker {
  margin-bottom: 18px;

  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;

  color: rgba(120, 72, 88, 0.78);
}

.wind-result-title {
  margin-top: -26px;
  margin-bottom: 54px;

  font-family: 'Open Sans', sans-serif;
  font-size: 96px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 2px;

  color: #fffeff;

  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(207, 58, 83, 0.75);
}

.wind-result-score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  width: 100%;
  margin: 18px auto;

  font-family: 'Open Sans', sans-serif;
  color: #5b4050;
}

.wind-result-score-row span {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
}

.wind-result-score-row strong {
  font-size: 58px;
  font-weight: 800;
  color: #9e4c67;
}

.wind-result-best {
  opacity: 0.82;
}

.wind-result-actions {
  display: flex;
  justify-content: center;
  gap: 32px;

  margin-top: 50px;
}

.wind-result-btn {
  min-width: 210px;
  height: 82px;

  border: none;
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 235, 245, 1),
      rgba(255, 196, 218, 1)
    );

  box-shadow:
    0 8px 18px rgba(150, 70, 100, 0.24),
    inset 0 0 0 2px rgba(255, 255, 255, 0.72);

  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #8c415d;

  cursor: pointer;
  touch-action: manipulation;
}

.wind-result-btn:active {
  transform: scale(0.94);
  filter: brightness(0.94);
}

@keyframes windResultCardIn {
  0% {
    opacity: 0;
    transform: translateY(38px) scale(0.92);
  }

  65% {
    opacity: 1;
    transform: translateY(-8px) scale(1.025);
  }

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

.wind-result-icon-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;

  margin-top: 52px;
}

.wind-result-icon-btn {
  width: 150px;
  height: 150px;
}

.wind-result-icon-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}


.wind-ghost {
  position: absolute;
  left: 0;
  top: 0;
  
  width: 300px;
  height: 300px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 12;
  opacity: 1;

  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 12px rgba(120, 80, 180, 0.8))
    drop-shadow(0 0 28px rgba(80, 40, 140, 0.55));
}

.wind-ghost.hidden {
  display: none !important;
}

.wind-ghost.ghost-defeated {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    opacity 180ms ease-out;
}


.wind-ghost-rush {
  position: absolute;
  left: 0;
  top: 0;

  width: 330px;
  height: 330px;

  z-index: 48;
  pointer-events: none;

  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.wind-ghost-rush.hidden {
  display: none !important;
}

.wind-ghost-rush.rush-warning {
  animation: rushGhostWarning 0.16s ease-in-out infinite alternate;
}

.wind-ghost-rush.ghost-defeated {
  animation: rushGhostDefeated 0.18s ease-out forwards;
}

@keyframes rushGhostWarning {
  from {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 120, 180, 0.7));
    opacity: 0.72;
  }

  to {
    filter: brightness(1.45) drop-shadow(0 0 22px rgba(255, 80, 140, 0.95));
    opacity: 1;
  }
}

@keyframes rushGhostDefeated {
  from {
    opacity: 1;
    filter: brightness(1.4);
  }

  to {
    opacity: 0;
    filter: brightness(2.2);
  }
}

.wind-ghost-phase {
  position: absolute;
  left: 0;
  top: 0;

  width: 320px;
  height: 320px;

  z-index: 47;
  pointer-events: none;

  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.wind-ghost-phase.hidden {
  display: none !important;
}

.wind-ghost-phase.phase-active {
  animation: windPhaseGhostBlink 1.15s ease-in-out infinite;
}

.wind-ghost-phase.ghost-defeated {
  animation: windPhaseGhostDefeated 0.2s ease-out forwards;
}

@keyframes windPhaseGhostBlink {
  0% {
    opacity: 1;
    filter:
      brightness(1.18)
      drop-shadow(0 0 12px rgba(180, 210, 255, 0.72));
  }

  50% {
    opacity: 0.28;
    filter:
      brightness(0.78)
      drop-shadow(0 0 4px rgba(160, 180, 255, 0.28));
  }

  100% {
    opacity: 1;
    filter:
      brightness(1.18)
      drop-shadow(0 0 12px rgba(180, 210, 255, 0.72));
  }
}

@keyframes windPhaseGhostDefeated {
  from {
    opacity: 1;
    filter: brightness(1.5);
  }

  to {
    opacity: 0;
    filter: brightness(2.2);
  }
}


/* =========================
   Wind Game Anti Select / Drag
========================= */

#windGameScreen,
#windGameScreen * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#windGameScreen img {
  -webkit-user-drag: none;
}

#windControls {
  touch-action: none;
}

.wind-control-btn {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.wind-control-btn img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#windPlayer,
#windObstacleGroup,
.wind-ghost,
.wind-route-sakura,
.wind-route-gold,
.wind-bonus-sakura,
.wind-bonus-gold,
.wind-player-slash {
  will-change: transform, opacity;
}

#windGameScreen {
  contain: layout paint;
}


/* ===== Wind Result Image Panel Override ===== */

.wind-result-panel {
  position: absolute;
  inset: 0;
  z-index: 110;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  box-sizing: border-box;

  background:
    radial-gradient(circle at 50% 36%,
      rgba(255, 230, 245, 0.22),
      rgba(20, 12, 36, 0.72) 58%,
      rgba(0, 0, 0, 0.78) 100%);

  opacity: 1;
  pointer-events: auto;
}

.wind-result-panel.hidden {
  display: none;
}

/* 強制取消舊白色卡片樣式 */
.wind-result-panel .wind-result-image-card {
  position: relative;

  width: 1080px;
  max-width: calc(100% - 16px);

  min-height: 0 !important;
  margin-top: -300px;
  padding: 0 !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  text-align: center;

 animation: windResultImageSlideIn 820ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.wind-result-image {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(0 0 28px rgba(255, 225, 190, 0.45))
    drop-shadow(0 20px 42px rgba(0, 0, 0, 0.34));
}

/* 分數疊在圖片上 */
.wind-result-score-overlay {
  position: absolute;

  left: 53%;
  top: 51%;

  width: 52%;

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  gap: 5px;

  pointer-events: none;
}

.wind-result-panel .wind-result-image-card .wind-result-score-row {
  display: grid;

  /* 左欄是 Score / Best，右欄是數字 */
  grid-template-columns: 170px 220px;
  column-gap: 250px;

  justify-content: center;
  align-items: center;

  padding: 0 18px;

  font-family: 'Open Sans', sans-serif;
  font-size: 42px;
  font-weight: 800;

  color: rgba(88, 58, 42, 0.95);

  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.65),
    0 0 10px rgba(255, 235, 200, 0.75);
}

.wind-result-panel .wind-result-image-card .wind-result-score-row span {
  text-align: left;
}

.wind-result-panel .wind-result-image-card .wind-result-score-row strong {
  text-align: left;
  font-size: 48px;
  font-weight: 900;
  color: rgba(120, 62, 46, 0.98);
}

/* 按鈕疊在圖片下方 */
.wind-result-panel .wind-result-image-card .wind-result-icon-actions {
  position: absolute;

  left: 50%;
  bottom: -25%;

  transform: translateX(-50%);

  margin-top: 0;

  display: flex;
  justify-content: center;
  gap: 180px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  animation: windResultButtonsFadeIn 520ms ease-out 1020ms both;
}

/* ===== Wind Result Icon Buttons: remove white border/background ===== */

.wind-result-panel .wind-result-image-card .wind-result-icon-btn {
  width: 150px;
  height: 150px;

  padding: 0 !important;
  margin: 0;

  border: none !important;
  outline: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
  touch-action: manipulation;

  overflow: visible;
}

.wind-result-panel .wind-result-image-card .wind-result-icon-btn::before,
.wind-result-panel .wind-result-image-card .wind-result-icon-btn::after {
  content: none !important;
  display: none !important;
}

.wind-result-panel .wind-result-image-card .wind-result-icon-btn img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;

  pointer-events: none;
  user-select: none;
}

/* ===== Wind Result Icon Buttons Glow ===== */

.wind-result-panel .wind-result-image-card .wind-result-icon-btn img {
  filter:
    drop-shadow(0 0 8px rgba(255, 245, 220, 0.85))
    drop-shadow(0 0 18px rgba(255, 205, 135, 0.55))
    drop-shadow(0 0 30px rgba(255, 160, 205, 0.35));

  transition:
    transform 160ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.wind-result-panel .wind-result-image-card .wind-result-icon-btn:active img {
  transform: scale(0.92);

  filter:
    drop-shadow(0 0 5px rgba(255, 245, 220, 0.75))
    drop-shadow(0 0 12px rgba(255, 205, 135, 0.45))
    drop-shadow(0 0 22px rgba(255, 160, 205, 0.28));

  opacity: 0.9;
}

.wind-result-panel .wind-result-image-card .wind-result-best span {
  color: rgba(167, 94, 35, 0.95);
}

.wind-result-panel .wind-result-image-card .wind-result-best strong {
   color: rgba(167, 94, 35, 0.95);
}


@keyframes windResultImageSlideIn {
  0% {
    opacity: 0;
    transform: translateY(260px);
  }

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

@keyframes windResultButtonsFadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.wind-result-panel.hidden .wind-result-image-card,
.wind-result-panel.hidden .wind-result-icon-actions {
  animation: none !important;
}


/* ===== Wind Game: disable obstacle glow for performance ===== */

#windObstacleGroup,
#windObstacleTop,
#windObstacleBottom,
#windGameScreen .wind-obstacle,
body.night-mode #windGameScreen .wind-obstacle,
body.wind-game-active #windGameScreen .wind-obstacle,
body.wind-game-active.night-mode #windGameScreen .wind-obstacle {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* ===== Wind Sakura Glow: image-based glow only ===== */

#windGameScreen .wind-route-sakura,
#windGameScreen .wind-bonus-sakura,
#windGameScreen .wind-route-gold,
#windGameScreen .wind-bonus-gold {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ===== Seasonal Menu Background: Autumn Day / Night ===== */

/* 秋季白天背景圖 */
body.autumn-mode .menu-background.day {
  background-image: url("images/menu-bg-day-autumn.jpg") !important;
}

/* 秋季夜晚背景圖 */
body.autumn-mode .menu-background.night {
  background-image: url("images/menu-bg-night-autumn.jpg") !important;
}

/* 秋季白天：顯示 day，隱藏 night */
body.autumn-mode:not(.night-mode) .menu-background.day {
  display: block !important;
}

body.autumn-mode:not(.night-mode) .menu-background.night {
  display: none !important;
}

/* 秋季夜晚：隱藏 day，顯示 night */
body.autumn-mode.night-mode .menu-background.day {
  display: none !important;
}

body.autumn-mode.night-mode .menu-background.night {
  display: block !important;
}