/* 彬彬的英文冒險群島 V0.1 — 樣式
 * 舞台固定 1920×1080，再用 JS 等比縮放。所有尺寸都以這個座標為準。 */
:root {
  --paper: #fbf1d6;
  --paper-2: #f5e3b3;
  --wood: #c58a4a;
  --wood-dark: #8a5a2b;
  --brown: #6b3f1d;
  --leaf: #5aa04b;
  --leaf-dark: #3f7d2f;
  --sun: #ffd84a;
  --font: "PingFang TC", "Hiragino Sans CNS", "Noto Sans TC", "Microsoft JhengHei", "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2f6b4f; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--brown); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; position: fixed; inset: 0; width: 100%; }
textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; pointer-events: none; }

/* 空邊用背景放大模糊填滿 */
#backdrop { position: fixed; inset: -40px; background-size: cover; background-position: center; filter: blur(22px) brightness(.92) saturate(1.1); transition: background-image .3s; }
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; overflow: hidden; background: #000; transition: opacity .22s; box-shadow: 0 0 60px rgba(0,0,0,.35); }
#stage.fading { opacity: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; }

#rotate { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; background: #2f6b4f; color: #fff; text-align: center; font-size: 6vw; }
.rot-box { padding: 4vw; } .rot-ic { font-size: 18vw; line-height: 1; animation: spin 2.4s ease-in-out infinite; } .rot-en { font-size: 3.4vw; opacity: .85; margin-top: 1vw; }
@keyframes spin { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(70deg); } }

.bg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spr { display: block; }
.ph { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); border: 4px dashed #c58a4a; border-radius: 30px; color: var(--brown); font-size: 28px; min-width: 160px; min-height: 160px; text-align: center; }

/* 按下的回饋 */
.tappable { cursor: pointer; transition: transform .08s; }
.tappable.pressed { transform: scale(.94); filter: brightness(1.06); }

/* ---------- 旁白字幕 ---------- */
.caption { position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 30px); max-width: 1300px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.caption.show { opacity: 1; transform: translate(-50%, 0); }
.cap-text { background: var(--paper); border: 8px solid var(--wood); border-radius: 56px; padding: 18px 54px; font-size: 52px; font-weight: 800; letter-spacing: 3px; color: var(--brown); text-align: center; box-shadow: 0 10px 0 rgba(107,63,29,.25); }

/* ---------- 共用按鈕 ---------- */
.hud-btn { position: absolute; top: 36px; width: 112px; height: 112px; z-index: 40; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hud-back { left: 40px; background: radial-gradient(circle at 35% 30%, #9be070, #4aa03a); border: 8px solid #f6e7bd; box-shadow: 0 8px 0 rgba(0,0,0,.2); padding: 20px; }
.hud-back svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.hud-sound { right: 40px; background: radial-gradient(circle at 35% 30%, #6fb8f0, #3b84c9); border: 8px solid #f6e7bd; box-shadow: 0 8px 0 rgba(0,0,0,.2); padding: 18px; }
.hud-sound.off { background: radial-gradient(circle at 35% 30%, #ef7b7b, #c94444); }
.hud-sound svg { width: 100%; height: 100%; }
.parent-gate { position: absolute; right: 0; bottom: 0; width: 130px; height: 130px; z-index: 45; }

.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 22px; height: 140px; padding: 0 70px; border-radius: 80px; color: #fff; font-size: 66px; font-weight: 900; letter-spacing: 6px; text-shadow: 0 4px 0 rgba(0,0,0,.22); box-shadow: 0 12px 0 rgba(0,0,0,.22), inset 0 6px 0 rgba(255,255,255,.35); border: 8px solid rgba(255,255,255,.55); }
.btn-green { background: linear-gradient(#8fd45a, #52a63a); }
.btn-yellow { background: linear-gradient(#ffe36a, #f2b52b); color: #7a4a10; text-shadow: 0 3px 0 rgba(255,255,255,.4); }
.btn-ic svg { width: 62px; height: 62px; display: block; }

/* ---------- 花苞魔法精靈 ---------- */
.fairy { position: absolute; z-index: 20; animation: float 3.4s ease-in-out infinite; }
.fairy .fairy-img, .fairy .ph { height: 100%; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.fairy.talking { animation: float 3.4s ease-in-out infinite, talk .45s ease-in-out infinite; }
.fairy.wiggle { animation: wiggle .5s ease-in-out 2; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes talk { 0%,100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes wiggle { 0%,100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }

/* ---------- 首頁 ---------- */
.title-banner { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: 1280px; padding: 26px 40px 22px; text-align: center; background: linear-gradient(var(--paper), var(--paper-2)); border: 12px solid var(--wood); border-radius: 70px; box-shadow: 0 14px 0 rgba(107,63,29,.28); z-index: 10; }
.tb-zh { font-size: 112px; font-weight: 900; letter-spacing: 10px; color: var(--brown); line-height: 1.15; }
.tb-en { font-size: 44px; font-weight: 700; letter-spacing: 2px; color: #8a6a3c; margin-top: 4px; }
.title-binbin { position: absolute; left: 150px; bottom: 20px; height: 620px; width: auto; z-index: 12; filter: drop-shadow(0 10px 10px rgba(0,0,0,.22)); animation: bob 2.2s ease-in-out infinite; }
.title-fairy { right: 150px; bottom: 260px; height: 460px; }
.title-start { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 30; animation: breathe 1.8s ease-in-out infinite; }
.title-start.pressed { transform: translateX(-50%) scale(.94); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes breathe { 0%,100% { scale: 1; } 50% { scale: 1.05; } }

/* ---------- 世界地圖 ---------- */
.hot { position: absolute; z-index: 5; border-radius: 40%; }
.hot.open:active, .hot.open.pressed { background: rgba(255,230,120,.28); box-shadow: 0 0 60px 20px rgba(255,230,120,.5); }
.hot.port { z-index: 4; }
.hot.port.pressed { background: rgba(255,230,120,.28); box-shadow: 0 0 60px 20px rgba(255,230,120,.5); }
.hot.port.flash { animation: portflash .9s ease-out; }
@keyframes portflash { 0% { background: rgba(255,235,130,.55); box-shadow: 0 0 90px 40px rgba(255,235,130,.85); } 100% { background: rgba(255,235,130,0); box-shadow: 0 0 0 0 rgba(255,235,130,0); } }
.port-bubble { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); z-index: 30; padding: 22px 50px; font-size: 56px; font-weight: 900; letter-spacing: 4px; color: var(--brown); background: var(--paper); border: 8px solid var(--wood); border-radius: 60px; box-shadow: 0 10px 0 rgba(107,63,29,.28); animation: bubblepop .45s cubic-bezier(.2,1.5,.4,1) both; white-space: nowrap; pointer-events: none; }
.port-bubble::after { content: ''; position: absolute; left: 50%; bottom: -34px; margin-left: -20px; border: 20px solid transparent; border-top-color: var(--wood); }
@keyframes bubblepop { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.map-label { white-space: nowrap; position: absolute; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center; padding: 8px 30px 10px; background: rgba(251,241,214,.94); border: 6px solid var(--wood); border-radius: 44px; box-shadow: 0 8px 0 rgba(107,63,29,.25); }
.map-label.dim { background: rgba(236,226,200,.88); }
.ml-zh { font-size: 52px; font-weight: 900; letter-spacing: 4px; color: var(--brown); line-height: 1.15; }
.ml-en { font-size: 28px; font-weight: 700; color: #8a6a3c; }
.ml-lock { position: absolute; right: -26px; top: -30px; width: 66px; height: 66px; background: var(--paper); border: 5px solid var(--wood); border-radius: 50%; padding: 8px; }
.ml-lock svg { width: 100%; height: 100%; display: block; }
.map-binbin { position: absolute; left: 41%; top: 52%; height: 215px; width: auto; transform: translateX(-50%); z-index: 9; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); animation: bob 2.4s ease-in-out infinite; pointer-events: none; }
.map-fairy { left: 39%; top: 25%; height: 210px; z-index: 12; }
.map-arrow { position: absolute; left: 25%; top: 2%; width: 112px; z-index: 12; transform: translateX(-50%); animation: arrowbob 1s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.map-arrow svg { width: 100%; display: block; }
@keyframes arrowbob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 24px); } }

/* ---------- 字母森林島 ---------- */
.island-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 100%); pointer-events: none; }
.island-shade.strong { background: rgba(60,40,20,.28); }
.island-title, .complete-title { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); padding: 14px 70px 12px; text-align: center; background: linear-gradient(var(--paper), var(--paper-2)); border: 10px solid var(--wood); border-radius: 60px; box-shadow: 0 12px 0 rgba(107,63,29,.28); z-index: 10; }
.it-zh { font-size: 76px; font-weight: 900; letter-spacing: 8px; line-height: 1.15; }
.it-en { font-size: 34px; font-weight: 700; color: #8a6a3c; }
.stone { position: absolute; width: 210px; height: 210px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 10; background: radial-gradient(circle at 35% 28%, #f7dca0, #d9a95f 70%, #b98343); border: 12px solid #8a5a2b; box-shadow: 0 14px 0 rgba(0,0,0,.25), inset 0 8px 0 rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; }
.stone.tappable.pressed { transform: translate(-50%, -50%) scale(.93); }
.stone-letter { font-size: 140px; font-weight: 900; line-height: 1; text-shadow: 0 5px 0 rgba(255,255,255,.55); }
.stone-star { position: absolute; right: -26px; top: -26px; width: 96px; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.stone-spirit { position: absolute; left: 50%; top: -118px; transform: translateX(-50%); height: 120px; width: auto; }
.stone.next { animation: stonebounce 1.1s ease-in-out infinite; }
@keyframes stonebounce { 0%,100% { margin-top: 0; } 50% { margin-top: -16px; } }
.stone-arrow { position: absolute; left: 50%; top: -128px; width: 96px; filter: drop-shadow(0 0 10px rgba(255,255,255,.9)); transform: translateX(-50%); animation: arrowbob2 1s ease-in-out infinite; }
.stone.done .stone-arrow { display: none; }
@keyframes arrowbob2 { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 18px); } }
.stone-arrow svg { width: 100%; display: block; }
.dex-btn { position: absolute; right: 150px; bottom: 36px; z-index: 12; display: flex; align-items: center; gap: 14px; padding: 12px 40px 12px 24px; background: var(--paper); border: 8px solid var(--wood); border-radius: 80px; box-shadow: 0 10px 0 rgba(107,63,29,.28); }
.dex-ic { height: 110px; width: auto; }
.dex-tx { font-size: 50px; font-weight: 900; letter-spacing: 2px; }
.island-binbin { position: absolute; left: 30px; bottom: 16px; height: 340px; width: auto; z-index: 11; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); animation: bob 2.4s ease-in-out infinite; pointer-events: none; }
.island-fairy { left: 230px; top: 190px; height: 250px; }

/* ---------- 圖鑑卡片 ---------- */
.dcard { position: absolute; width: 480px; height: 380px; overflow: visible; transform: translate(-50%, -50%); background: linear-gradient(var(--paper), var(--paper-2)); border: 10px solid var(--wood); border-radius: 44px; box-shadow: 0 12px 0 rgba(107,63,29,.3); padding: 16px 20px; text-align: center; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.dcard.bounce { animation: cardbounce .5s ease-in-out; }
@keyframes cardbounce { 0%,100% { transform: translate(-50%, -50%); } 40% { transform: translate(-50%, -54%) scale(1.04); } }
.dc-no { align-self: flex-start; font-size: 28px; font-weight: 800; color: #8a6a3c; letter-spacing: 1px; }
.dc-art { height: 160px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 2px 0; }
.dc-img { max-height: 150px; max-width: 100%; width: auto; height: auto; }
.dc-q { font-size: 150px; font-weight: 900; color: rgba(138,106,60,.4); line-height: 1; }
.dc-name { font-size: 46px; font-weight: 900; letter-spacing: 3px; line-height: 1.2; }
.dc-en { font-size: 28px; font-weight: 700; color: #8a6a3c; }
.dc-type { margin-top: 4px; display: inline-flex; align-items: center; gap: 10px; background: #e5f1cc; border-radius: 40px; padding: 4px 24px 4px 6px; font-size: 28px; font-weight: 800; color: #3f7d2f; }
.dc-ic svg { width: 40px; height: 40px; display: block; }
.dcard.locked { opacity: .94; filter: grayscale(.25); }
.dcard.big { left: 50%; top: 46%; width: 720px; height: 740px; padding: 20px 40px; z-index: 40; }
.dcard.big .dc-no { font-size: 36px; }
.dcard.big .dc-art { height: 330px; }
.dcard.big .dc-img { max-height: 320px; }
.dcard.big .dc-name { font-size: 70px; }
.dcard.big .dc-en { font-size: 42px; }
.dcard.big .dc-type { font-size: 38px; margin-top: 14px; }
.dcard.big .dc-ic svg { width: 56px; height: 56px; }
.dc-intro { margin-top: 14px; font-size: 32px; font-weight: 600; line-height: 1.5; color: var(--brown); }
.dcard.reveal { animation: cardreveal .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.dcard.out { animation: cardout .4s ease-in forwards; }
@keyframes cardreveal { from { transform: translate(-50%, -50%) scale(.3) rotate(-12deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
@keyframes cardout { to { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }

/* ---------- 找字母遊戲 ---------- */
.game-progress { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); display: flex; gap: 14px; z-index: 30; background: rgba(251,241,214,.9); border: 6px solid var(--wood); border-radius: 60px; padding: 10px 26px; }
.gp-dot { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; background: #e7d7b0; color: #b79c63; }
.gp-dot.on { background: var(--sun); color: var(--brown); }
.gp-dot.cur { outline: 6px solid var(--leaf); }
.game-binbin { position: absolute; left: 30px; bottom: 16px; height: 400px; z-index: 11; animation: bob 2.4s ease-in-out infinite; pointer-events: none; }
.game-binbin img { height: 100%; width: auto; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
.game-fairy { left: 70px; top: 250px; height: 300px; }
.tile-layer { position: absolute; inset: 0; z-index: 15; }
.tile { position: absolute; width: 190px; height: 190px; transform: translate(-50%, -50%); border-radius: 44px; background: linear-gradient(#f6dba2, #dca95a); border: 12px solid #8a5a2b; box-shadow: 0 12px 0 rgba(0,0,0,.28), inset 0 8px 0 rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; animation: peek 2.6s ease-in-out infinite; }
.tile.pressed { transform: translate(-50%, -50%) scale(.92); }
.tile-ch { font-size: 136px; font-weight: 900; line-height: 1; text-shadow: 0 5px 0 rgba(255,255,255,.55); }
@keyframes peek { 0%,100% { rotate: -3deg; scale: 1; } 50% { rotate: 3deg; scale: 1.05; } }
.tile.glow { animation: peek 1.2s ease-in-out infinite, glow 1s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 12px 0 rgba(0,0,0,.28), 0 0 0 0 rgba(255,230,90,.0); } 50% { box-shadow: 0 12px 0 rgba(0,0,0,.28), 0 0 70px 30px rgba(255,230,90,.85); } }
.tile.shake { animation: shake .5s ease-in-out; }
@keyframes shake { 0%,100% { rotate: 0deg; } 20% { rotate: -9deg; } 40% { rotate: 8deg; } 60% { rotate: -5deg; } 80% { rotate: 3deg; } }
.tile.fade { opacity: 0; scale: .5; transition: opacity .5s, scale .5s; pointer-events: none; }
.tile.found { animation: found .8s ease-out forwards; z-index: 25; }
@keyframes found { 0% { scale: 1; } 40% { scale: 1.6; } 100% { scale: 1.3; } }
.fx-layer { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; width: 22px; height: 34px; border-radius: 6px; animation: confetti 1.8s ease-out forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.spark { position: absolute; color: #ffd84a; text-shadow: 0 0 14px #fff6b0; animation: spark 1.2s ease-out forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

.wordcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 38; width: 820px; height: 560px; background: linear-gradient(var(--paper), var(--paper-2)); border: 12px solid var(--wood); border-radius: 70px; box-shadow: 0 16px 0 rgba(107,63,29,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: wcpop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.wc-letter { font-size: 210px; font-weight: 900; line-height: 1; text-shadow: 0 8px 0 rgba(255,255,255,.7); }
.wc-word { font-size: 120px; font-weight: 900; letter-spacing: 6px; margin-top: 4px; }
.wc-img { position: absolute; right: 40px; top: 40px; height: 200px; width: auto; }
.wordcard.out { animation: wcout .4s ease-in forwards; }
@keyframes wcpop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes wcout { to { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

.spirit-hero { position: absolute; right: 170px; bottom: 120px; height: 560px; width: auto; z-index: 30; filter: drop-shadow(0 12px 12px rgba(0,0,0,.25)); }
.spirit-hero.peek { animation: spiritpeek .9s cubic-bezier(.2, 1.2, .4, 1) both; }
.spirit-hero.happy { animation: spirithappy .6s ease-in-out 2; }
.spirit-hero.out { animation: spiritout .4s ease-in forwards; }
@keyframes spiritpeek { from { transform: translateX(700px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spirithappy { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
@keyframes spiritout { to { transform: translateX(700px) scale(.6); opacity: 0; } }
.catch-star { position: absolute; right: 640px; bottom: 150px; width: 190px; height: auto; z-index: 31; }
.catch-star.pulse { animation: starpulse 1s ease-in-out infinite; filter: drop-shadow(0 0 30px #fff3a0); pointer-events: auto; }
@keyframes starpulse { 0%,100% { scale: 1; rotate: -6deg; } 50% { scale: 1.25; rotate: 6deg; } }
.grulu-dash { position: absolute; bottom: 150px; height: 420px; width: auto; z-index: 28; left: -40%; transition: left 1.3s cubic-bezier(.3,.7,.3,1); }
@keyframes dash { from { left: 110%; } to { left: -30%; } }
.grulu-cameo { position: absolute; left: 700px; bottom: 130px; height: 400px; width: auto; z-index: 29; animation: cameo .6s ease-out both; }
.grulu-cameo.out { animation: spiritout .5s ease-in forwards; }
@keyframes cameo { from { transform: translateX(600px); opacity: 0; } to { transform: none; opacity: 1; } }
.reward-star { position: absolute; left: 50%; top: 46%; width: 420px; height: auto; z-index: 36; transform: translate(-50%, -50%); animation: rewardpop 1s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 40px #fff3a0); }
@keyframes rewardpop { from { transform: translate(-50%, -50%) scale(.1) rotate(-90deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }

/* ---------- 完成畫面 ---------- */
.complete-medal { position: absolute; left: 50%; top: 44%; width: 400px; height: auto; transform: translate(-50%, -50%); z-index: 12; animation: rewardpop 1s cubic-bezier(.2, 1.4, .4, 1) both, breathe 2s ease-in-out 1s infinite; filter: drop-shadow(0 0 40px #fff3a0); }
.complete-binbin { position: absolute; left: 200px; bottom: 40px; height: 520px; z-index: 12; animation: bob 1.6s ease-in-out infinite; }
.complete-fairy { right: 230px; top: 300px; height: 380px; }
.complete-row { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; gap: 18px; z-index: 12; }
.cr-dot { width: 110px; height: 110px; border-radius: 50%; background: var(--sun); border: 8px solid #fff6c0; display: flex; align-items: center; justify-content: center; font-size: 66px; font-weight: 900; box-shadow: 0 8px 0 rgba(0,0,0,.2); }
.complete-btns { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; gap: 40px; z-index: 30; }
.complete-btns .btn-pill { font-size: 56px; height: 124px; padding: 0 56px; }

/* ---------- 家長面板 ---------- */
.parent-panel { position: absolute; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.pp-box { width: 1200px; max-height: 980px; overflow-y: auto; background: #fffaf0; border: 10px solid var(--wood); border-radius: 40px; padding: 30px 44px; font-size: 30px; line-height: 1.5; -webkit-overflow-scrolling: touch; }
.pp-box h2 { margin: 0 0 6px; font-size: 48px; } .pp-box h3 { margin: 22px 0 6px; font-size: 36px; border-top: 3px dashed #d9c493; padding-top: 16px; }
.pp-note { margin: 4px 0; color: #7a6540; font-size: 26px; } .pp-warn { color: #b3261e; font-weight: 800; font-size: 28px; } .pp-msg { min-height: 40px; color: #2e7d32; font-weight: 800; }
.pp-row { display: flex; align-items: center; gap: 16px; margin: 10px 0; flex-wrap: wrap; } .pp-row > span { min-width: 220px; font-weight: 800; }
.pp-btn { font: inherit; font-size: 30px; font-weight: 800; padding: 12px 30px; border-radius: 30px; border: 5px solid var(--wood); background: var(--paper); color: var(--brown); cursor: pointer; }
.pp-btn.danger { background: #fde2e0; border-color: #c94444; color: #8a1f1a; } .pp-btn.close { margin-top: 20px; background: #dff0c8; border-color: var(--leaf-dark); }
.pp-ta { width: 100%; height: 190px; font-size: 22px; border: 4px solid var(--wood); border-radius: 20px; padding: 12px; font-family: monospace; }

/* ---------- 開場歌 ---------- */
.intro-head { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 14px 70px; background: linear-gradient(var(--paper), var(--paper-2)); border: 10px solid var(--wood); border-radius: 60px; box-shadow: 0 12px 0 rgba(107,63,29,.28); z-index: 10; }
.ih-zh { font-size: 70px; font-weight: 900; letter-spacing: 8px; }
.lyric-box { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 30; max-width: 1560px; padding: 22px 70px; background: rgba(251,241,214,.96); border: 10px solid var(--wood); border-radius: 70px; box-shadow: 0 12px 0 rgba(107,63,29,.3); }
.lyric-line { font-size: 92px; font-weight: 900; letter-spacing: 6px; text-align: center; white-space: nowrap; color: var(--brown); }
.lyric-line.pop { animation: lyricpop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes lyricpop { from { transform: scale(.85) translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.intro-dots { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; gap: 14px; z-index: 30; }
.idot { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.55); border: 4px solid rgba(255,255,255,.85); }
.idot.on { background: var(--sun); border-color: #fff6c0; }
.intro-skip { position: absolute; left: 40px; top: 36px; height: 112px; padding: 0 44px; font-size: 52px; letter-spacing: 3px; z-index: 40; gap: 10px; }
.intro-preview { position: absolute; right: 180px; top: 62px; z-index: 40; font-size: 30px; font-weight: 800; color: #fff; background: rgba(0,0,0,.4); border-radius: 30px; padding: 8px 24px; }

/* ---------- 點一下繼續／雙語字幕 ---------- */
.next-btn { position: absolute; right: 60px; bottom: 190px; z-index: 55; display: flex; align-items: center; gap: 18px; padding: 14px 24px 14px 44px; border-radius: 80px; background: linear-gradient(#8fd45a, #52a63a); border: 8px solid rgba(255,255,255,.65); box-shadow: 0 12px 0 rgba(0,0,0,.25), inset 0 6px 0 rgba(255,255,255,.35); color: #fff; animation: nextpulse 1.2s ease-in-out infinite; cursor: pointer; }
.next-btn.pressed { scale: .94; }
.nb-tx { font-size: 52px; font-weight: 900; letter-spacing: 4px; text-shadow: 0 4px 0 rgba(0,0,0,.22); }
.nb-ic { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; }
.nb-ic svg { width: 52px; height: 52px; display: block; }
@keyframes nextpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.cap-sub { font-size: 38px; font-weight: 700; letter-spacing: 3px; color: #8a6a3c; margin-top: 4px; }
.wc-zh { font-size: 64px; font-weight: 900; letter-spacing: 8px; color: #8a6a3c; margin-top: 2px; }

/* ---------- 圖鑑：放大卡＋錄音 ---------- */
.dex-hint { position: absolute; left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); z-index: 11; font-size: 34px; font-weight: 800; color: #fff; background: rgba(60,40,20,.55); border-radius: 40px; padding: 8px 34px; letter-spacing: 2px; }
.dex-detail { position: absolute; inset: 0; z-index: 120; }
.dd-shade { position: absolute; inset: 0; background: rgba(40,25,10,.66); }
.dex-detail .dcard.big { top: 41%; height: 690px; }
.dex-detail .dcard.big .dc-art { height: 290px; }
.dex-detail .dcard.big .dc-img { max-height: 280px; }
.dd-status { position: absolute; left: 50%; bottom: 178px; transform: translateX(-50%); z-index: 125; max-width: 1500px; white-space: nowrap; padding: 10px 46px; font-size: 42px; font-weight: 800; color: var(--brown); background: var(--paper); border: 6px solid var(--wood); border-radius: 50px; box-shadow: 0 8px 0 rgba(107,63,29,.28); }
.dd-row { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 125; display: flex; gap: 28px; }
.dd-btn { white-space: nowrap; flex: none; display: flex; align-items: center; gap: 16px; height: 120px; padding: 0 44px 0 28px; border-radius: 70px; font-size: 44px; font-weight: 900; letter-spacing: 3px; color: #fff; border: 8px solid rgba(255,255,255,.6); box-shadow: 0 10px 0 rgba(0,0,0,.28), inset 0 6px 0 rgba(255,255,255,.3); text-shadow: 0 3px 0 rgba(0,0,0,.2); cursor: pointer; }
.dd-ic { width: 64px; height: 64px; display: block; } .dd-ic svg { width: 100%; height: 100%; display: block; }
.dd-listen { background: linear-gradient(#6fb8f0, #3b84c9); }
.dd-rec { background: linear-gradient(#f28a7f, #d9453b); }
.dd-rec.on { animation: recpulse .9s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { box-shadow: 0 10px 0 rgba(0,0,0,.28), 0 0 0 0 rgba(255,80,60,.0); } 50% { box-shadow: 0 10px 0 rgba(0,0,0,.28), 0 0 50px 22px rgba(255,80,60,.75); } }
.dd-mine { background: linear-gradient(#ffe36a, #f2b52b); color: #7a4a10; text-shadow: 0 3px 0 rgba(255,255,255,.4); }
.dd-btn.dis { opacity: .4; pointer-events: none; }
.dd-close { right: 40px; top: 36px; z-index: 130; background: var(--paper); border: 8px solid var(--wood); color: var(--brown); font-size: 64px; font-weight: 900; box-shadow: 0 8px 0 rgba(0,0,0,.25); }

/* ---------- 認識夥伴／咕嚕嚕劇情／再聽一次 ---------- */
.name-tag { display: none; position: absolute; z-index: 21; padding: 6px 30px; font-size: 42px; font-weight: 900; letter-spacing: 3px; color: var(--brown); background: var(--paper); border: 6px solid var(--wood); border-radius: 50px; box-shadow: 0 8px 0 rgba(107,63,29,.28); pointer-events: none; white-space: nowrap; }
.tag-binbin { left: 70px; top: 610px; }
.tag-fairy { left: 330px; top: 380px; }
.name-tag.pop { display: block; animation: tagpop .8s ease-in-out infinite; background: #fff3b0; z-index: 56; font-size: 54px; }
@keyframes tagpop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.stolen-a { left: 52%; top: 36%; z-index: 29; animation: bob 1.4s ease-in-out infinite; pointer-events: none; transition: left 1.4s ease-in; }
.speech { position: absolute; left: 62%; top: 22%; z-index: 30; padding: 14px 40px; font-size: 52px; font-weight: 900; color: #5b2f86; background: #fff; border: 7px solid #8a5fb8; border-radius: 50px; box-shadow: 0 8px 0 rgba(0,0,0,.2); animation: wcpop .4s cubic-bezier(.2,1.4,.4,1) both; white-space: nowrap; }
.wc-replay { position: absolute; left: 28px; top: 28px; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 10px; border-radius: 40px; background: linear-gradient(#6fb8f0, #3b84c9); border: 7px solid rgba(255,255,255,.65); box-shadow: 0 8px 0 rgba(0,0,0,.25), inset 0 5px 0 rgba(255,255,255,.3); color: #fff; font-size: 30px; font-weight: 900; letter-spacing: 1px; cursor: pointer; }
.wc-replay svg { width: 72px; height: 72px; display: block; }
.dc-listen { position: absolute; right: 18px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 24px 8px 12px; border-radius: 50px; background: linear-gradient(#6fb8f0, #3b84c9); border: 5px solid rgba(255,255,255,.7); box-shadow: 0 6px 0 rgba(0,0,0,.25); color: #fff; font-size: 30px; font-weight: 900; animation: nextpulse 1.4s ease-in-out infinite; pointer-events: none; }
.dc-lic { width: 46px; height: 46px; display: block; } .dc-lic svg { width: 100%; height: 100%; display: block; }

/* ---------- 精靈蛋／精華／營地 ---------- */
.egg { position: absolute; width: 170px; height: 212px; z-index: 32; transform-origin: 50% 90%; }
.egg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.egg-ready { animation: eggready 1s ease-in-out infinite; filter: drop-shadow(0 0 24px #fff3a0); }
@keyframes eggready { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
.egg-done { filter: drop-shadow(0 0 40px #fff3a0) brightness(1.15); }
.egg-hint { position: absolute; left: 280px; top: 580px; z-index: 33; padding: 8px 30px; font-size: 40px; font-weight: 900; color: var(--brown); background: var(--paper); border: 6px solid var(--wood); border-radius: 40px; box-shadow: 0 8px 0 rgba(107,63,29,.28); white-space: nowrap; pointer-events: none; animation: nextpulse 1.2s ease-in-out infinite; }
.catch-flash { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: radial-gradient(#fff, rgba(255,245,170,.8) 50%, transparent 70%); animation: cflash .7s ease-out forwards; }
@keyframes cflash { to { transform: scale(9); opacity: 0; } }
.game-binbin.hop { animation: bob .5s ease-in-out 3; }
.essence-fly { position: absolute; width: 150px; height: 188px; z-index: 50; }
.essence-fly svg { width: 100%; height: 100%; display: block; }
.reward-star.out { animation: spiritout .5s ease-in forwards; }

.essence-hud { position: absolute; left: 180px; top: 40px; z-index: 41; height: 104px; display: flex; align-items: center; gap: 8px; padding: 0 28px 0 14px; background: var(--paper); border: 7px solid var(--wood); border-radius: 60px; box-shadow: 0 8px 0 rgba(107,63,29,.28); font-size: 54px; font-weight: 900; color: var(--brown); pointer-events: none; }
.essence-hud .eh-ic { width: 64px; height: 80px; display: block; } .essence-hud .eh-ic svg { width: 100%; height: 100%; display: block; }
.essence-hud .eh-key { width: 100px; height: 54px; margin-left: 10px; display: none; } .essence-hud .eh-key svg { width: 100%; height: 100%; display: block; }
.essence-hud.bump { animation: tagpop .5s ease-in-out 2; }

.scene-camp .camp-sign { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 20; padding: 8px 70px 10px; text-align: center; background: linear-gradient(var(--paper), var(--paper-2)); border: 9px solid var(--wood); border-radius: 56px; box-shadow: 0 10px 0 rgba(107,63,29,.3); }
.camp-sign .cs-zh { font-size: 70px; font-weight: 900; letter-spacing: 8px; color: var(--brown); line-height: 1.15; }
.camp-sign .cs-en { font-size: 30px; font-weight: 800; color: #8a6a3c; letter-spacing: 3px; }
.camp-prog { position: absolute; left: 50%; top: 186px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px 26px; background: rgba(255,248,224,.92); border: 6px solid var(--wood); border-radius: 50px; box-shadow: 0 6px 0 rgba(107,63,29,.25); font-size: 30px; font-weight: 800; color: var(--brown); white-space: nowrap; }
.camp-prog .pg-slot { width: 46px; height: 58px; opacity: .28; filter: grayscale(1); } .camp-prog .pg-slot svg { width: 100%; height: 100%; display: block; }
.camp-prog .pg-slot.on { opacity: 1; filter: none; }
.camp-prog .pg-chest { width: 82px; height: auto; margin-left: 6px; }
.camp-fairy { left: 90px; top: 300px; height: 290px; }
.camp-spirit { position: absolute; z-index: 15; height: 330px; transform: translate(-50%, -100%); transition: left 3.2s ease-in-out, top 3.2s ease-in-out; cursor: pointer; }
.camp-spirit img, .camp-spirit .ph { height: 100%; width: auto; display: block; filter: drop-shadow(0 12px 10px rgba(0,0,0,.28)); transform-origin: 50% 100%; transition: transform .5s; }
.camp-spirit .cs-in { height: 100%; animation: hop 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.camp-spirit.flip .cs-in { transform: scaleX(-1); animation: none; }
.camp-spirit.eat .cs-in { animation: eathop .5s ease-in-out 3; }
@keyframes eathop { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-50px) scale(1.12); } }
.camp-spirit .cs-lv { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); padding: 2px 18px; font-size: 28px; font-weight: 900; color: #fff; background: #e8803a; border: 4px solid #fff; border-radius: 30px; white-space: nowrap; }
.camp-egg { position: absolute; z-index: 15; width: 190px; height: 238px; transform: translate(-50%, -100%); cursor: pointer; animation: eggready 1.2s ease-in-out infinite; filter: drop-shadow(0 0 22px #fff3a0); }
.camp-egg svg { width: 100%; height: 100%; display: block; }
.camp-chest { position: absolute; left: 50%; top: 66%; z-index: 22; width: 330px; height: auto; transform: translateX(-50%); animation: bob 1.4s ease-in-out infinite; filter: drop-shadow(0 0 30px #fff3a0); cursor: pointer; }
.camp-key { position: absolute; left: 50%; top: 40%; z-index: 40; width: 360px; transform: translateX(-50%); animation: rewardpop 1s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 36px #fff3a0); }
.camp-key svg { width: 100%; height: auto; display: block; }
.camp-bubble { position: absolute; z-index: 30; padding: 10px 36px; font-size: 44px; font-weight: 900; color: var(--brown); background: #fff; border: 6px solid var(--wood); border-radius: 50px; box-shadow: 0 8px 0 rgba(107,63,29,.25); white-space: nowrap; transform: translateX(-50%); animation: bubblepop .45s cubic-bezier(.2,1.5,.4,1) both; pointer-events: none; }

/* ---------- 出發港口／探險裝備屋 ---------- */
.port-card { position: absolute; top: 56%; transform: translate(-50%, -50%); z-index: 12; width: 600px; height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(var(--paper), var(--paper-2)); border: 14px solid var(--wood); border-radius: 80px; box-shadow: 0 18px 0 rgba(107,63,29,.32); cursor: pointer; }
.port-card.pressed { transform: translate(-50%, -50%) scale(.96); }
.pc-icon { height: 400px; width: 100%; display: flex; align-items: center; justify-content: center; }
.pc-egg { height: 360px; width: 290px; animation: eggready 1.4s ease-in-out infinite; } .pc-egg svg { width: 100%; height: 100%; display: block; }
.pc-bag { height: 340px; width: auto; filter: drop-shadow(0 12px 10px rgba(0,0,0,.25)); }
.pc-zh { font-size: 84px; font-weight: 900; letter-spacing: 6px; color: var(--brown); line-height: 1.1; }
.pc-en { font-size: 44px; font-weight: 800; color: #8a6a3c; letter-spacing: 2px; }
.port-card.notify::after { content: '！'; position: absolute; right: -26px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: #ff7a5c; color: #fff; border: 8px solid #fff; font-size: 70px; font-weight: 900; line-height: 84px; text-align: center; animation: nextpulse 1s ease-in-out infinite; }
.port-binbin { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); height: 520px; width: auto; z-index: 14; pointer-events: none; }
.port-fairy { left: 50%; top: 250px; margin-left: -110px; height: 240px; z-index: 22; }

.pack-board { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); z-index: 30; display: flex; gap: 22px; padding: 14px 34px; background: linear-gradient(var(--paper), var(--paper-2)); border: 9px solid var(--wood); border-radius: 60px; box-shadow: 0 10px 0 rgba(107,63,29,.3); }
.pb-slot { width: 120px; height: 120px; border-radius: 50%; background: rgba(138,106,60,.18); border: 6px dashed rgba(138,106,60,.5); display: flex; align-items: center; justify-content: center; }
.pb-slot.on { background: #fff6d6; border: 6px solid #f2b52b; animation: tagpop .6s ease-in-out 2; }
.pb-ic { max-width: 92px; max-height: 92px; width: auto; height: auto; }
.pack-binbin { position: absolute; left: 60px; bottom: 30px; height: 580px; z-index: 12; pointer-events: none; }
.pack-binbin img { height: 100%; width: auto; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
.pack-binbin.hop { animation: bob .5s ease-in-out 3; }
.pack-bag { position: absolute; left: 400px; bottom: 60px; height: 420px; width: auto; z-index: 13; filter: drop-shadow(0 12px 10px rgba(0,0,0,.28)); }
.pack-bag.bounce { animation: bagbounce .5s ease-out; }
@keyframes bagbounce { 0% { transform: scale(1); } 35% { transform: scale(1.12, .9); } 70% { transform: scale(.95, 1.06); } 100% { transform: scale(1); } }
.pack-fairy { left: 60px; top: 150px; height: 260px; }
.gear-item { position: absolute; transform: translate(-50%, -100%); z-index: 16; height: 250px; display: flex; align-items: flex-end; justify-content: center; animation: peek 2.8s ease-in-out infinite; cursor: pointer; padding: 10px 14px; }
.gear-item .gi-img { max-height: 230px; max-width: 300px; width: auto; height: auto; filter: drop-shadow(0 10px 8px rgba(0,0,0,.3)); pointer-events: none; }
.gear-item.pressed { scale: .93; }
.gear-item.glow { animation: peek 1.2s ease-in-out infinite, glow 1s ease-in-out infinite; border-radius: 60px; }
.gear-item.shake { animation: shake .5s ease-in-out; }
.gear-item.fade { opacity: 0; scale: .5; transition: opacity .5s, scale .5s; pointer-events: none; }
.pack-badge { position: absolute; left: 50%; top: 44%; width: 460px; height: auto; z-index: 36; transform: translate(-50%, -50%); animation: rewardpop 1s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 40px #fff3a0); }
.again-btn { position: absolute; right: 540px; bottom: 190px; z-index: 55; width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#6fb8f0, #3b84c9); border: 8px solid rgba(255,255,255,.65); box-shadow: 0 12px 0 rgba(0,0,0,.25), inset 0 6px 0 rgba(255,255,255,.35); padding: 24px; cursor: pointer; }
.again-btn svg { width: 100%; height: 100%; display: block; }
.pack-bag.closed { left: 440px; }

.gear-item.dragging { animation: none; z-index: 60; scale: 1.15; cursor: grabbing; touch-action: none; filter: drop-shadow(0 18px 14px rgba(0,0,0,.35)); }
.gear-item { touch-action: none; }
.pack-bag.ready { filter: drop-shadow(0 0 40px #fff3a0) drop-shadow(0 12px 10px rgba(0,0,0,.28)); scale: 1.06; }

.boss-hp { position: absolute; right: 70px; top: 40px; z-index: 35; font-size: 84px; line-height: 1; letter-spacing: 8px; text-shadow: 0 5px 0 rgba(0,0,0,.2); }
.boss-hp span { color: #cfcfcf; }
.boss-hp span.on { color: #e0524a; }

/* ---------- 寶可夢風圖鑑卡 ---------- */
.dcard { --tc: #5aa04b; background: linear-gradient(#fffaf0, #fbefd0); border-color: var(--tc); box-shadow: 0 12px 0 rgba(107,63,29,.3), inset 0 0 0 5px #fff6dc; }
.dcard.locked { --tc: #b9a888; }
.dc-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.dc-lv { font-size: 30px; font-weight: 900; color: #fff; background: var(--tc); border-radius: 30px; padding: 0 18px; line-height: 1.35; }
.dcard.big .dc-lv { font-size: 42px; padding: 2px 26px; }
.dc-art { border-radius: 28px; background: radial-gradient(circle at 50% 70%, rgba(255,255,255,.95), color-mix(in srgb, var(--tc) 28%, #fff) 75%); border: 4px solid color-mix(in srgb, var(--tc) 55%, #fff); }
.dc-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.dc-stars { display: inline-flex; gap: 2px; } .dc-stars svg { width: 38px; height: 38px; display: block; }
.dcard.big .dc-stars svg { width: 56px; height: 56px; }
.dc-type { background: color-mix(in srgb, var(--tc) 18%, #fff); color: var(--tc); }
.dc-skill { margin-top: 12px; width: 100%; text-align: left; font-size: 32px; font-weight: 800; color: #5b3a12; background: rgba(255,255,255,.7); border: 3px dashed var(--tc); border-radius: 18px; padding: 6px 18px; }
.dc-skill b { background: var(--tc); color: #fff; border-radius: 12px; padding: 0 12px; margin-right: 12px; font-size: 28px; }
.dcard.shiny { box-shadow: 0 12px 0 rgba(107,63,29,.3), 0 0 40px 10px rgba(255,214,70,.8), inset 0 0 0 5px #fff6dc; }
.dd-pics { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 125; display: flex; gap: 28px; }
.dd-row { bottom: 210px; left: auto; right: 60px; transform: none; flex-direction: column; }
.dd-pic { position: relative; width: 250px; height: 120px; border-radius: 70px; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 8px; color: #fff; font-size: 40px; font-weight: 900; border: 8px solid rgba(255,255,255,.7); box-shadow: 0 10px 0 rgba(0,0,0,.28); cursor: pointer; }
.dd-apple { background: linear-gradient(#ff8f84, #d9453b); } .dd-animal { background: linear-gradient(#7fd06a, #3f9a3a); }
.dd-pic-img { height: 96px; width: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); }
.dd-pic-sp svg { width: 46px; height: 46px; display: block; }
.dd-pic-tx { text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.dd-pic.hit { animation: wcpop .4s cubic-bezier(.2,1.4,.4,1); }
.dex-detail .dcard.big { top: 46%; height: 740px; padding: 14px 40px 20px; }
.dex-detail .dcard.big .dc-art { height: 220px; }
.dex-detail .dcard.big .dc-img { max-height: 210px; }
.dex-detail .dcard.big .dc-name { font-size: 58px; }
.dex-detail .dcard.big .dc-en { font-size: 34px; }
.dex-detail .dcard.big .dc-type { font-size: 32px; margin-top: 6px; }
.dex-detail .dcard.big .dc-stars svg { width: 46px; height: 46px; }
.dex-detail .dcard.big .dc-skill { font-size: 28px; margin-top: 8px; }
.dex-detail .dcard.big .dc-intro { font-size: 27px; margin-top: 8px; line-height: 1.4; }
.dd-pic { width: auto; min-width: 250px; white-space: nowrap; padding-right: 30px; }
.dd-status { bottom: 190px; }

.map-binbin { pointer-events: auto; cursor: pointer; }
.map-binbin.hop { animation: bbhop .5s ease-out; }
@keyframes bbhop { 0%,100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-34px); } }

.replay-btn { position: absolute; left: 48px; top: 172px; z-index: 30; width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(#6fb8f0, #3b84c9); border: 8px solid rgba(255,255,255,.75); box-shadow: 0 8px 0 rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.replay-btn svg { width: 62px; height: 62px; display: block; }
.replay-btn.pressed { transform: translateY(4px); }
.pp-cap { margin: 0 14px; font-weight: 800; }

.tile .tile-pic { height: 80%; width: auto; max-width: 84%; display: block; margin: auto; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); }
.tile { display: flex; align-items: center; justify-content: center; }
.essence-hud.go { cursor: pointer; pointer-events: auto; }
.essence-hud.go.has { animation: nextpulse 1.4s ease-in-out infinite; }

.map-label.hut-label { transform: translate(-50%, -50%) scale(.78); }
.map-binbin { left: 47.5%; top: 61%; }
.words-btn { right: 40px; top: 172px; z-index: 40; flex-direction: column; gap: 0; background: linear-gradient(#ffb25c, #e8803a) !important; border: 8px solid rgba(255,255,255,.75); }
.words-btn svg { width: 56px; height: 56px; display: block; }
.words-btn span { font-size: 26px; font-weight: 900; color: #fff; line-height: 1; margin-top: -4px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.words-title { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 20; }
.words-grid { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); width: 1680px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 34px; z-index: 20; }
.word-card { height: 360px; border-radius: 44px; background: linear-gradient(#fffaf0, #fbefd0); border: 10px solid var(--wood); box-shadow: 0 12px 0 rgba(107,63,29,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; }
.word-card .wc-pic { height: 190px; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.18)); }
.word-card .wd-en { font-size: 60px; font-weight: 900; color: var(--brown); letter-spacing: 2px; }
.word-card .wd-zh { font-size: 38px; font-weight: 800; color: #8a6a3c; }
.word-card .wd-spk { position: absolute; right: 14px; top: 14px; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(#6fb8f0, #3b84c9); display: flex; align-items: center; justify-content: center; border: 4px solid #fff; }
.word-card .wd-spk svg { width: 34px; height: 34px; }
.word-card.locked { opacity: .6; filter: grayscale(.5); }
.word-card .wd-q { font-size: 170px; font-weight: 900; color: rgba(138,106,60,.4); line-height: 1; }
.word-card.hit { animation: wcpop .4s cubic-bezier(.2,1.4,.4,1); }
.map-label.hut-label { transform: translate(-50%, -50%) scale(.62); }
.map-binbin { top: 64%; }
.boss-hp { right: auto; left: 50%; top: 150px; transform: translateX(-50%); font-size: 70px; }

.sc-art { display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.sc-art .sc-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 6px rgba(0,0,0,.25)); }
.sc-art .sc-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.gear-item .sc-art.gi-img { width: 230px; height: 230px; }
.pack-bag.sc-bag { width: 400px; height: 400px; bottom: 70px; }
.pb-ic.sc-art { width: 90px; height: 90px; }
.pc-bag.sc-art { width: 330px; height: 330px; }
.word-card .wc-pic.sc-art { width: 190px; height: 190px; }
.port-card .pc-icon { display: flex; align-items: center; justify-content: center; }
/* 大卡片：高度依內容自動長，介紹和按鈕都在卡片裡面 */
.dex-detail .dcard.big { height: auto; min-height: 0; top: 43%; padding: 14px 40px 24px; box-sizing: border-box; }
.dex-detail .dcard.big .dc-art { height: 200px; flex: none; }
.dex-detail .dcard.big .dc-img { max-height: 190px; }
.dex-detail .dcard.big .dc-intro { font-size: 26px; }
.dex-detail .dcard.big .dc-listen { position: static; align-self: center; margin-top: 12px; }
.dex-detail .dcard.big { top: 41%; padding-bottom: 18px; }
.dex-detail .dcard.big .dc-art { height: 150px; }
.dex-detail .dcard.big .dc-img { max-height: 140px; }
.dex-detail .dcard.big .dc-name { font-size: 52px; }
.dex-detail .dcard.big .dc-listen { margin-top: 8px; }
.dex-detail .dd-status { bottom: 172px; }
/* 裝備屋遊戲：字幕放在上方（進度板下面），不擋住下面的道具和袋子 */
#stage.cap-top .caption { bottom: auto; top: 215px; max-width: 1200px; transform: translate(-50%, -30px); }
#stage.cap-top .caption.show { transform: translate(-50%, 0); }

.gp-dot.lk { opacity: .45; background: #d9ccb0; }
.stone.sealed { filter: grayscale(.7) brightness(.85); opacity: .85; }
.stone.sealed .stone-letter { opacity: .45; }
.stone-lock { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 0 rgba(255,255,255,.6)); pointer-events: none; }
.stone-lock svg { width: 100%; height: 100%; display: block; }
/* 收服後跳出的大卡片（遊戲裡）：高度依內容自動長，介紹和按鈕都在卡片裡 */
.dcard.big { height: auto; top: 44%; padding: 14px 40px 22px; box-sizing: border-box; }
.dcard.big .dc-art { height: 190px; flex: none; }
.dcard.big .dc-img { max-height: 180px; }
.dcard.big .dc-name { font-size: 56px; }
.dcard.big .dc-en { font-size: 34px; }
.dcard.big .dc-intro { font-size: 26px; margin-top: 8px; line-height: 1.4; }
.dcard.big .dc-listen { position: static; align-self: center; margin-top: 10px; }
/* 完成時獎章放在袋子右邊、字幕下面，不跟上方字幕重疊 */
.pack-badge { left: 66%; top: 68%; width: 400px; }

.tap-tip { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); z-index: 50; padding: 16px 56px; font-size: 60px; font-weight: 900; color: #fff; background: linear-gradient(#7fd06a, #3f9a3a); border: 8px solid rgba(255,255,255,.75); border-radius: 80px; box-shadow: 0 12px 0 rgba(30,90,30,.35); animation: nextpulse 1s ease-in-out infinite; pointer-events: none; white-space: nowrap; }

/* 勳章立體感：多層陰影＋高光 */
.pack-badge { filter: drop-shadow(0 4px 0 rgba(120,80,20,.55)) drop-shadow(0 14px 14px rgba(60,40,10,.45)) drop-shadow(0 0 18px rgba(255,230,140,.7)) saturate(1.15) contrast(1.05); animation: badgefloat 3s ease-in-out infinite; }
@keyframes badgefloat { 0%,100% { transform: translate(-50%,-50%) rotate(-2deg); } 50% { transform: translate(-50%,-54%) rotate(2deg); } }