/* ================= 阿龜夾娃娃 · 樣式 =================
   沿用官網色票／字型。手機優先、直向滿版。 */
:root{
  --moss:#7C9A63; --moss-deep:#5E7A48; --cream:#FBF6EC; --cream-2:#F1E9D8;
  --coral:#E8825E; --ink:#4C453A; --ink-soft:#7A7161; --pink:#F0B4AC;
  --card:#fff; --shadow:0 10px 30px -12px rgba(60,50,30,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans TC",system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(120% 80% at 50% 0%,#FFFDF7 0%,var(--cream) 55%,#F3EBD9 100%);
  min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.7;
  overscroll-behavior-y:contain;
}
.en{font-family:"Baloo 2","Noto Sans TC",sans-serif}
.hand{font-family:"Caveat","Noto Sans TC",cursive}

/* 版心：手機優先，桌機置中收窄 */
.wrap{max-width:460px;margin:0 auto;padding:0 16px;position:relative}

/* ---- 頂部列 ---- */
.g-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:460px;margin:0 auto}
.g-top .logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.g-top .logo .ava{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--cream-2);display:grid;place-items:center;box-shadow:var(--shadow)}
.g-top .logo .ava img{width:100%;height:100%;object-fit:cover}
.g-top .logo b{font-family:"Baloo 2";font-weight:700;font-size:1.05rem}
.g-top .back{font-size:.86rem;color:var(--moss-deep);text-decoration:none;font-weight:700;background:#fff;border:1px solid #E7DFCE;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow)}

/* ---- 標題 ---- */
.g-head{text-align:center;margin:6px 0 10px}
.g-head h1{font-family:"Baloo 2";font-weight:800;font-size:2rem;margin:0;color:var(--moss-deep);letter-spacing:.02em}
.g-head .sub{font-family:"Caveat";font-size:1.15rem;color:var(--coral);margin-top:-2px}

/* ---- 幣 / 次數列 ---- */
.g-stats{display:flex;gap:10px;max-width:460px;margin:8px auto;padding:0 16px}
.g-stats .chip{flex:1;background:#fff;border-radius:16px;padding:10px 8px;text-align:center;box-shadow:var(--shadow);border:1px solid #EFE7D6}
.g-stats .chip b{display:block;font-family:"Baloo 2";font-size:1.35rem;color:var(--moss-deep);line-height:1.1}
.g-stats .chip span{font-size:.72rem;color:var(--ink-soft)}
.g-stats .chip.coin b{color:var(--coral)}

/* ---- 機台：用 machine-frame.jpg 當台身，疊上標題、Canvas 玩區、透明控制鈕 ---- */
.machine{max-width:420px;margin:4px auto 0;padding:0 12px}
.cab{position:relative;width:100%;aspect-ratio:760/1140;
  background:url('machine-frame.jpg') center/contain no-repeat;
  filter:drop-shadow(0 16px 30px rgba(120,100,70,.22))}
.cab .marquee{position:absolute;top:5.4%;left:50%;transform:translateX(-50%);
  font-family:"Baloo 2";font-weight:800;font-size:clamp(1rem,4.4vw,1.3rem);color:#C88A85;
  letter-spacing:.04em;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.7)}
/* Canvas 疊在玻璃展示櫃內部（如需微調，改這四個百分比） */
#clawCanvas{position:absolute;left:15%;top:16.5%;width:70%;height:50.5%;
  touch-action:none;background:transparent;display:block}
/* 透明控制鈕，疊在台身上畫好的 ◀ ▶ 與圓鈕上 */
.hit{position:absolute;border:none;background:transparent;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;border-radius:14px;transition:background .1s}
.hit:active{background:rgba(255,255,255,.25)}
.hit-left{left:22%;top:77%;width:13%;height:8.4%}
.hit-right{left:37%;top:77%;width:13%;height:8.4%}
.hit-drop{left:59.5%;top:75.6%;width:17.5%;height:12%}
/* 第二版才開放「飯粒加夾」，先放一顆 disabled 的小提示 */
.rice-note{max-width:420px;margin:8px auto 0;padding:0 12px;text-align:center}
.rice-note button{font-family:"Noto Sans TC";font-weight:700;font-size:.78rem;color:var(--ink-soft);
  background:#fff;border:2px dashed #D8CDB6;border-radius:999px;padding:7px 16px;cursor:not-allowed;opacity:.8}
.hint{text-align:center;font-size:.8rem;color:var(--ink-soft);margin:10px 0 2px}

/* ---- 圖鑑 ---- */
.dex{max-width:460px;margin:22px auto;padding:0 16px}
.dex h2{font-family:"Baloo 2";font-weight:800;font-size:1.25rem;color:var(--moss-deep);margin:0 0 4px;text-align:center}
.dex .dex-sub{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-bottom:12px}
.dex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dex-cell{aspect-ratio:1;background:#fff;border-radius:16px;box-shadow:var(--shadow);border:1px solid #EFE7D6;
  display:grid;place-items:center;font-size:2rem;position:relative;overflow:hidden}
.dex-cell .nm{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:.6rem;color:var(--ink-soft)}
.dex-cell.locked{filter:grayscale(1);opacity:.35}
.dex-cell.locked .emo{filter:blur(1px)}

/* ---- 領碼 CTA ---- */
.redeem{max-width:460px;margin:22px auto;padding:22px 18px;text-align:center;
  background:linear-gradient(180deg,#FFF7EF,#FCEEE4);border:2px solid #F6D9C9;border-radius:var(--radius);box-shadow:var(--shadow)}
.redeem h2{font-family:"Baloo 2";font-weight:800;font-size:1.3rem;color:var(--coral);margin:0 0 6px}
.redeem p{font-size:.9rem;color:var(--ink-soft);margin:6px 0}
.redeem .prog{height:12px;background:#F1E3D6;border-radius:999px;overflow:hidden;margin:12px 0 6px}
.redeem .prog>i{display:block;height:100%;background:linear-gradient(90deg,#F0A583,var(--coral));width:0;transition:width .6s}
.code-box{margin:12px 0;background:#fff;border:2px dashed var(--coral);border-radius:14px;padding:14px;font-family:"Baloo 2";font-size:1.5rem;letter-spacing:.14em;color:var(--moss-deep);word-break:break-all}
.cta{display:inline-block;margin-top:8px;background:#06C755;color:#fff;font-weight:800;text-decoration:none;
  padding:13px 26px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(6,199,85,.6);font-size:1.02rem}
.cta.moss{background:var(--moss-deep);box-shadow:0 10px 22px -8px rgba(94,122,72,.6)}

/* ---- 頁尾規則/聲明 ---- */
.g-foot{max-width:460px;margin:24px auto;padding:20px 18px;color:var(--ink-soft);font-size:.78rem;line-height:1.8}
.g-foot h3{font-size:.9rem;color:var(--ink);margin:0 0 6px}
.g-foot ul{margin:0 0 12px;padding-left:1.2em}
.g-foot .soc{display:flex;gap:12px;justify-content:center;margin:14px 0}
.g-foot .soc a{width:40px;height:40px;border-radius:50%;background:var(--moss);display:grid;place-items:center;color:#fff}
.g-foot .soc a svg{width:20px;height:20px}
.g-foot a{color:var(--moss-deep)}
.g-foot .copy{text-align:center;margin-top:10px}

/* ---- 中獎彈窗 ---- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(40,32,22,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex;animation:fade .25s}
.modal-card{background:#fff;border-radius:26px;max-width:340px;width:100%;padding:26px 22px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.3);animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.modal-card .big{font-size:4.5rem;line-height:1;margin:4px 0}
.modal-card h3{font-family:"Baloo 2";font-size:1.5rem;color:var(--moss-deep);margin:8px 0 4px}
.modal-card p{color:var(--ink-soft);margin:4px 0 14px}
.modal-card .reward{display:inline-flex;align-items:center;gap:8px;background:var(--cream-2);border-radius:999px;padding:8px 18px;font-family:"Baloo 2";font-weight:700;color:var(--coral);font-size:1.1rem;margin-bottom:10px}
.modal-card button{width:100%;background:linear-gradient(180deg,#8AAB6C,var(--moss-deep));color:#fff;border:none;font-family:"Baloo 2";font-weight:800;font-size:1.1rem;padding:12px;border-radius:16px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:60;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.modal.show,.modal-card{animation:none}}

/* 登入遮罩 */
.gate{position:fixed;inset:0;z-index:40;background:var(--cream);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.gate.show{display:flex}
.gate .big{font-size:4rem}
.gate h2{font-family:"Baloo 2";color:var(--moss-deep);margin:10px 0 4px}
.gate p{color:var(--ink-soft);max-width:300px;margin:4px 0 18px;font-size:.92rem}
.gate button{background:#06C755;color:#fff;border:none;font-weight:800;font-size:1.05rem;padding:13px 30px;border-radius:999px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(6,199,85,.6)}
.gate .demo{margin-top:14px;font-size:.82rem;color:var(--ink-soft);background:none;border:none;text-decoration:underline;box-shadow:none;padding:6px}

/* 移除娃娃機頁面所有按鈕的陰影 */
button, .cta, .g-top .back, .rice-note button { box-shadow: none !important; }
/* 移除所有卡片陰影 */
.g-stats .chip, .dex-cell, .redeem, .g-top .logo .ava, .modal-card { box-shadow: none !important; }
/* 移除機台落地陰影 */
.cab{filter:none}
/* 移除頁面大標題「阿龜夾娃娃」（機台招牌已有），並將整體位置上移 */
.g-head h1{display:none}
.g-top{padding-top:8px;padding-bottom:4px}
.g-head{margin:0 0 4px}
.g-stats{margin-top:2px}
/* 圖鑑稀有度徽章 */
.dex-cell .rar{position:absolute;top:4px;right:5px;font-family:"Baloo 2";font-weight:800;font-size:.52rem;padding:1px 5px;border-radius:999px;color:#fff;line-height:1.5}
.rar-N{background:#B7B09E}.rar-R{background:#7C9A63}.rar-SR{background:#E8825E}
.rar-SSR{background:linear-gradient(90deg,#E8825E,#C9A0DC)}
.dex-cell.locked .rar{display:none}
/* 圖鑑徽章圖片 */
.dex-cell .badge{width:94%;height:94%;object-fit:contain;display:block}
.dex-cell .nm{background:linear-gradient(180deg,rgba(251,246,236,0),rgba(251,246,236,.92) 40%);padding-top:6px}