/* 基法筆順王 v3 — 世界化新增 CSS(疊喺 style.css 之上) */

/* === 移除 v2 草地泡泡偽元素(背景已用真圖)=== */
#app::after { display: none !important; }

/* === bg-scene 保持 0,所有內容元素明確設 z-index >= 1 蓋過 === */
.bg-scene { z-index: 0; }
.badge-cabinet, .badge-shelf-row, .adventure-grid, .storybook,
.unlock-card, .unlock-cheer-companions, .unlock-buttons,
.start-lesson-btn-wrap, .char-rows, .progress-block, .lesson-sign,
.badges-header, .course-list-header, .settings-house {
  position: relative; z-index: 2;
}

/* === Home 主畫面 v4 — 直接用 mockup 圖底 + 4 個透明 hot zone === */
/* === 主畫面 v4.2:contain 全圖可見 + letterbox 漸變融合 === */
.home-mockup-root {
  position: relative;
  width: 100%; height: 100vh;
  /* letterbox 用天空→草地漸變,同 mockup 邊緣色調融合 */
  background: linear-gradient(to bottom,
    #a5d8f0 0%,
    #cfe9f7 38%,
    #a4d456 55%,
    #8fc54a 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* stage 用 aspect-ratio 匹配圖,fit 入視窗;hot zones % of stage = % of 圖,永遠對位 */
.mockup-stage {
  position: relative;
  aspect-ratio: 1672 / 941;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: 100%;
  background-image: url(../assets/bg/bg_home_full.jpg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
/* 視窗比例比圖窄(高)→ 改 fit by width */
@media (max-aspect-ratio: 1672/941) {
  .mockup-stage { width: 100%; height: auto; max-height: none; max-width: 100vw; }
}
.hz-transparent {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.2);
}
/* 4 個 hot zone(以新圖 1672×941 像素 % 計,跟 spec)*/
.hz-overlay-counter {
  position: absolute;
  top: 2.5%; left: 2%;
  width: 22%;
  height: 11%;
  /* 木紋木板:橫紋細紋 + 木色漸變 */
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 10px,
      rgba(62,37,16,.06) 10px, rgba(62,37,16,.06) 11px),
    linear-gradient(to bottom, var(--wood-light), var(--wood));
  border: 4px solid var(--wood-darker);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(15px, 2.6vh, 24px);
  font-weight: 800;
  color: var(--cream);
  text-shadow: 1px 1px 0 var(--wood-darker), 0 -1px 0 var(--wood-darker);
  box-shadow: 0 4px 0 var(--wood-darker),
              inset 0 -4px 0 rgba(62,37,16,.3),
              inset 0 3px 0 rgba(255,255,255,.18);
  white-space: nowrap;
  padding: 0;
  z-index: 10;
  letter-spacing: 1px;
}
.hz-overlay-settings {
  position: absolute;
  top: 3%; right: 10%;
  width: 7%; height: 11%;
}
.hz-overlay-start {
  position: absolute;
  top: 82%; left: 21%;
  width: 26%; height: 13%;
}
.hz-overlay-badges {
  position: absolute;
  top: 82%; left: 53%;
  width: 26%; height: 13%;
}

/* ↓ 以下舊主畫面 CSS 已不再用(home.js 唔再 render 呢啲元素),保留唔影響 ↓ */

.home-root.home-fixed-viewport {
  height: 100vh; max-height: 100vh; overflow: hidden;
  padding-bottom: 0; position: relative;
}

/* 標題區 — 上方,巨型 */
.home-title-wrap {
  position: absolute; top: 12px; left: 0; right: 0;
  text-align: center; z-index: 3;
  padding: 0 16px;
}
.home-title-img {
  display: block;
  max-width: min(58vw, 720px);
  max-height: 28vh;
  height: auto; width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 0 rgba(62,37,16,.3));
}
.home-subtitle {
  display: inline-block;
  margin: 4px auto 0;
  padding: 6px 22px;
  background: linear-gradient(to bottom, var(--btn-yellow), var(--btn-orange));
  color: var(--ink);
  border: 3px solid var(--wood-darker); border-radius: 999px;
  font-size: clamp(14px, 2vh, 18px); font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 3px 0 var(--wood-darker);
}

/* 中央激勵 chip — 垂直,放低少少避免同副題重疊 */
.motto-chips {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  z-index: 3;
}
.motto-chip {
  background: linear-gradient(to bottom, var(--btn-yellow), var(--btn-orange));
  border: 3px solid var(--wood-darker); border-radius: 999px;
  padding: 5px 18px;
  font-size: 15px; font-weight: 800; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 3px 0 var(--wood-darker);
}

/* 右側「我是有」垂直掛牌(如樹屋吊牌)*/
.recent-chars {
  position: absolute; top: 32%; right: 12px;
  display: flex; flex-direction: column; gap: 8px; z-index: 3;
}
.recent-char-card {
  width: 54px; height: 54px;
  background: linear-gradient(to bottom, var(--cream), var(--cream-d));
  border: 3px solid var(--wood-darker); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: var(--ink);
  box-shadow: 0 3px 0 var(--wood-darker);
  position: relative;
}
.recent-char-card::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 10px; background: var(--wood-darker);
}
@media (max-width: 560px) { .recent-chars { display: none; } }

/* 角色 zone(各 50% 寬,bottom 對齊)*/
.char-zone {
  position: fixed; bottom: 96px; z-index: 4;
  pointer-events: none;
  width: 50%;
  display: flex; align-items: flex-end;
}
.char-zone.left  { left: 0; justify-content: flex-start; padding-left: 8px; }
.char-zone.right { right: 0; justify-content: flex-end;   padding-right: 8px; }
.char-zone .char {
  position: relative;
  width: clamp(260px, 32vw, 480px);
  height: clamp(260px, 32vw, 480px);
  background: transparent; border: none;
  flex-shrink: 0;
}
.char-bubble {
  max-width: 200px;
  font-size: clamp(13px, 1.8vh, 16px);
  padding: 8px 14px;
  background: var(--cream); border: 3px solid var(--wood-darker);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 3px 0 var(--wood-darker);
  position: absolute;
  z-index: 5;
  white-space: nowrap;
}
/* 對話泡黐角色頭(panda 喺左 → bubble 右上方;momo 喺右 → bubble 左上方)*/
.panda-bubble {
  top: 14%;
  left: 78%;
}
.panda-bubble::after {
  content: ""; position: absolute; bottom: 10px; left: -10px;
  width: 0; height: 0;
  border-right: 10px solid var(--wood-darker);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.momo-bubble {
  top: 14%;
  right: 78%;
}
.momo-bubble::after {
  content: ""; position: absolute; bottom: 10px; right: -10px;
  width: 0; height: 0;
  border-left: 10px solid var(--wood-darker);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}

/* 按鈕 — 底部固定 */
.home-buttons {
  position: fixed; bottom: 12px; left: 0; right: 0;
  display: flex; gap: 12px; justify-content: center;
  padding: 0 16px; z-index: 10;
}
.home-buttons .btn { flex: 0 1 240px; }

/* 響應式 */
@media (max-width: 700px) {
  .char-zone .char {
    width: clamp(160px, 38vw, 240px);
    height: clamp(160px, 38vw, 240px);
  }
  .panda-bubble, .momo-bubble { display: none; }
  .recent-chars { display: none; }
  .motto-chips { top: 40%; }
}
@media (max-height: 520px) {
  .home-title-img { max-height: 16vh; }
  .home-title-wrap { top: 8px; }
  .char-zone { bottom: 80px; }
  .char-zone .char {
    width: clamp(110px, 28vh, 160px);
    height: clamp(110px, 28vh, 160px);
  }
  .motto-chips { display: none; }
  .recent-chars { display: none; }
  .panda-bubble, .momo-bubble { display: none; }
}

/* === 課題冒險手冊(大卡片網格)=== */
.adventure-grid {
  display: grid; gap: 16px; padding: 0 12px 32px;
  max-width: 920px; margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .adventure-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .adventure-grid { grid-template-columns: repeat(4, 1fr); } }

.adv-card {
  background: linear-gradient(to bottom, var(--cream) 0%, var(--cream-d) 60%, var(--parch-d) 100%);
  border: 4px solid var(--wood-dark);
  border-radius: 18px;
  padding: 16px 12px 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow), inset 0 0 0 2px var(--wood);
  position: relative;
  transition: transform .08s;
}
.adv-card:active { transform: translateY(2px); }
.adv-card.done {
  background: linear-gradient(to bottom, #f8e8a0, #f4c540);
  border-color: var(--btn-orange-d);
  box-shadow: var(--shadow), inset 0 0 0 2px var(--btn-orange), 0 0 16px rgba(244,197,64,.5);
}
.adv-card.locked { filter: grayscale(.7); cursor: not-allowed; }
.adv-illu {
  width: 100%; aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--sky-mid), var(--grass-mid));
  border: 3px solid var(--wood-dark); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; position: relative; overflow: hidden;
}
.adv-illu img { max-width: 80%; max-height: 80%; }
.adv-illu-emoji { font-size: 64px; line-height: 1; }
.adv-name { font-size: 18px; font-weight: 900; color: var(--ink); margin: 4px 0; }
.adv-nick {
  display: inline-block;
  background: var(--btn-red); color: #fff;
  border: 2px solid var(--wood-darker); border-radius: 8px;
  padding: 2px 10px;
  font-size: 13px; font-weight: 700;
  margin: 4px 0 8px;
  text-shadow: 1px 1px 0 var(--wood-darker);
  box-shadow: 0 2px 0 var(--wood-darker);
}
.adv-card.done .adv-nick { background: var(--btn-green); }
.adv-locked-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.5); border-radius: 14px;
  font-weight: 800; font-size: 18px; color: var(--ink-soft);
}

.stars-row { display: inline-flex; gap: 2px; }
.sr-star {
  font-size: 18px; color: #c8b89c;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.sr-star.on { color: var(--btn-yellow); text-shadow: 1px 1px 0 var(--btn-orange-d); }

/* === 故事書頁面框(lesson)=== */
.storybook {
  max-width: 560px; margin: 8px auto 80px;
  background: linear-gradient(to bottom, var(--parch) 0%, var(--cream) 30%, var(--cream) 100%);
  border: 5px solid var(--wood-darker);
  border-radius: 14px;
  box-shadow: var(--shadow-deep), inset 0 0 0 3px var(--wood);
  padding: 22px 20px 18px;
  position: relative;
}
.storybook::before, .storybook::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; width: 4px;
  background: repeating-linear-gradient(to bottom, var(--wood), var(--wood) 4px, transparent 4px, transparent 8px);
  opacity: .3;
}
.storybook::before { left: 8px; }
.storybook::after { right: 8px; }
.book-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(62,37,16,.18) 30%, rgba(62,37,16,.18) 70%, transparent 100%);
  pointer-events: none;
}
.book-header { text-align: center; margin-bottom: 14px; }
.book-illu {
  width: 80px; height: 80px; margin: 0 auto 6px;
  background: linear-gradient(135deg, var(--sky-mid), var(--grass-mid));
  border: 3px solid var(--wood-dark); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 50px;
}
.book-name { font-size: 28px; font-weight: 900; color: var(--ink); margin: 6px 0; }
.book-nick { margin: 4px 0; }
.ribbon-small {
  display: inline-block;
  background: var(--btn-red); color: #fff;
  border: 2px solid var(--wood-darker); border-radius: 8px;
  padding: 3px 14px;
  font-size: 14px; font-weight: 800;
  text-shadow: 1px 1px 0 var(--wood-darker);
  box-shadow: 0 2px 0 var(--wood-darker);
}

/* === lesson 角色陪伴(底部固定)=== */
.lesson-companion {
  position: fixed; bottom: 20px; z-index: 5;
  pointer-events: none; opacity: .9;
}
.lesson-companion.left { left: 8px; }
.lesson-companion.right { right: 8px; }
.lesson-companion .char { width: 96px; height: 96px; background: transparent; border: none; }
@media (max-width: 560px) {
  .lesson-companion .char { width: 70px; height: 70px; }
}

/* === 成就解鎖畫面(lessonComplete)=== */
.unlock-screen { overflow-x: hidden; }
.unlock-card {
  position: relative; z-index: 3;
  max-width: 440px; margin: 8px auto 0;
  background: linear-gradient(to bottom, var(--parch), var(--parch-d));
  border: 6px solid var(--wood-darker); border-radius: 20px;
  padding: 14px 24px 22px;
  text-align: center;
  box-shadow: var(--shadow-deep), inset 0 0 0 3px rgba(255,255,255,.5);
}
.unlock-banner {
  font-size: 26px; font-weight: 900; color: var(--btn-red-d);
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 var(--wood-darker);
}
.unlock-banner .spark {
  display: inline-block; color: var(--btn-yellow);
  font-size: 28px; animation: spark 1.2s infinite alternate;
  margin: 0 8px;
}
@keyframes spark {
  0%   { transform: scale(.8) rotate(-10deg); }
  100% { transform: scale(1.15) rotate(15deg); }
}
.unlock-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }

.unlock-medal {
  width: 180px; height: 180px; margin: 12px auto;
  background: radial-gradient(circle at 50% 50%, var(--btn-yellow) 0 64px, var(--btn-orange) 65px 78px, transparent 79px),
              conic-gradient(from 0deg, var(--btn-yellow), #fff8b9, var(--btn-yellow), #fff8b9, var(--btn-yellow), #fff8b9, var(--btn-yellow), #fff8b9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  border: 5px solid var(--wood-darker);
  box-shadow: var(--shadow-deep), 0 0 30px rgba(244,197,64,.7);
}
.unlock-medal img { max-width: 100%; max-height: 100%; border-radius: 16px; }
.unlock-medal.pulse { animation: medalPulse 1.5s ease-out; }
@keyframes medalPulse {
  0%   { transform: scale(.4) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.unlock-stars {
  display: flex; gap: 4px; justify-content: center; margin: 14px 0 6px;
}
.unlock-stars .us {
  font-size: 38px; color: var(--btn-yellow);
  text-shadow: 2px 2px 0 var(--wood-darker);
  display: inline-block;
  animation: unlockStarPop 0.6s ease-out backwards;
}
@keyframes unlockStarPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.4) rotate(15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.unlock-stars-label { font-size: 15px; color: var(--ink-soft); font-weight: 700; margin-bottom: 14px; }

.unlock-nick-wrap { margin: 14px 0; }
.unlock-nick-prefix { display: inline-block; color: var(--ink-soft); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.unlock-nick {
  display: inline-block;
  background: linear-gradient(to bottom, var(--btn-red), var(--btn-red-d));
  color: #fff;
  border: 3px solid var(--wood-darker); border-radius: 10px;
  padding: 8px 26px;
  font-size: 22px; font-weight: 900;
  text-shadow: 2px 2px 0 var(--wood-darker);
  box-shadow: 0 4px 0 var(--wood-darker);
}

.unlock-cheer-companions {
  position: fixed; bottom: 100px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: end;
  padding: 0 16px; pointer-events: none; z-index: 4;
}
.unlock-cheer-companions .char { background: transparent; border: none; width: 100px; height: 100px; }
@media (max-width: 560px) {
  .unlock-cheer-companions .char { width: 76px; height: 76px; }
}
.uc-left .char { animation: cheerJump 0.8s ease-in-out infinite alternate; }
.uc-right .char { animation: cheerJump 0.8s ease-in-out -0.4s infinite alternate; }
@keyframes cheerJump {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.unlock-buttons {
  position: fixed; bottom: 12px; left: 0; right: 0;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px;
  z-index: 5;
}
.unlock-buttons .btn { flex: 1; min-width: 140px; max-width: 200px; }

/* === Confetti rain === */
.confetti-rain {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -20px; width: 10px; height: 14px;
  border-radius: 2px;
  animation: confettiFall 3s linear infinite;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* === 徽章收藏館(badges)— 木製展示櫃 === */
.badge-cabinet {
  max-width: 860px; margin: 8px auto 24px;
  background: linear-gradient(to bottom, var(--wood-light), var(--wood));
  border: 6px solid var(--wood-darker);
  border-radius: 18px;
  padding: 16px 16px 20px;
  box-shadow: var(--shadow-deep),
    inset 0 0 0 4px rgba(255,255,255,.12),
    inset 0 0 0 8px var(--wood-darker);
}
.badge-shelf-row { margin-bottom: 8px; }
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 100%);
  border-radius: 8px;
}
@media (max-width: 560px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
.shelf-board {
  height: 18px; margin: 0 -8px;
  background: linear-gradient(to bottom, var(--wood-darker) 0%, var(--wood) 30%, var(--wood-light) 70%, var(--wood-dark) 100%);
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 var(--wood-darker), 0 4px 8px rgba(0,0,0,.3);
}
.badge-cell {
  background: linear-gradient(to bottom, var(--cream) 0%, var(--cream-d) 100%);
  border: 3px solid var(--wood-dark); border-radius: 12px;
  padding: 10px 6px; text-align: center;
}
.badge-cell .img-holder {
  width: 110px; height: 110px; margin: 0 auto 6px;
  border-radius: 14px;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1;
  overflow: hidden;
}
.badge-cell .img-holder img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.badge-cell.unlocked {
  background: linear-gradient(to bottom, #f8e8a0, #f4c540);
  border-color: var(--btn-orange-d);
  position: relative;
  overflow: hidden;
  animation: badgeFloat 3s ease-in-out infinite;
}
/* 對角閃光掃過 */
.badge-cell.unlocked::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,.65) 50%,
    transparent 65%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: badgeShine 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
/* 右上角 ⭐ NEW 標記 */
.badge-cell.unlocked::after {
  content: '⭐';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 20px;
  filter: drop-shadow(0 0 4px #fff8b9);
  animation: badgeSparkle 1.8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.badge-cell.unlocked .img-holder {
  background: transparent;
  animation: badgeGlow 2.4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.badge-cell.unlocked .label,
.badge-cell.unlocked .sub-label {
  position: relative;
  z-index: 1;
}

@keyframes badgeGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(244, 197, 64, .6)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 215, 80, 1)) drop-shadow(0 0 4px #fff8b9); }
}
@keyframes badgeShine {
  0%   { left: -75%; }
  60%  { left: 125%; }
  100% { left: 125%; }
}
@keyframes badgeSparkle {
  0%, 100% { transform: scale(1) rotate(0deg);    opacity: .85; }
  50%      { transform: scale(1.3) rotate(20deg); opacity: 1; }
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* 減少動畫(用戶系統偏好) */
@media (prefers-reduced-motion: reduce) {
  .badge-cell.unlocked,
  .badge-cell.unlocked::before,
  .badge-cell.unlocked::after,
  .badge-cell.unlocked .img-holder {
    animation: none;
  }
}
/* 灰色剪影(取代鎖頭) */
.badge-cell.silhouette .img-holder {
  filter: grayscale(1) brightness(.45) opacity(.6);
  background: var(--cream-d);
}
.badge-cell.silhouette .label { color: var(--ink-soft); }
.badge-cell .label { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.badge-cell .sub-label { font-size: 11px; color: var(--ink-soft); margin-top: 2px; line-height: 1.1; }
.badge-cell.unlocked .sub-label { color: var(--btn-orange-d); font-weight: 700; }
.cabinet-summary {
  text-align: center; margin-top: 12px; padding: 8px;
  background: rgba(0,0,0,.18); border-radius: 8px;
  font-weight: 800; color: var(--cream); font-size: 15px;
}

/* === 收藏館頁面慶祝效果 === */

/* 收藏館金光呼吸(有解鎖時) */
.badge-cabinet.has-unlocked {
  animation: cabinetGlow 3.6s ease-in-out infinite;
}
@keyframes cabinetGlow {
  0%, 100% { box-shadow: var(--shadow-deep),
               inset 0 0 0 4px rgba(255,255,255,.12),
               inset 0 0 0 8px var(--wood-darker),
               0 0 0 0 rgba(244,197,64,0); }
  50%      { box-shadow: var(--shadow-deep),
               inset 0 0 0 4px rgba(255,215,80,.45),
               inset 0 0 0 8px var(--wood-darker),
               0 0 36px 6px rgba(244,197,64,.55); }
}

/* 慶祝橫額 */
.badges-celebrate-banner {
  max-width: 720px;
  margin: 6px auto 12px;
  padding: 10px 24px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #6b3f1f;
  background: linear-gradient(to bottom, #fff8b9 0%, #f4c540 60%, #ee863a 100%);
  border: 4px solid var(--wood-darker);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--wood-darker), 0 0 24px rgba(244,197,64,.7);
  text-shadow: 1px 1px 0 #fff8b9;
  animation: bannerPop 0.6s ease-out, bannerBob 2.4s ease-in-out 0.6s infinite;
  position: relative;
  z-index: 3;
}
.badges-celebrate-banner .bcb-spark {
  display: inline-block;
  margin: 0 10px;
  animation: bannerSpark 1.4s ease-in-out infinite;
}
.badges-celebrate-banner .bcb-spark:last-child {
  animation-delay: 0.7s;
}
@keyframes bannerPop {
  0%   { transform: scale(.5) translateY(-30px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bannerBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes bannerSpark {
  0%, 100% { transform: scale(1) rotate(0); opacity: .9; }
  50%      { transform: scale(1.4) rotate(25deg); opacity: 1; }
}

/* 飄浮 ambient 星星(背景層) */
.badges-ambient-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bas-sparkle {
  position: absolute;
  bottom: -30px;
  opacity: 0;
  animation: ambientFloat linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,80,.8));
}
@keyframes ambientFloat {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

/* 入版 confetti 淡出 */
.badges-confetti { z-index: 4; }
.badges-confetti.fade-out { opacity: 0; transition: opacity 1.2s ease-out; }

/* 減少動畫 */
@media (prefers-reduced-motion: reduce) {
  .badge-cabinet.has-unlocked,
  .badges-celebrate-banner,
  .badges-celebrate-banner .bcb-spark,
  .bas-sparkle { animation: none; }
  .badges-ambient-sparkles, .badges-confetti { display: none; }
}

/* === iPhone 直向警告(landscape-only app) === */
.rotate-warning {
  display: none;
  position: fixed; inset: 0;
  z-index: 99999;
  background: linear-gradient(to bottom, var(--sky-top), var(--grass-top));
  align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  padding: 24px;
  color: var(--ink);
  font-family: inherit;
}
.rotate-warning .rw-icon {
  font-size: 80px; margin-bottom: 16px;
  animation: rwSpin 2s ease-in-out infinite;
}
.rotate-warning .rw-text {
  font-size: 22px; font-weight: 900; color: var(--wood-darker);
  background: var(--cream); padding: 14px 22px;
  border: 4px solid var(--wood-darker); border-radius: 16px;
  box-shadow: 0 4px 0 var(--wood-darker);
}
.rotate-warning .rw-sub {
  margin-top: 12px; font-size: 14px; color: var(--ink-soft);
}
@keyframes rwSpin {
  0%, 100% { transform: rotate(-15deg); }
  50%      { transform: rotate(75deg); }
}
/* 手機直向(≤ 900px 且 portrait)→ 顯示警告,蓋住 app */
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-warning { display: flex; }
  #app { display: none; }
}