/* 版面概念：手機殼置中，首頁管今天、蛋窩管世界；蠟筆紙感世界 + 浮動小白卡 */
:root {
  --bg: #F4EEE3;
  --paper: #FFFCF6;
  --surface: #F8F2E8;
  --surface-2: #F1E9DB;
  --ink: #3E3A39;
  --muted: #6E6866;
  --line: transparent;
  --coral: #F2A497; --yellow: #F6D27A; --sky: #A8D3E6; --green: #B9DAA5;
  --accent: #F2A497;
  --accent-ink: #3E3A39;
  --accent-text: #F2A497; /* 新風格陶粉（= --coral），取代舊紅 #C2664F（2026-10-08 Lysli） */
  --good: #4F7A43;
  --r-lg: 26px; --r-md: 20px;
  --font: "Huninn", "PingFang TC", system-ui, sans-serif;
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); font-family: var(--font); margin: 0; }
.wrap { display: flex; justify-content: center; padding-block: 18px; padding-inline: 16px; }
.phone {
  position: relative; width: 100%; max-width: 400px; min-height: 780px;
  background: var(--paper); border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(40, 28, 12, 0.45);
  display: flex; flex-direction: column;
}
.screen { flex: 1; overflow-y: auto; padding-bottom: 96px; }
.pad { padding-inline: 18px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 首頁 */
.hello { padding-top: 22px; }
.hello .date { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.03em; padding-right: calc(var(--pillw, 150px) + 4px); }
.hello h1 { font-size: 26px; font-weight: 800; margin-top: 2px; }
.streak { font-size: 13px; font-weight: 700; color: var(--accent-text); }
.maincard { margin-top: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.maincard .big { font-size: 32px; font-weight: 800; line-height: 1.1; }
.cta { display: flex; justify-content: center; align-items: center; min-height: 48px; border-radius: 13px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; width: 100%; }
.cta:active { transform: scale(0.98); }
.eggrow { margin-top: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.eggrow img { width: 44px; height: 44px; flex: none; }
.eggrow .grow { flex: 1; min-width: 0; }
.eggrow .lbl { font-size: 15px; font-weight: 700; }
.eggrow .sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.eggrow .arrow { color: var(--muted); font-size: 20px; flex: none; }
.lvl { margin-top: 14px; }
.lvl .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lvl .tag { font-size: 13px; font-weight: 800; color: var(--accent-text); }
.stag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--sky); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.lvl .left { font-size: 13px; font-weight: 600; color: var(--muted); }
.dayc { flex: 1; text-align: center; }
.dayc b { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.dayc i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 999px;
  font-style: normal; font-size: 14px; font-weight: 800; color: var(--muted);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-variant-numeric: tabular-nums; }
.dayc.done i { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.dayc.half i { background: linear-gradient(to top, var(--accent) 50%, var(--surface) 50%); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dayc.today i { color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.seg { position: sticky; bottom: 14px; z-index: 20; display: flex; gap: 4px; width: fit-content; margin: 18px auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px;
  box-shadow: 0 8px 28px -8px rgba(40,28,12,0.3); }
.seg button { border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 800; color: var(--muted); }
.seg button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.lvrws { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.lvrw { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; }
.lvrw img { width: 64px; height: 64px; object-fit: contain; }
.fwh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fwname { display: inline-block; background: var(--accent); color: var(--accent-ink); font-size: 18px; font-weight: 900; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.02em; }
.fwi { font-size: 15px; font-weight: 600; line-height: 1.6; margin-top: 6px; }
.fwrows { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fwrow { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.fwk { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 16px; }
.fwt { font-size: 16px; line-height: 1.35; }
.fwt b { font-weight: 800; }
.fwl { font-weight: 700; color: var(--accent-text); }
.fwd { font-size: 15px; font-weight: 600; line-height: 1.55; margin-top: 2px; }
.fwe { font-size: 14px; font-weight: 600; line-height: 1.55; margin-top: 3px; color: var(--muted); }
.qbox { background: var(--surface-2); border-radius: 13px; padding: 13px; font-size: 16px; font-weight: 600; line-height: 1.65; }
.chip2 { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 800; }
.crit { margin: 12px 0 0; padding: 0 0 0 2px; list-style: none; }
.crit li { font-size: 15px; font-weight: 600; padding-left: 22px; position: relative; margin-top: 6px; color: var(--ink); }
.crit li::before { content: "◎"; position: absolute; left: 0; color: var(--accent-text); font-weight: 800; }
textarea.ans { width: 100%; box-sizing: border-box; min-height: 150px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; padding: 12px; resize: vertical; }
textarea.ans:focus-visible { outline: 2px solid var(--accent); }
.score { font-size: 36px; font-weight: 800; }
.xplines { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 700; }
.task { display: flex; align-items: center; gap: 11px; padding: 12px 13px; width: 100%; text-align: left; }
.task + .task { border-top: 1px solid var(--line); }
.task .chk { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font-size: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; }
.task.done .chk { background: var(--good); color: #fff; box-shadow: none; }
.task .grow { flex: 1; min-width: 0; }
.task .t { font-size: 15px; font-weight: 700; }
.task.done .t { color: var(--muted); text-decoration: line-through; }
.task .c { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 1px; }
.task .pt { flex: none; font-size: 13px; font-weight: 800; color: var(--accent-text); }
.types { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.types span { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 6px 11px; }
.secnote { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* 蛋窩場景 */
.scenebox { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; max-height: 58vh; min-height: 400px; }
.scenein { position: relative; width: 100%; flex: none; aspect-ratio: 900 / 1233; }
.scenein > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nestEgg { position: absolute; left: 50%; bottom: 16%; width: 24%; transform: translateX(-50%); filter: drop-shadow(0 4px 10px rgba(50,40,20,0.3)); }
.nestEgg img { width: 100%; height: auto; display: block; }
.nestEgg:active { transform: translateX(-50%) scale(0.95); }
.scenetitle { position: absolute; left: 18px; top: 16px; }
.scenetitle h1 { color: #fff; font-size: 27px; font-weight: 800; text-shadow: 0 1px 10px rgba(40,60,80,0.5); }
.scenetitle p { color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 700; text-shadow: 0 1px 8px rgba(40,60,80,0.5); }
.floatcard { position: absolute; left: 14px; right: 14px; bottom: 12px; border-radius: 15px; padding: 11px 13px;
  background: rgba(255,253,248,0.93); backdrop-filter: blur(6px); box-shadow: 0 6px 24px -10px rgba(50,40,20,0.4);
  display: flex; align-items: center; gap: 12px; color: #221c15; }
.floatcard .grow { flex: 1; min-width: 0; }
.floatcard .txt { font-size: 13px; font-weight: 700; margin-top: 5px; color: #221c15; }
.floatcard .txt .muted2 { color: #786e5f; }
.swap { flex: none; background: #ba4f2e; color: #fffdf8; border-radius: 999px; padding: 9px 13px; font-size: 13px; font-weight: 800; }

/* 蛋窩三入口 */
.entr { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.entrow { padding: 13px 14px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.entrow .ico { font-size: 22px; flex: none; width: 28px; text-align: center; }
.entrow .grow { flex: 1; min-width: 0; }
.entrow .lbl { font-size: 15px; font-weight: 800; }
.entrow .sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.cnt { flex: none; min-width: 26px; text-align: center; background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 3px 8px; font-size: 13px; font-weight: 800; }
.cnt.soft { background: var(--surface-2); color: var(--muted); }
.preview { display: flex; gap: 6px; flex: none; }
.preview img, .preview .ph { width: 30px; height: 30px; border-radius: 999px; }
.preview .ph { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; font-size: 14px; color: var(--muted); }

/* 展開區（圖鑑 / 徽章） */
.panel { margin-top: 10px; padding: 14px; }
.panel h3 { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.dexgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dexcell { background: none; padding: 2px; text-align: center; }
.dexcell img { width: 46px; height: 46px; object-fit: contain; }
.dexcell .ph { width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 16px; }
.dexcell p { font-size: 13px; font-weight: 700; margin-top: 4px; }
.dexdetail { margin-top: 10px; background: var(--surface-2); border-radius: 13px; padding: 14px; text-align: center; }
.dexdetail img { width: 96px; height: 96px; }
.dexdetail .nm { font-size: 16px; font-weight: 800; margin-top: 4px; }
.dexdetail .lore { font-size: 15px; font-weight: 600; margin-top: 6px; color: var(--ink); }
.dexdetail .meta { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.badges .b { text-align: center; }
.badges img { width: 44px; height: 44px; }
.badges .off img { filter: grayscale(1); opacity: 0.4; }
.badges p { font-size: 13px; font-weight: 700; margin-top: 3px; color: var(--muted); }

/* Bottom sheet（蛋背包） */
.sheetveil { position: absolute; inset: 0; background: rgba(23,18,12,0.45); z-index: 40; border: 0; width: 100%; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surface);
  border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 16px 16px 22px; animation: up 0.22s ease; }
@keyframes up { from { transform: translateY(26px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet h2 { font-size: 17px; font-weight: 800; }
.sheet .hint { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.eggs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.egg { background: none; padding: 6px 2px; text-align: center; }
.egg img { width: 46px; height: 46px; }
.egg p { font-size: 13px; font-weight: 700; margin-top: 4px; }
.egg button { margin-top: 6px; width: 100%; border-radius: 999px; padding: 5px 0; font-size: 13px; font-weight: 800; background: var(--accent); color: var(--accent-ink); }
.sheet .close { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 16px; font-weight: 800; }
/* 意見回饋（2026-10-19）：共用 bottom sheet，蓋在文件視窗（#docov）與登入頁（#onb）上面 */
#fbveil { z-index: 90; }
#fbsheet { z-index: 91; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#fbsheet h2 { padding-right: 40px; }
#fbsheet .hint { font-size: 15px; line-height: 1.6; margin-top: 4px; }
.fbkinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fbkinds button { padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; }
.fbkinds button[aria-pressed="true"] { background: var(--sky); }
.fblabel { display: block; font-size: 13px; font-weight: 800; color: var(--muted); margin-top: 12px; }
#fb-msg, #fb-email { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); padding: 10px 12px; font: inherit; font-size: 16px; }
#fb-msg { min-height: 112px; resize: vertical; line-height: 1.55; }
#fb-email { min-height: 44px; }
.fbcount { text-align: right; font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fbnote { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fbact { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; }
#fbsheet .fbact .cta2 { margin: 0 !important; min-width: 96px; font-size: 15px; }   /* 全域 .cta2 用 !important 置中，這裡要靠右 */
#fbsheet .fbact .cta2[disabled] { opacity: .45; cursor: default; }
.fbdone { margin-top: 18px; font-size: 17px; font-weight: 800; text-align: center; }
.fblock { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--muted); text-align: right; line-height: 1.5; }
.linkbtn { display: inline; background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Bottom nav */
.phone:has(.screen.sub:not([hidden])) .nav { display: none !important; }
.phone:has(.screen.sub:not([hidden])) .back:not([hidden]) { display: grid; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 30;
  display: flex; gap: 10px; align-items: center; border: none; padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px -8px rgba(40,28,12,0.3); }
/* 蛋窩滿版：場景鋪到頁底，nav 浮在場景上 */
#scr-nest { padding-bottom: 0 !important; }
#scr-dex .card.panel { background: none; box-shadow: none; border: none; padding-inline: 2px; }
#scr-nest { background: #cfd8a3; }
#scr-nest .scenebox { position: absolute; inset: 0; max-height: none; min-height: 0; height: auto; }
#scr-nest .scenein { position: absolute; left: 0; right: 0; top: 0; bottom: 44px; width: auto; height: auto; aspect-ratio: auto; transform: none; }
#scr-nest .scenein > img.bg { object-fit: cover; object-position: 68.5% bottom; }
[hidden] { display: none !important; }
.slot { position: absolute; width: 13%; transform: translate(-50%, -50%); }
.slot > img { width: 100%; display: block; filter: drop-shadow(0 3px 8px rgba(50,40,20,0.3)); }
.slot .ph2 { display: grid; place-items: center; aspect-ratio: 1; border-radius: 999px;
  background: rgba(255,253,248,0.55); box-shadow: inset 0 0 0 2px rgba(120,100,70,0.5);
  font-size: 22px; font-weight: 800; color: #6b5c48; }
.slot.locked .ph2 { background: rgba(255,253,248,0.28); box-shadow: inset 0 0 0 2px rgba(120,100,70,0.3); font-size: 15px; }
.slot .prog2 { position: absolute; left: 50%; bottom: 102%; transform: translateX(-50%); width: 120%; text-align: center; }
.nestspot { position: absolute; transform: translate(-50%, -50%); }
.nestspot > img.nest { width: 100%; display: block; }
.nestspot .eggin { position: absolute; left: 50%; bottom: 34%; width: 38%; transform: translateX(-50%);
  filter: drop-shadow(0 3px 8px rgba(50,40,20,0.3)); }
.nestspot .eggin img { width: 100%; display: block; }
.nestspot .prog { position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%); width: 56%; text-align: center; }
.nestspot.locked > img.nest { filter: saturate(0.4) opacity(0.5); }
.nestspot .lock { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center;
  font-size: 13px; font-weight: 800; color: #fffdf8; text-shadow: 0 1px 6px rgba(40,30,15,0.7); }
.nav button { width: 54px; display: grid; place-items: center; gap: 0; background: none; padding-block: 0; }
.nav button span { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.02em; margin-top: -3px; }
.nav button[aria-current="true"] span { color: var(--ink); }
.nav button[aria-current="true"] { background: none; }
.nav button[aria-current="true"] img { width: 56px; height: 56px; }

.ribbon { position: absolute; right: -34px; bottom: 86px; z-index: 50; transform: rotate(-38deg); background: var(--ink); color: var(--paper);
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; padding: 4px 40px; opacity: 0.75; pointer-events: none; }
/* 常駐金幣欄（Pikmin 式）：右上角，點了直接進商店 */
.coinpill { position: absolute; right: 12px; top: 12px; z-index: 36; display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 14px -6px rgba(40,28,12,0.35); font-variant-numeric: tabular-nums; }
.coinpill:active { transform: scale(0.96); }
.back { position: absolute; left: 14px; top: 14px; z-index: 35; width: 44px; height: 44px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px -8px rgba(40,28,12,0.35);
  display: grid; place-items: center; font-size: 21px; font-weight: 800; color: var(--ink); }
.back:active { transform: scale(0.94); }
.nav button img { width: 46px; height: 46px; object-fit: contain; transition: width 0.15s, height 0.15s; filter: drop-shadow(0 2px 5px rgba(40,28,12,0.35)); }
.shopitem img.bigimg { width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto; }
.fic { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }
@keyframes dino-dance { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.08) translateY(-6px); } 50% { transform: rotate(10deg) scale(1.05) translateY(-10px); } 75% { transform: rotate(-6deg) scale(1.08) translateY(-4px); } 100% { transform: rotate(0) scale(1); } }
.dancing { animation: dino-dance 0.7s ease-in-out 2; transform-origin: 50% 85%; }
@keyframes egg-wiggle { 0%,100% { rotate: 0deg; } 20% { rotate: -7deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 2deg; } }
.wiggling { animation: egg-wiggle 0.5s ease-in-out; transform-origin: 50% 90%; }
.hrow { position: relative; display: inline-block; height: 11px; line-height: 0; }
.hrow img, .dexcell .hrow img { width: 11px; height: 11px; object-fit: contain; display: inline-block; }
.hrow .hfill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.hrow .hbase img { filter: grayscale(1) brightness(1.5); opacity: 0.45; }
.hrt { width: 11px; height: 11px; object-fit: contain; vertical-align: -1px; }
.hrt.off { filter: grayscale(1) brightness(1.5); opacity: 0.45; }
@keyframes dino-amble { 0% { transform: translateX(0); } 46% { transform: translateX(84px); } 50% { transform: translateX(84px) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0); } }
@keyframes dino-bob { 0% { translate: 0 0; } 32% { translate: 0 -5px; } 52% { translate: 0 0; } 100% { translate: 0 0; } }
/* 自然漫步：走→停→轉身→走回→停（轉身都發生在停頓時） */
@keyframes wander {
  0% { transform: translateX(0) scaleX(1); }
  6% { transform: translateX(0) scaleX(1); }
  38% { transform: translateX(var(--range)) scaleX(1); }
  43% { transform: translateX(var(--range)) scaleX(1); }
  46% { transform: translateX(var(--range)) scaleX(0.05); }
  49% { transform: translateX(var(--range)) scaleX(-1); }
  54% { transform: translateX(var(--range)) scaleX(-1); }
  86% { transform: translateX(0) scaleX(-1); }
  91% { transform: translateX(0) scaleX(-1); }
  94% { transform: translateX(0) scaleX(0.05); }
  97% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}
.roam { position: absolute; animation: wander var(--dur, 22s) ease-in-out infinite; }
.roam img { width: 100%; animation: dino-bob 0.55s cubic-bezier(0.34, 0.2, 0.54, 1) infinite; filter: drop-shadow(0 3px 7px rgba(50,40,20,0.3)); }
.fab { position: absolute; right: 12px; z-index: 31; width: 54px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -8px rgba(40,28,12,0.4); display: grid; place-items: center; }
.fab img { width: 30px; height: 30px; object-fit: contain; }
.bstack { position: absolute; right: 12px; bottom: 96px; display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: 31; }
.bubble { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  background: var(--paper);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(40,28,12,0.45), inset 0 1px 2px rgba(255,255,255,0.9); }
.bubble img { width: 30px; height: 30px; object-fit: contain; }
.bubble.big { width: 64px; height: 64px; }
.bubble.big img { width: 38px; height: 38px; }
#selbubble { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 33;
  width: 86px; height: 86px; border-radius: 999px; display: grid; place-items: center;
  background: var(--paper);
  backdrop-filter: blur(6px); box-shadow: 0 10px 26px -10px rgba(40,28,12,0.5), inset 0 1px 3px rgba(255,255,255,0.9); }
#selbubble img { width: 52px; height: 52px; object-fit: contain; }
#selbubble b { position: absolute; right: -2px; bottom: 2px; background: rgba(255,255,255,0.92); border-radius: 999px;
  padding: 2px 9px; font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px -3px rgba(40,28,12,0.4); }
#drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; border-radius: 24px 24px 0 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 16px 16px 20px;
  transform: translateY(105%); transition: transform 0.28s cubic-bezier(0.32, 0.9, 0.3, 1); }
#drawer.open { transform: translateY(0); }
#drawer .foods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#drawer .foods button { display: grid; place-items: center; gap: 4px; padding: 6px 4px; border-radius: 16px;
  background: none; box-shadow: none; font-size: 13px; }
#drawer .foods button[aria-current="true"] { background: color-mix(in srgb, var(--coral) 30%, transparent); }
#drawer .foods img { width: 44px; height: 44px; object-fit: contain; }
.cur { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; }
.sub .pad { padding-top: 70px !important; }
/* 全家福 idle 晃動（純 CSS，零效能負擔） */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.fam img { animation: bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.fam img:nth-child(2) { animation-delay: 0.4s; animation-duration: 3.1s; }
.fam img:nth-child(3) { animation-delay: 0.9s; animation-duration: 2.9s; }
.fam img:nth-child(4) { animation-delay: 1.3s; animation-duration: 3.4s; }
.fam img:nth-child(5) { animation-delay: 0.6s; animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) { .fam img { animation: none; } }
.segwrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 30; }
.cta2 { display: block; margin: 0 auto; min-height: 46px; padding: 12px 42px; border-radius: 13px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; }
.cta2:active { transform: scale(0.97); }
.lockbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 13px; border-radius: 13px;
  background: var(--surface-2); font-size: 14px; font-weight: 800; color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.cal .d { text-align: center; }
.cal .d i { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 999px;
  font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted);
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-variant-numeric: tabular-nums; }
.cal .d.full i { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.cal .d.half i { background: linear-gradient(to top, var(--accent) 50%, var(--paper) 50%); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal .d.sel i { outline: 2px solid var(--accent); outline-offset: 3px; }
#scr-home .card { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
#scr-home .dayc i { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(6px); }
#scr-home .dayc.done i { background: var(--accent); }
/* 捲軸（2026-10-10）：不要黑色的軌道；細細一條、跟版面同色系，浮在白色卡片裡。
   捲動區兩邊預留一樣寬的位子，內容永遠置中，不會因為捲軸偏左 */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 999px; }
/* 整頁（.screen）背景要滿版：不留捲軸位子、不顯示捲軸（跟手機 App 一樣）；卡片、抽屜、彈窗裡才留兩邊對稱的細捲軸 */
.screen { scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
#sheet, .sheet, .docov-card, [style*="overflow-y:auto"], [style*="overflow:auto"] { scrollbar-gutter: stable both-edges; }
.shopnav { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding-block: 4px; scrollbar-width: none; }
.shopnav::-webkit-scrollbar { display: none; }
.shopnav button[aria-current="true"] { background: var(--coral) !important; color: var(--ink); }
.shopnav button { white-space: nowrap; }
.shopsec { font-size: 16px; font-weight: 800; text-align: center; margin-top: 20px; position: relative; }
.shopsec::before, .shopsec::after { content: ""; position: absolute; top: 50%; width: 18%; height: 1px; background: var(--line); }
.shopsec::before { left: 0; } .shopsec::after { right: 0; }
/* 空狀態（2026-10-10）：整類都沒有 → 整個區塊不出現；篩選後沒有 → 框裡寫一行字，不留空框 */
.luckline { text-align: center; font-size: 14px; font-weight: 800; color: var(--accent-text); margin-top: 8px; }
.luckline.pop { animation: lvnum .6s cubic-bezier(.2,1.6,.4,1); }
.qtyrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.qtyrow[hidden] { display: none; }
.qtyrow button { width: 40px; height: 40px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 20px; font-weight: 800; touch-action: manipulation; }
.qtyrow .qmax { width: auto; padding: 0 14px; font-size: 14px; }
.qtyrow #sm-q { min-width: 44px; text-align: center; font-size: 22px; font-weight: 800; }
/* 恐龍商店街 */
#scr-street { background: #e9e3c9; overflow-x: hidden; }
.parktitle { color: var(--ink); }
#scr-park.night .parktitle { color: #FFF6E8; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
#scr-street.night { background: #2d3b4c; }
.streetmap { position: relative; width: 100%; aspect-ratio: 768 / 3044; left: 50%; transform: translateX(-50%); }   /* 長地圖：寬＝畫面寬，往上滑看更遠的店 */
.streetmap > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.streethead { position: absolute; left: 70px; top: 20px; z-index: 3; }
.streethead h1 { font-size: clamp(18px, 5.4vw, 24px); color: var(--ink); background: color-mix(in srgb, var(--paper) 82%, transparent); padding: 2px 12px; border-radius: 999px; }
.plot { position: absolute; transform: translate(-50%, -56%);   /* 攤位放在空地正中間 */ width: 23%; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; }
.plot.onhill { transform: translate(-50%, -96%); }
/* 2026-10-18 第三版：探索地圖的霧＝手繪雲朵圖（不再用程式畫的雲團） */
#streetclip { overflow: hidden; }
.streetmap.explore { aspect-ratio: 768 / 2450; }
.plot.onplat { transform: translate(-50%, -100%); }
.streetfog { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.excloud { position: absolute; transform: translate(-50%, -50%); opacity: var(--o, .8); pointer-events: none; transition: transform .9s ease, opacity .9s ease; }
.excloud.far.drift { animation: clouddrift 26s ease-in-out infinite alternate; }
.excloud.far.drift.slow { animation-duration: 38s; animation-direction: alternate-reverse; }
@keyframes clouddrift { from { transform: translate(-58%, -50%); } to { transform: translate(-42%, -50%); } }
.platfog { position: absolute; transform: translate(-50%, -62%); aspect-ratio: 1.55; }
.platfog .haze { position: absolute; inset: 8% 4% 0; border-radius: 50%; transition: opacity .9s ease;
  background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--fog) 85%, transparent) 0 38%, color-mix(in srgb, var(--fog) 45%, transparent) 58%, transparent 72%); }
.platfog .excloud { --o: .82; top: 50%; width: 66%; }
.platfog .excloud.l { left: 36%; }
.platfog .excloud.r { left: 64%; top: 40%; width: 58%; }
.platfog.parting .excloud.l { transform: translate(-150%, -50%); opacity: 0; }
.platfog.parting .excloud.r { transform: translate(50%, -50%); opacity: 0; }
.platfog.parting .haze { opacity: 0; }
.nexthaze { position: absolute; left: 0; right: 0; top: 0; transition: opacity 1.4s ease;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fog) 92%, transparent) 0, color-mix(in srgb, var(--fog) calc(var(--haze) * 100%), transparent) 22%,
    color-mix(in srgb, var(--fog) calc(var(--haze) * 100%), transparent) 88%, transparent 100%); }
.topfade { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(to bottom, var(--fog) 0, color-mix(in srgb, var(--fog) 0%, transparent) 100%); }
#scr-street { --fog: #FBF6EA; }
#scr-street.night { --fog: #3F4C60; }
#scr-street.night .excloud { filter: brightness(.62) saturate(.55) hue-rotate(185deg) sepia(.12); }
@media (prefers-reduced-motion: reduce) { .excloud.far.drift { animation: none; } .excloud, .platfog .haze { transition: opacity .4s ease; } }
.footpill { position: sticky; top: 66px; z-index: 6; display: block; width: max-content; max-width: calc(100% - 32px); margin: 0 auto -32px; min-height: 32px; box-sizing: border-box;
  padding: 6px 14px; border-radius: 18px; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; text-wrap: balance; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 4px 14px -6px rgba(40,28,12,.4); pointer-events: none; }   /* 2026-10-20：字放大後英文一行放不下，改成可以折兩行，不再截斷 */
.coachfoot { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--sky); font-size: 14px; font-weight: 800; color: var(--ink); vertical-align: 8px; font-family: var(--font); }
.foottoast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 75; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px -8px rgba(40,28,12,.55); white-space: nowrap; }
.foottoast[hidden] { display: none; }
.plot.newstall { opacity: 0; pointer-events: none; }
.plot.popin { animation: stallpop .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes stallpop { 0% { opacity: 0; transform: translate(-50%, -96%) scale(.35, .3); } 55% { opacity: 1; transform: translate(-50%, -96%) scale(1.12, .88); }
  78% { transform: translate(-50%, -96%) scale(.95, 1.06); } 100% { opacity: 1; transform: translate(-50%, -96%) scale(1); } }
.plot.fadein { animation: stallfade .6s ease both; }
@keyframes stallfade { from { opacity: 0; } to { opacity: 1; } }
#street-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#street-fx .spark { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); animation: sparkfly .9s ease-out forwards;
  background: radial-gradient(circle, #FFF6D8 0 30%, #F6D27A 31% 45%, transparent 46%); }
@keyframes sparkfly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); } }
#street-fx .openlabel { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 14px; font-weight: 800; color: var(--ink);
  background: var(--paper); border-radius: 999px; padding: 5px 12px; box-shadow: 0 6px 16px -8px rgba(40,28,12,.45); animation: labelin .4s ease both; }
@keyframes labelin { from { opacity: 0; transform: translate(-50%, -80%); } to { opacity: 1; transform: translate(-50%, -100%); } }
@media (prefers-reduced-motion: reduce) { .streetfog, .streetfog i { transition: none; } .plot.popin { animation: stallfade .4s ease both; } #street-fx .spark { display: none; } }   /* 2026-10-18：底座踩在山稜線上（圖的底部微微沉進草裡） */
.plot img { width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(62,58,57,.18)); }
.plot.faded img { opacity: .62; filter: saturate(.55) drop-shadow(0 3px 4px rgba(62,58,57,.12)); }
.plot .pn { font-size: 13px; font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.plot.soon { transform: translate(-50%, -50%); pointer-events: none; }
.plot.soon .sign { font-size: 13px; font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); border-radius: 12px; padding: 6px 10px; white-space: nowrap; }
#stallsheet_old { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(430px, 100vw); max-height: 86vh; overflow-y: auto; box-sizing: border-box; z-index: 45; background: var(--paper); border-radius: 24px 24px 0 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.stallhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 4px; }
/* 店內畫面（2026-10-16）：滿版放在攤位頁最上面，返回鍵和金幣浮在上面 */
.stallin { display: block; width: 100%; aspect-ratio: 860 / 642; object-fit: cover; border-radius: 0 0 28px 28px; background: var(--surface); }
#scr-stall #stallsheet { padding-top: 10px !important; }   /* 店內畫面已經讓出返回鍵的位置 */
#scr-stall.night .stallin { filter: brightness(.82) saturate(.9); }
.stallhead h2 { font-size: 22px; font-weight: 800; margin-top: 6px; }
.stallhead p { font-size: 14px; }
.stallfly { position: fixed; z-index: 90; pointer-events: none; object-fit: contain; transition: left .45s cubic-bezier(.3,.9,.3,1), top .45s cubic-bezier(.3,.9,.3,1), width .45s cubic-bezier(.3,.9,.3,1), transform .45s ease, opacity .45s ease; }
/* 進店：店內畫面從攤位的位置圓形展開成滿版 */
.stallzoom { position: fixed; z-index: 91; pointer-events: none; background-size: cover; background-position: center; opacity: 0; border-radius: 999px;
  transition: left .5s cubic-bezier(.3,.9,.3,1), top .5s cubic-bezier(.3,.9,.3,1), width .5s cubic-bezier(.3,.9,.3,1), height .5s cubic-bezier(.3,.9,.3,1), border-radius .5s ease, opacity .25s ease; }
#scr-street.zooming .streetmap { transition: transform .45s ease, opacity .45s ease; transform: translateX(-50%) scale(1.06); opacity: .25; }
.stallsec { font-size: 15px; font-weight: 800; margin: 16px 0 8px; }
#stall-foods .nm { font-size: 14px; }
#stall-foods .pr, #stall-foods .own { font-size: 13px; font-weight: 700; }   /* 字級統一：名稱、價格、持有同一套 */
.stalldeco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; background: var(--surface); border-radius: var(--r-lg); padding: 12px 8px; align-items: end; }
.stalldeco button { background: none; border: 0; padding: 0; text-align: center; font-size: 13px; color: var(--muted); }
.stalldeco img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.stallfav { background: var(--surface); border-radius: var(--r-lg); padding: 6px 14px; }
.stallfav p { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.stallfav p:last-child { border-bottom: 0; }
.stallfav b { font-weight: 800; }
.stallfav span { color: var(--muted); text-align: right; }
.emptynote { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; padding: 8px 6px; }
.shopgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; background: var(--surface); border-radius: var(--r-lg); padding: 18px 10px; }
.shopitem { text-align: center; }
.shopitem .big { font-size: 38px; line-height: 1.2; display: block; filter: drop-shadow(0 3px 5px rgba(40,28,12,0.25)); }
.shopitem .nm { font-size: 13px; font-weight: 700; margin-top: 4px; }
.shopitem .pr { font-size: 13px; font-weight: 800; color: var(--accent-text); margin-top: 2px; }
.spill { display: inline-grid; place-items: center; min-width: 38px; padding: 3px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===== 風格 v2：日系繪本平塗（2026-10-08）===== */
/* 恐龍待機（多角度素材到位前）：原地呼吸＋偶爾小跳，擠壓拉伸；不鏡像翻面 */
@keyframes dino-idle {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(0) scale(1.03, 0.97); }
  60% { transform: translateY(0) scale(1, 1); }
  70% { transform: translateY(0) scale(1.08, 0.9); }
  78% { transform: translateY(-14px) scale(0.94, 1.08); }
  86% { transform: translateY(0) scale(1.07, 0.92); }
  92% { transform: translateY(0) scale(1, 1); }
}
.roam { animation: none !important; }
.roam img { transform-origin: 50% 100%; animation: dino-idle var(--dur, 4s) ease-in-out infinite !important; animation-delay: inherit; }
* { font-weight: 400 !important; }
h1, .big { letter-spacing: 0.01em; }
.card, .qbox, .panel, .shopitem, .task, .chip2, .cta, .cta2, .seg,
#shopmodal, #loremodal, .sheet, .egg { box-shadow: none !important; border: 0 !important; }
.card, .qbox, #shopmodal, #loremodal { border-radius: var(--r-lg) !important; }
.shopitem, .task, .chip2 { border-radius: var(--r-md) !important; }
.cta, .cta2 { background: var(--coral) !important; color: var(--ink) !important; }
.seg { background: var(--paper) !important; }
/* 浮在插畫上的元件：跟首頁任務卡同樣 70% 半透明＋模糊，右下少量陰影讓任何背景都看得出輪廓 */
.nav, .bubble, .fab, .coinpill, .back, #selbubble, #selx, #scr-home .card {
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
  backdrop-filter: blur(9px) !important; -webkit-backdrop-filter: blur(9px) !important;
  border: 0 !important;
  box-shadow: 2px 3px 9px rgba(62, 58, 57, 0.16) !important;
}
#drawer { border-top: 0 !important; box-shadow: 0 -3px 12px rgba(62, 58, 57, 0.12); }
#drawerveil { position: absolute; inset: 0; z-index: 39; background: transparent; border: 0; width: 100%; }
.drawhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawhead b { font-size: 15px; }
.drawhead button { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 16px;
  background: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--ink); }
.roam img { filter: none !important; }
/* 演員（有多姿勢圖的恐龍）：動畫由 JS 狀態機驅動 */
.roam.actor { transition: none; }
.roam.actor > img { width: calc(100% * var(--wk, 1)); max-width: none; margin-left: calc((1 - var(--wk, 1)) * 50%); }
.roam.actor > img.ghost { width: calc(100% * var(--wk, 1)); left: calc((1 - var(--wk, 1)) * 50%); margin-left: 0; }
.roam.actor img { animation: none !important; transform-origin: 50% 100%; }
.roam.actor img.a-breathe { animation: a-breathe 2.6s ease-in-out infinite !important; }
.roam.actor img.a-walk { animation: a-walk 0.38s ease-in-out infinite !important; }
.roam.actor img.a-hop { animation: a-hop 0.62s cubic-bezier(0.3, 0.7, 0.4, 1) 1 !important; }
.roam.actor img.a-up { animation: a-up 0.42s ease-out 1 !important; }
.roam.actor img.a-chomp { animation: a-chomp 0.3s ease-in-out 3 !important; }
.roam.actor img.a-settle { animation: a-settle 0.38s cubic-bezier(0.3, 0.7, 0.4, 1) 1 !important; }
@keyframes a-settle { 0% { transform: scale(1.05, 0.94); } 55% { transform: scale(0.98, 1.03); } 100% { transform: scale(1, 1); } }
.roam.actor img.ghost { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; pointer-events: none; animation: none !important; }
.roam.actor::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: -2px; height: 7px; border-radius: 50%; background: rgba(62, 58, 57, 0.13); z-index: -1; }
.roam.actor.walking::before { animation: ld-shadow 0.38s ease-in-out infinite; }
@keyframes a-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
@keyframes a-walk { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1.02, 0.98); } 25% { transform: translateY(-5px) rotate(0deg) scale(0.99, 1.01); } 50% { transform: translateY(0) rotate(2deg) scale(1.02, 0.98); } 75% { transform: translateY(-5px) rotate(0deg) scale(0.99, 1.01); } }
.roam.actor img.a-walk { animation-duration: 0.76s !important; }
@keyframes a-hop { 0% { transform: scale(1, 1); } 18% { transform: scale(1.12, 0.86); } 45% { transform: translateY(-34px) scale(0.92, 1.1); }
  72% { transform: translateY(0) scale(1.1, 0.9); } 86% { transform: scale(0.97, 1.03); } 100% { transform: scale(1, 1); } }
@keyframes a-up { 0% { transform: scale(1.08, 0.88); } 55% { transform: translateY(-8px) scale(0.96, 1.06); } 100% { transform: scale(1, 1); } }
@keyframes a-chomp { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.06, 0.92); } }
.heartpop { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 5; animation: heartpop 1s ease-out forwards; }
@keyframes heartpop { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }
.ribbon { z-index: 38 !important; pointer-events: none; }
.task.fullrow { opacity: 0.5; }
.task.dim { opacity: 0.4; }
.gwhy { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 10px; }
.gsteps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gsteps li { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.7; }
.gsteps b { font-weight: 400; color: var(--accent-text); }
.gmodel { font-size: 15px; line-height: 1.9; margin-bottom: 12px; }
.gmodel:last-child { margin-bottom: 0; }

/* 小標籤一律用調色盤的藍（--sky）——紅/黃/綠已各有用途（2026-10-08 Lysli） */
.xtag { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--sky); color: var(--ink); margin-right: 6px; vertical-align: 1px; }
.fulltag { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--green); color: var(--ink); flex: none; }
.onblogin { position: relative; overflow: hidden; justify-content: flex-start; padding-top: 70px; }
.onbbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: 0; }
.onblogin > *:not(.onbbg) { position: relative; z-index: 1; }
.onblogo { font-size: 36px !important; letter-spacing: 0.02em; }
.onbhero { width: 62%; max-width: 240px; margin: 0 auto; animation: dino-idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.onbauth { display: flex; flex-direction: column; gap: 10px; margin-top: auto; margin-bottom: 40px; }
.onbauth .gbtn { min-height: 50px; border-radius: 999px; background: #FFFFFF; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 1px 2px 8px rgba(62,58,57,.15); }
.onbauth .gbtn .g { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; background: #4285F4; color: #FFFFFF; }
.onbauth form { display: flex; flex-direction: column; gap: 10px; }
.onbauth input, .onbform input { min-height: 48px; border-radius: var(--r-md); border: 0; background: color-mix(in srgb, #FFFFFF 85%, transparent); padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); }
.onbhelp { position: absolute !important; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); font-size: 20px; box-shadow: 2px 3px 9px rgba(62,58,57,.16); }
#onb-helpbox { position: absolute !important; left: 20px; right: 20px; bottom: 70px; background: var(--paper); border-radius: var(--r-lg); padding: 18px; text-align: left; display: flex; flex-direction: column; gap: 10px; box-shadow: 2px 4px 14px rgba(62,58,57,.22); font-size: 15px; line-height: 1.6; }
.onbform { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.onbform label, .onblabel { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.onbform input { background: var(--surface); }
.onbchips { display: flex; gap: 8px; flex-wrap: wrap; }
.onbchips button { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); font-size: 16px; }
.onbchips button[aria-pressed="true"] { background: var(--coral); }
.setsec { font-size: 14px; color: var(--muted); margin: 18px 4px 8px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; background: var(--surface); }
.setgroup { border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); }
.setrow .v { color: var(--muted); font-size: 15px; text-align: right; }
.setrow small { display: block; color: var(--muted); font-size: 13px; }
.sw { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--surface-2); flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 999px; background: #FFFFFF; transition: transform .2s; box-shadow: 0 1px 3px rgba(62,58,57,.2); }
.sw[aria-checked="true"] { background: var(--green); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }
.setchips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.setchips button { padding: 6px 12px; border-radius: 999px; background: var(--paper); font-size: 14px; }
.setchips button[aria-pressed="true"] { background: var(--coral); }
.setdanger { color: var(--coral); }
#lvupmodal.pop, #wrapmodal.pop, #pickmodal.pop { animation: lvpop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes lvpop { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#lvupmodal.pop #lvup-lv { animation: lvnum .8s .15s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes lvnum { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.setrow .v small { display: block; font-size: 13px; }
.setform { display: flex; flex-direction: column; gap: 10px; }
.setform input { min-height: 48px; border-radius: var(--r-md); border: 0; background: var(--surface); padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); }
.setform .cta2 { margin-top: 6px; }
.setnote { font-size: 14px; color: var(--muted); line-height: 1.6; }
.setcheck { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; line-height: 1.6; }
.setcheck input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--coral); }
.faq summary { padding: 14px 16px; background: var(--surface); cursor: pointer; list-style: none; }
.faq p { padding: 0 16px 14px; background: var(--surface); font-size: 15px; line-height: 1.7; color: var(--muted); }
.slot > img { transform-origin: 50% 90%; }
.slot.ready > img { animation: eggready 0.9s ease-in-out infinite; }
.slot > img.eggtap { animation: eggtap 0.45s ease-in-out 1; }
@keyframes eggready { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes eggtap { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(6deg); } }
#hatchov { position: fixed; inset: 0; z-index: 75; background: rgba(62, 58, 57, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
#hatchov.atslot { justify-content: flex-end; padding-bottom: 150px; }
#hatchov > p { color: #FFFCF6; font-size: 24px; opacity: 0; transition: opacity 0.3s; }
#hatchov > .cta2 { min-width: 160px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#hatchov.p4 > p, #hatchov.p4 > .cta2 { opacity: 1; pointer-events: auto; }
.h-stage { position: relative; width: 170px; height: 210px; }
.h-stage img { position: absolute; left: 50%; bottom: 0; width: 150px; translate: -50% 0; transform-origin: 50% 90%; }
.h-top, .h-bot, .h-baby { opacity: 0; }
.h-top { clip-path: inset(0 0 52% 0); }
.h-bot { clip-path: inset(48% 0 0 0); }
.h-baby { width: 160px !important; transform: scale(0.2); }
.h-crack { position: absolute; left: 50%; top: 52%; width: 120px; height: 22px; translate: -50% 0; opacity: 0; }
#hatchov.p1 .h-egg { animation: eggready 0.5s ease-in-out infinite; }
#hatchov.p2 .h-crack { opacity: 1; transition: opacity 0.15s; }
#hatchov.p2 .h-egg { animation: eggready 0.25s ease-in-out infinite; }
#hatchov.p3 .h-egg, #hatchov.p3 .h-crack { opacity: 0; }
#hatchov.p3 .h-bot { opacity: 1; }
#hatchov.p3 .h-top { opacity: 1; animation: shellfly 0.7s cubic-bezier(.2,.7,.4,1) forwards; }
#hatchov.p3 .h-baby { opacity: 1; animation: babypop 0.7s cubic-bezier(.3,1.6,.5,1) forwards; }
#hatchov.p4 .h-bot { opacity: 0; transition: opacity 0.4s; }
@keyframes shellfly { to { transform: translate(60px, -120px) rotate(70deg); opacity: 0; } }
@keyframes babypop { 0% { transform: translateY(30px) scale(0.2); } 60% { transform: translateY(-18px) scale(1.08, 0.94); } 100% { transform: translateY(0) scale(1); } }
.roam.actor img.a-cheer { animation: a-hop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) infinite !important; }
.giftbub { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); font-size: 24px; animation: giftbob 1s ease-in-out infinite; pointer-events: none; }
@keyframes giftbob { 50% { transform: translateX(-50%) translateY(-5px); } }
#bub-park.hasnews::after { content: ""; position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: #E26D5A; box-shadow: 0 0 0 2px var(--paper); }
#bub-park { position: relative; }
#onb { position: absolute; inset: 0; z-index: 70; background: var(--paper); display: flex; }
.onbpage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 32px 28px; text-align: center; }
.onbpage h1 { font-size: 26px; }
.onbpage > p { color: var(--muted); }
.onbpage .cta2 { margin-top: 10px; }
.onbegg { width: 120px; margin: 0 auto; animation: dino-idle 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.onbopts { display: flex; flex-direction: column; gap: 10px; }
.onbopts button { min-height: 52px; border-radius: var(--r-md); background: var(--surface); font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.onbopts button[aria-pressed="true"] { background: var(--coral); }
.onbopts button.soon { color: var(--muted); }
.onbopts button.soon span { font-size: 13px; }
.onbopts button.soon.want { background: color-mix(in srgb, var(--yellow) 55%, transparent); color: var(--ink); }
.onbgifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }   /* 2026-10-18：多一份 💎2，三格 */
.onbgifts img.gemgift { padding: 22%; box-sizing: border-box; }
.onbgifts figure { margin: 0; background: var(--surface); border-radius: var(--r-lg); padding: 16px 10px; }
.onbgifts img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; }
.onbgifts figcaption { margin-top: 6px; font-size: 16px; display: flex; flex-direction: column; }
.onbgifts figcaption span { font-size: 13px; color: var(--muted); }
/* 2026-10-18：新手導覽改成跟 App 同一本繪本：暖色遮罩、亮圈跟著目標的形狀、恐龍頭像在說話的對話卡（每一步同一套） */
#tourmask { position: fixed; inset: 0; z-index: 80; background: rgba(74, 52, 58, 0.5); }
#tourring { position: fixed; z-index: 81; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 3px #FFF6E8, 0 0 0 8px rgba(255, 246, 232, 0.32); animation: tourpulse 2.4s ease-in-out infinite; }
@keyframes tourpulse { 50% { box-shadow: 0 0 0 3px #FFF6E8, 0 0 0 13px rgba(255, 246, 232, 0.12); } }
@media (prefers-reduced-motion: reduce) { #tourring { animation: none; } }
#tourtip { position: fixed; z-index: 82; width: min(300px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font); color: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(40, 28, 12, 0.5); }
#tourtip[hidden] { display: none; }
#touravatar { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: var(--surface-2); padding: 3px; box-sizing: border-box; }
#tourtip .tbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#tourtip p { font-size: 16px; line-height: 1.6; white-space: pre-line; }
#tourtip .cta2 { margin: 10px 0 0 auto; }
/* 2026-10-21：每一步的對話卡右上角都有 ✕ 可以跳過導覽（跟其他視窗的 ✕ 同一款，小一號）；文字留出位置不被蓋住 */
#tourtip { padding-right: 34px; }
#tourskip { right: 6px; top: 6px; width: 26px; height: 26px; font-size: 14px; }
/* 2026-10-21：餵食那一步的手勢提示（beta 回饋：很多人用點的，點了會打開食物抽屜就卡住）。
   手指按住食物 → 滑到迅猛龍 → 放開 → 淡出，一直重複；一按住食物就收起來。減少動態：手停在食物上，加一支箭頭指向恐龍 */
#draghint { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 83; pointer-events: none; }
#draghint[hidden], #tourmask[hidden] ~ #draghint { display: none; }
#draghint .dhmove { position: absolute; left: 0; top: 0; opacity: 0; }
#draghint .dhfood { position: absolute; left: -22px; top: -24px; width: 44px; height: 44px; object-fit: contain; opacity: 0; }
#draghint .dhhand { position: absolute; left: -19px; top: -3px; width: 46px; height: 54px; transform-origin: 19px 3px; filter: drop-shadow(0 3px 4px rgba(40, 28, 12, 0.35)); }
#draghint .dharrow { position: absolute; left: 0; top: -12px; height: 24px; transform-origin: 0 50%; display: none; overflow: visible; }
#draghint.go .dhmove { animation: dhmove 2.8s ease-in-out infinite; }
#draghint.go .dhhand { animation: dhpress 2.8s ease-in-out infinite; }
#draghint.go .dhfood { animation: dhfood 2.8s ease-in-out infinite; }
@keyframes dhmove { 0% { transform: translate(0, 0); opacity: 0; } 10%, 22% { transform: translate(0, 0); opacity: 1; }
  68%, 82% { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 1; } 94%, 100% { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; } }
@keyframes dhpress { 0%, 12% { transform: scale(1); } 20%, 70% { transform: scale(0.86); } 78%, 100% { transform: scale(1); } }
@keyframes dhfood { 0%, 18% { opacity: 0; transform: scale(0.7); } 24%, 70% { opacity: 0.95; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(0.5); } }
@media (prefers-reduced-motion: reduce) {
  #draghint.go .dhmove, #draghint.go .dhhand, #draghint.go .dhfood { animation: none; }
  #draghint .dhmove { opacity: 1; }
  #draghint .dharrow { display: block; }
}
/* 在這一步點了食物（沒拖）：說明那一行晃一下、亮一下 */
#tourtext.nudge { animation: tournudge 0.6s ease; border-radius: 6px; }
@keyframes tournudge { 0%, 100% { transform: translateX(0); background: transparent; } 15% { transform: translateX(-6px); } 35% { transform: translateX(5px); background: color-mix(in srgb, var(--yellow) 55%, transparent); }
  55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
  #tourtext.nudge { animation: tourflash 1s ease; }
  @keyframes tourflash { 0%, 100% { background: transparent; } 30%, 60% { background: color-mix(in srgb, var(--yellow) 55%, transparent); } }
}
.lmbonus { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 800; }
.lmcard { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 800; color: var(--ink); text-align: left; }
.lmcard img { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; flex: none; box-shadow: 0 1px 3px rgba(40,28,12,.2); }
.lmcard span { flex: 1; } .lmcard b { color: var(--muted); }
.pcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pcgrid button { background: var(--paper); border-radius: 10px; padding: 6px 6px 8px; box-shadow: 0 4px 12px -6px rgba(40,28,12,.35); text-align: left; transform: rotate(var(--tilt, 0deg)); }
.pcgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.pcgrid p { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
#pcmodal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.2deg); z-index: 70; width: min(340px, calc(100vw - 40px)); box-sizing: border-box;
  background: var(--paper); border-radius: 14px; padding: 12px 12px 16px; box-shadow: 0 18px 40px -14px rgba(40,28,12,.55); }
#pcmodal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
#pc-text { font-size: 16px; font-weight: 700; line-height: 1.7; margin-top: 12px; padding: 0 4px; color: var(--ink); }
#pc-meta { font-size: 13px; font-weight: 700; margin-top: 6px; padding: 0 4px; }
.reqnote { position: relative; margin: 12px 4px 4px; padding: 14px 14px 12px; border-radius: 6px; background: #FFF8E4; color: #3E3A39; transform: rotate(-.6deg);
  box-shadow: 0 6px 14px -8px rgba(40,28,12,.45); background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(62,58,57,.06) 23px 24px); }
.reqnote::before { content: ""; position: absolute; left: 50%; top: -7px; width: 56px; height: 14px; transform: translateX(-50%) rotate(2deg); background: color-mix(in srgb, var(--sky) 70%, transparent); border-radius: 2px; }
.reqnote h4 { margin: 0; font-size: 13px; font-weight: 800; color: #6E6866; }
.reqnote .rq { font-size: 15px; font-weight: 700; line-height: 1.7; margin-top: 4px; }
.reqnote .rqrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; color: #6E6866; }
.reqnote .rqrow img { width: 28px; height: 28px; object-fit: contain; }
.reqnote .rqrow .grow { flex: 1; }
.reqnote .cta2 { min-height: 38px; padding: 8px 20px; font-size: 15px; min-width: 0; }
.reqnote.done .rq { color: #6E6866; }
.plot .reqtag { position: absolute; left: 50%; top: -6%; transform: translate(-50%, -100%); font-size: 13px; font-weight: 800; color: var(--ink); background: var(--paper);
  border-radius: 999px; padding: 2px 9px; box-shadow: 0 3px 8px -4px rgba(40,28,12,.5); white-space: nowrap; animation: thought-bob 2.6s ease-in-out infinite; }
.plot .reqtag::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--paper); }
.thought .cloud.digbub { font-size: 18px; font-weight: 800; color: var(--coral); }
#parkwarn.good img { width: 24px; height: 24px; object-fit: contain; vertical-align: -6px; margin-right: 6px; }
.lmbonus img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.lmbonus img + img { margin-left: -6px; }
.ansby { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ansby img { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: var(--surface-2); padding: 3px; box-sizing: border-box; }
.ansby .xtag { margin: 0; }
.ansby + textarea.ans { margin-top: 8px !important; }
#tourtail { position: absolute; width: 14px; height: 14px; background: var(--paper); transform: rotate(45deg); border-radius: 3px; }
#tourtail.up { top: -6px; } #tourtail.down { bottom: -6px; }
#flypts { position: fixed; z-index: 83; pointer-events: none; display: flex; align-items: center; gap: 4px; font-size: 24px; color: var(--ink);
  background: var(--yellow); border-radius: 999px; padding: 4px 12px; transition: left 0.9s cubic-bezier(.5,0,.3,1), top 0.9s cubic-bezier(.5,0,.3,1), opacity 0.3s; }
#flypts img { width: 22px; height: 22px; }
#mutebtn { position: absolute; left: 66px; top: 12px; z-index: 37; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 2px 3px 9px rgba(62,58,57,.16); }
#mutebtn[aria-pressed="true"] { color: var(--muted); }
.coinfly { position: fixed; left: -15px; top: -15px; width: 30px; height: 30px; z-index: 84; pointer-events: none; will-change: transform; }
.coinplus { position: fixed; z-index: 84; pointer-events: none; transform: translateX(-50%); font-size: 24px; color: #B5543F; animation: coinplus 1s ease-out forwards; }
@keyframes coinplus { 0% { opacity: 0; translate: 0 10px; } 20% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -40px; } }
.coinpill.coinbump { animation: coinbump 0.28s ease-out; }
@keyframes coinbump { 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* 在手機上：拿掉外框、鋪滿螢幕可視高度，選單永遠釘在底部、內容自己捲動 */
@media (max-width: 480px) {
  .wrap { padding: 0 !important; }
  .phone { max-width: none; width: 100%; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; border: 0; box-shadow: none; }
}
.serieh { display: flex; align-items: center; justify-content: center; gap: 8px; }
.serieh img { width: 34px; height: 34px; object-fit: contain; }
.lockic { width: 15px; height: 15px; flex: none; margin-right: 6px; vertical-align: -2px; color: var(--muted); }
/* 蛋窩 v3：場景抬到選單上方＋放大，下方用草地色延伸 */
#scr-nest { background: #d5d7a7 !important; }
#scr-nest .scenein { bottom: 112px !important; overflow: visible; }
#scr-nest .scenein > img.bg { object-position: 59% bottom !important; transform: scale(1.34); transform-origin: 59% 100%; }
#scr-nest .scenein::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: #d5d7a7; }
.slot { width: 25% !important; }
.slot .ph2 { background: color-mix(in srgb, var(--surface) 70%, transparent) !important; backdrop-filter: blur(6px);
  box-shadow: 2px 3px 9px rgba(62, 58, 57, 0.16) !important; color: var(--muted); font-size: 28px !important; border: 0 !important; width: 62%; margin: 0 auto; }
.slot.locked .ph2 { background: color-mix(in srgb, var(--surface) 45%, transparent) !important; box-shadow: none !important; }
.slot.locked .ph2 svg { width: 38%; height: 38%; }
/* 右側數字：直接壓在圖的右下角，不要底色 */
.nestbtn b { background: none !important; box-shadow: none !important; padding: 0 !important; right: 8px !important; bottom: 4px !important;
  font-size: 16px; color: var(--ink); text-shadow: 0 0 3px #FFFCF6, 0 0 3px #FFFCF6, 0 0 3px #FFFCF6; }
/* 中間的食物吃完：保留最後一次的食物，蓋灰色遮罩＋0 */
#selbubble.empty::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(110, 104, 102, 0.45); }
#selbubble.empty img { filter: grayscale(1); }
.nestbtn { position: relative; }
.nestbtn b { position: absolute; right: -2px; bottom: -2px; min-width: 22px; padding: 1px 6px; border-radius: 999px; font-size: 13px;
  background: var(--paper); color: var(--ink); box-shadow: 1px 2px 6px rgba(62, 58, 57, 0.18); }
.colordots { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.colordots button { width: 28px; height: 28px; border-radius: 999px; }
.colordots button[aria-pressed="true"] { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.eggcell .need { font-size: 14px; }
.eggcell .sp { font-size: 13px; color: var(--muted); }
/* 間距 v2：留白跟大圓角成比例 */
.pad { padding-inline: 24px; }
.panel { padding: 18px; margin-top: 14px; }
.entrow { padding: 16px 18px; }
/* 限量商品賣完／每日禮盒領完：灰色蒙版 */
.shopitem.soldout { position: relative; }
.shopitem.soldout::after { content: attr(data-sold); position: absolute; inset: -4px; border-radius: var(--r-md);
  background: rgba(110, 104, 102, 0.55); color: #FFFFFF; display: grid; place-items: center; font-size: 14px; }
.lvchk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #FFFFFF; margin-right: 10px; font-size: 14px; color: transparent; }
.lvchk.done { background: var(--green); color: var(--ink); }
.lvchk.done + .lvt { text-decoration: line-through; color: var(--muted); }
/* 勾選框：圓角方塊、無框線；完成＝若竹綠填滿＋打勾＋文字劃線 */
.task .chk { width: 22px !important; height: 22px !important; border-radius: 7px !important; background: #FFFFFF !important; color: transparent !important; font-size: 14px; }
.task.done .chk { background: var(--green) !important; color: var(--ink) !important; }
/* 加練：選了＝待作答（不打勾）；答完才打勾 */
.task.picked:not(.done) .chk { background: #FFFFFF !important; box-shadow: inset 0 0 0 2px var(--coral) !important; }
.task.done .t { text-decoration: line-through; color: var(--muted); }
.gearbtn { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: 2px 3px 9px rgba(62, 58, 57, 0.16); }
/* 圖鑑跟商店同一套：區塊標題置中在上，格子包進淡色大外框 */
#scr-dex .card.panel { margin-top: 18px; padding: 0; }
#scr-dex .card.panel h3 { text-align: center; font-size: 16px; margin: 0; }
#scr-dex .dexgrid { background: var(--surface); border-radius: var(--r-lg); padding: 16px 10px; margin-top: 12px !important; }
/* 日期圓圈：不用線圈，改純色塊——完成=珊瑚、做一半=山吹、今天=水色 */
.dayc i, .cal .d i { box-shadow: none !important; outline: 0 !important; }
.calhead b { text-align: center; font-size: 13px; color: var(--muted); }
.cal .d i { background: #FFFFFF !important; color: var(--ink); }
.cal .d.half i { background: linear-gradient(to top, var(--yellow) 50%, #FFFFFF 50%) !important; }
.cal .d.full i { background: var(--yellow) !important; color: var(--ink) !important; }
.cal .d.over i { background: var(--coral) !important; color: var(--ink) !important; }
.cal .d.out i { background: transparent !important; color: var(--muted); opacity: .45; }
.cal .d.sel i { outline: 2.5px solid var(--ink) !important; outline-offset: 3px; }
/* 首頁週曆同一套顏色 */
.dayc i, #scr-home .dayc i { background: #FFFFFF !important; }
.dayc.half i, #scr-home .dayc.half i { background: linear-gradient(to top, var(--yellow) 50%, #FFFFFF 50%) !important; }
.dayc.full i, #scr-home .dayc.full i { background: var(--yellow) !important; }
.dayc.over i, #scr-home .dayc.over i { background: var(--coral) !important; color: var(--ink) !important; }
.dayc.future i, #scr-home .dayc.future i { background: transparent !important; color: var(--muted); }

/* 按鈕不頂天立地：寬度跟著文字走、置中，只比字稍大（2026-10-08 Lysli） */
.cta, .cta2 { width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; min-width: 112px; max-width: 100%;
  min-height: 40px !important; padding: 9px 28px !important;
  margin-left: auto !important; margin-right: auto !important; }
.cta { display: flex !important; }
.onbauth .gbtn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; align-self: center; min-height: 40px; padding: 9px 24px;
  margin-left: auto; margin-right: auto; }

/* 該去打工了：草原上愛心滿三顆、可以打工的恐龍，頭上冒思考泡泡 💼 */
.thought { position: absolute; left: 58%; bottom: 92%; pointer-events: none; z-index: 2; }
.thought .cloud { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; pointer-events: auto; cursor: pointer; border: 0; padding: 0;
  background: #FFFFFF; box-shadow: 0 2px 6px rgba(62,58,57,.16); font-size: 16px; line-height: 1;
  animation: thought-bob 2.6s ease-in-out infinite; }
.thought .cloud img { width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.thought i { position: absolute; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(62,58,57,.14); }
.thought i.d1 { width: 8px; height: 8px; left: -2px; bottom: -9px; }
.thought i.d2 { width: 5px; height: 5px; left: -8px; bottom: -16px; }
.thought .cloud.offduty { width: auto; min-width: 34px; padding: 0 9px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.thought .cloud.nofeed { pointer-events: none; cursor: default; }   /* 2026-10-18：肚子餓的泡泡只是提醒，點下去還是點到恐龍 */
@keyframes thought-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .thought .cloud { animation: none; } }

/* 恐龍詳情的好感愛心放大，跟活力條同一個視覺份量 */
#dn-hearts .hrow { height: 28px; }
#dn-hearts .hrow img { width: 28px; height: 28px; margin-right: -4px; }

/* 背包：底色 paper、每類一個 surface 色塊（同圖鑑）；標題列＋✕ 固定在頂端，捲動時也能關 */
#sheet { background: var(--paper); max-height: 86%; overflow-y: auto; overscroll-behavior: contain; }
#sheet .sheethead { position: sticky; top: -16px; z-index: 3; margin: -16px -16px 0; padding: 16px 16px 10px;
  background: var(--paper); border-radius: 22px 22px 0 0; display: flex; align-items: center; justify-content: space-between; }
#sheet .sheethead .close { position: static; }
#sheet .bagsec h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }

/* 隱私權政策／服務條款全文 */
.setdoc { background: var(--surface); border-radius: var(--r-lg); padding: 18px 18px 22px; font-size: 15px; line-height: 1.75; }
.setdoc .upd { color: var(--muted); font-size: 13px; }
.setdoc h3 { font-size: 15px; font-weight: 800; margin-top: 16px; }
.setdoc p { margin-top: 4px; }
.setdoc ul { margin: 4px 0 0 18px; list-style: disc; }
.setdoc a { color: var(--ink); text-decoration: underline; }

/* 登入頁：標題與恐龍下移；兩顆登入鈕同寬置中；登入＝註冊（2026-10-08 Lysli） */
.onblogin { padding-top: 132px !important; }
.onbauth { align-items: center; }
.onbauth .gbtn, .onbauth #onb-emailbtn { width: 220px !important; min-width: 0; justify-content: center; }
.onbauth form { width: 240px; }
.onbnote { font-size: 13px; color: var(--ink); opacity: .7; text-align: center; margin-top: 2px; }

/* 模擬 Google OAuth 帳戶選擇（原型用；正式版由 Supabase Auth 導到 Google） */
#gauth { position: fixed; inset: 0; z-index: 80; background: rgba(32,33,36,.45); display: grid; place-items: center; padding: 16px; }
#gauth[hidden] { display: none; }
.gauth-card { width: min(360px, 100%); background: #FFFFFF; border-radius: 16px; padding: 22px 20px 16px; font-family: Roboto, "PingFang TC", system-ui, sans-serif; color: #202124; }
.gauth-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #5F6368; }
.gauth-brand .g { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; background: #4285F4; color: #FFFFFF; }
.gauth-card h2 { font-size: 24px; font-weight: 500; margin-top: 18px; }
.gauth-sub { font-size: 15px; color: #5F6368; margin-top: 4px; }
.gauth-acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border-top: 1px solid #E8EAED; text-align: left; margin-top: 10px; }
.gauth-acct + .gauth-acct { margin-top: 0; }
.gauth-acct .av { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: #F2A497; color: #FFFFFF; font-weight: 700; flex: none; }
.gauth-acct .av.ghost { background: #F1F3F4; color: #5F6368; }
.gauth-acct b { display: block; font-size: 15px; font-weight: 500; }
.gauth-acct small { display: block; font-size: 13px; color: #5F6368; }
.gauth-fine { font-size: 13px; color: #5F6368; line-height: 1.5; border-top: 1px solid #E8EAED; padding-top: 12px; margin-top: 4px; }
.gauth-cancel { display: block; margin: 12px 0 0 auto; font-size: 15px; color: #1A73E8; font-weight: 500; padding: 6px 8px; }
/* 新用戶週曆：沒練過＝白圈；今天＝黑框空心 */
#scr-home .dayc.today i { background: #FFFFFF !important; box-shadow: inset 0 0 0 2px var(--ink) !important; color: var(--ink) !important; }

/* 遊戲感藝術字標題：LOGO＝迅猛龍趴在拱形字上（logo_a_raptor_v2）；LOGO_EGG＝o 是裂開的蛋（備案） */
.onblogo img { display: block; width: 88%; max-width: 360px; margin: 0 auto; }

/* 登入兩顆鈕：完全同尺寸、同形狀，圖示＋字置中 */
.onbauth button.gbtn, .onbauth #onb-emailbtn {
  width: 200px !important; height: 46px !important; min-height: 46px !important; padding: 0 20px !important;
  border-radius: 999px !important; display: flex !important; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; box-sizing: border-box; margin-left: auto !important; margin-right: auto !important; }
.onbauth #onb-emailbtn .mail { width: 22px; height: 22px; flex: none; }

/* 登入頁：拿掉中間的恐龍；標題＋兩顆鈕成一組，在畫面中間 */
.onblogin { justify-content: flex-start !important; padding-top: min(17vh, 160px) !important; }
.onblogin .onbauth { margin-top: 22px !important; margin-bottom: 0 !important; }
.onblogin .onblogo { margin-top: 0; }
.onblogin .onblogo img { width: min(78%, 34vh) !important; max-width: 300px !important; }
/* 側面、頂著蜜杯的小迅猛龍，靜止不跳；高度約標題一行字的 1.5 倍 */
.onblogin .onbside { display: block; height: min(160px, 18.6vh); width: auto; margin: 4px auto 0; animation: none !important; }

/* 登入頁（2026-10-09 定版）：小恐龍在畫面正中央；標題貼在牠上方、按鈕貼在牠下方，
   「字→恐龍頭」與「恐龍腳→按鈕」兩段間距相同（--gap）。 */
.onblogin { --dh: min(160px, 16vh); --gap: 20px; }
.onblogin .onbside, .onblogin .onblogo, .onblogin .onbauth { position: absolute !important; left: 50%; margin: 0 !important; }
.onblogin .onbside { top: 50%; height: var(--dh); transform: translate(-50%, -50%); }
.onblogin .onblogo { bottom: calc(50% + var(--dh) / 2 + var(--gap)); transform: translateX(-50%); width: min(234px, 62%); }   /* 字的大小＝上一版（她說 1.5 倍太大） */
.onblogin .onblogo img { width: 100% !important; max-width: none !important; display: block; }
.onblogin .onbauth { top: calc(50% + var(--dh) / 2 + var(--gap)); transform: translateX(-50%); width: 260px; }

/* 登入（2026-10-09）：Email＋密碼直接填 → 繼續；「或」分隔線；Google。兩顆鈕同尺寸、比字稍大 */
.onblogin .onbauth { width: 240px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.onblogin .onbauth input { width: 100%; min-height: 40px !important; height: 40px; font-size: 15px !important; box-sizing: border-box; border-radius: 999px !important; padding: 0 16px !important; }
.onblogin .onbauth button.authbtn { width: 150px !important; height: 40px !important; min-height: 40px !important; padding: 0 16px !important;
  border-radius: 999px !important; display: flex !important; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; margin: 2px auto 0 !important; }
.onblogin .onbauth button.authbtn.cta2 { font-size: 16px; }
.onblogin .onbauth button.authbtn.gbtn { font-size: 17px; background: #FFFFFF; }
.onblogin .authbtn.gbtn .g { width: 20px; height: 20px; font-size: 13px; }

/* 登入 v1.6（2026-10-09）：只有 Apple / Google 兩顆長按鈕，沒有 Email 密碼登入 */
.onblogin .authtitle { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.socials { display: flex; flex-direction: column; gap: 10px; width: min(300px, 86vw); }
.longbtn { width: 100%; min-height: 50px; border-radius: 999px; background: #FFFFFF; color: var(--ink); font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 1px 2px 8px rgba(62,58,57,.15); }
.longbtn.apple { background: #000000; color: #FFFFFF; }
.legal { font-size: 13px; line-height: 1.6; text-align: center; color: var(--ink); opacity: .78; margin-top: 2px; width: min(300px, 92vw); }
.legal button { font: inherit; color: var(--ink); text-decoration: underline; padding: 0; }
#docov { position: fixed; inset: 0; z-index: 85; background: rgba(23,18,12,.45); display: grid; place-items: center; padding: 16px; }
#docov[hidden] { display: none; }
.docov-card { width: min(400px, 100%); max-height: 86vh; overflow-y: auto; background: var(--paper); border-radius: 22px; padding: 0 16px 16px; overscroll-behavior: contain; }
.docov-head { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 16px 0 10px; }
.docov-head h2 { font-size: 18px; font-weight: 800; }
.docov-head button { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 800; }

/* 矮螢幕（iPhone SE 等）：恐龍仍在正中央，只收緊尺寸與間距，條款小字不出界 */
@media (max-height: 700px) {
  .onblogin { --dh: 96px; --gap: 14px; }
  .onblogin .onbauth,   .onblogin .longbtn { min-height: 44px; }
  .onblogin .authtitle { font-size: 17px; }
}


/* 載入畫面 */
#loading { position: absolute; inset: 0; z-index: 95; overflow: hidden; background: var(--paper); }
#loading[hidden] { display: none; }
#loading .ldbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#loading .ldbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
#loading .lddino { position: relative; width: 140px; height: 140px; }
#loading .lddino img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%;
  animation: ld-step 0.5s ease-in-out infinite; }
#loading .ldshadow { position: absolute; left: 50%; bottom: 4px; width: 92px; height: 12px; margin-left: -46px; border-radius: 50%;
  background: rgba(62,58,57,.22); animation: ld-shadow 0.5s ease-in-out infinite; }
#loading .ldtext { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: .04em; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent); padding: 4px 14px; border-radius: 999px; }
#loading .lddots i { font-style: normal; opacity: 0; animation: ld-dot 1.2s infinite; }
#loading .lddots i:nth-child(2) { animation-delay: .2s; }
#loading .lddots i:nth-child(3) { animation-delay: .4s; }
@keyframes ld-step { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-7px) rotate(2.5deg); } }
@keyframes ld-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .7; } }
@keyframes ld-dot { 0%, 15% { opacity: 0; } 30%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #loading .lddino img, #loading .ldshadow { animation: none; } }

/* 道具使用彈窗 */
#itemmodal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 62; width: min(320px, calc(100vw - 40px));
  background: var(--paper); border-radius: 22px; padding: 22px 18px 18px; text-align: center; box-sizing: border-box; }
#itemmodal[hidden] { display: none; }
#itemmodal .im-x { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 800; }
#itemmodal #im-img { width: 88px; height: 88px; object-fit: contain; }
#itemmodal h2 { font-size: 20px; font-weight: 800; margin-top: 6px; }
#itemmodal #im-desc { font-size: 15px; line-height: 1.6; margin-top: 6px; }
#itemmodal #im-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
#itemmodal .im-cnt { font-size: 14px; color: var(--muted); }
#itemmodal .im-cnt b { color: var(--ink); }
#itemmodal .im-note { font-size: 14px; color: var(--muted); line-height: 1.6; }
#itemmodal .cta2[disabled] { opacity: .45; }
/* 背包分類標題：置中、放大（同圖鑑） */
#sheet .bagsec h3 { text-align: center; font-size: 16px !important; margin-bottom: 10px !important; }
#sheet button.shopitem { cursor: pointer; }

.warmchip { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: var(--ink); background: var(--yellow); padding: 5px 12px; border-radius: 999px; }
.warmchip[hidden] { display: none; }

/* 圖片留白裁到最小後（2026-10-09），導覽列圖示縮回原本的視覺大小 */
.nav button img { width: 30px !important; height: 30px !important; }
.nav button[aria-current="true"] img { width: 32px !important; height: 32px !important; }
.nav button span { margin-top: 3px; }

/* 問卷頁（登入後的基本資料／目標／階段／見面禮）：沿用登入頁的草原，疊一層紙色讓表單好讀 */
#onb .onbpage:not(.onblogin) {
  background: linear-gradient(rgba(255,252,246,.80), rgba(255,252,246,.80)), url("/hf/img/bg_home_tall_noface.1c94f2d316.webp") center bottom / cover no-repeat;
}

.smwarn { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--ink); background: var(--yellow); border-radius: 12px; padding: 8px 12px; }
.dayhint { position: fixed; z-index: 70; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 800; color: var(--ink);
  background: var(--paper); padding: 6px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(62,58,57,.18); pointer-events: none; }
.dayhint[hidden] { display: none; }

#scr-shop .shopitem .own { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 2px; }
#scr-shop .shopitem .own.bump { animation: own-bump .5s ease; color: var(--ink); }
@keyframes own-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

#scr-shop .shopitem.maxed { opacity: .45; filter: grayscale(.6); }
#scr-shop .shopitem.maxed .own { color: var(--ink); }

/* 被擋住時：按鈕灰但可點，點了在下方出一行黃條（2026-10-09 Riley 同意；ECONOMY §1） */
.blocked { opacity: .45 !important; }
.smwarn.hfwarn { margin-top: 8px; text-align: left; }
.statusline { font-size: 13px; color: var(--muted); padding: 8px 2px 0; }
#nestwarn { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 34; width: max-content; max-width: calc(100% - 40px); margin: 0; }
#parkwarn.good { background: var(--paper); color: var(--ink); box-shadow: 0 4px 14px rgba(62,58,57,.18); }
.favheart { position: fixed; z-index: 70; width: 16px; height: 16px; pointer-events: none; transform: translate(-50%, 0); animation: favup 1.1s ease-out forwards; }
@keyframes favup { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -56px) scale(1.1); } }
#growmodal.pop { animation: lvpop .55s cubic-bezier(.2,1.4,.4,1); }
#parkwarn { position: absolute; left: 50%; bottom: 124px; transform: translateX(-50%); z-index: 34; width: max-content; max-width: calc(100% - 40px); margin: 0; }
/* 每個彈窗都有 ✕ */
.mx { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 16px; font-weight: 800; z-index: 2; }
#hatchov .mx { position: absolute; right: 16px; top: 16px; background: var(--paper); }
#hatchov:not(.p4) .mx { display: none; }
.gauth-card { position: relative; }
.onbback { position: absolute !important; left: 14px; top: 14px; z-index: 3; display: grid; }
/* 320 寬：提示框、蛋進度彈窗不超出畫面；我的恐龍 4 隻放得下 */
#tourtip, #eggpop { box-sizing: border-box; }
/* 在家耍廢：恐龍照品種的真實比例（跟草原同比例，迅猛龍最小、雷龍最大），腳底對齊；愛心三顆橫排、置中在屁屁正下方 */
/* 窄手機（375）一排放不下 4 隻大恐龍：自動換成一排 3 隻，不要被卡片右邊切掉 */
#homegrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; align-items: end; }
#homegrid .dexcell { display: flex; flex-direction: column; align-items: center; }
#homegrid .dexcell .dbox { width: 100%; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
#homegrid .dexcell .dbox img { width: var(--px, 52px) !important; height: auto !important; max-height: 96px; object-fit: contain; }
#homegrid .dexcell .dbox { height: auto !important; }
#homegrid .dexcell .dbox img { max-width: none !important; }   /* 大隻的透明邊可以伸進隔壁格，身體本身不會重疊 */
#homegrid .dexcell, #homegrid .dexcell .dbox { overflow: visible; }
/* 圖鑑格子也照同一套比例：最小的迅猛龍 46px，其他照草原比例放大（雷龍 72、暴龍 63、三角龍 60、鱷龍 59）；欄寬跟著比例分，腳底對齊 */
#xx-book .dexgrid:not(#guestgrid) { grid-template-columns: minmax(0, 46fr) minmax(0, 72fr) minmax(0, 59fr) minmax(0, 60fr) minmax(0, 63fr) !important; gap: 4px; align-items: end; }
#xx-book .dexcell img { width: 100%; height: auto; aspect-ratio: 1; display: block; margin-left: 50%; transform: translateX(-50%) translateY(calc(var(--feet, 0) * 100%)); }
#xx-book .dexcell { overflow: visible; }
#xx-book .dexgrid { padding-bottom: 2px; }
.setchips .soon { opacity: .5; cursor: default; }
#xx-book .dexcell[data-sp="迅猛龍"] img { max-width: 46px; }
#xx-book .dexcell[data-sp="雷龍"] img { max-width: 72px; }
#xx-book .dexcell[data-sp="鱷龍"] img { max-width: 59px; }
#xx-book .dexcell[data-sp="三角龍"] img { max-width: 60px; }
#xx-book .dexcell[data-sp="暴龍"] img { max-width: 63px; }
#homegrid .dexcell .hrow { margin-top: 5px; position: relative; z-index: 1; }
@media (max-width: 360px) {
  #scr-home .hello { padding-top: 56px; }   /* 窄螢幕：日期與名字放到金幣欄下面，不被蓋住 */
  #scr-home .maincard { padding-right: 58px; }
}
.shopnav button:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.lvside { font-size: 14px; }
/* 2026-10-18：升級獎勵、等級之路、成長卡、每週回顧、陪練提醒 */
.lvgot { margin-top: 12px; }
.lvgot-h { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.lvgot .xtag { margin: 0 4px 6px 0; font-size: 13px; padding: 2px 9px; }
.lvpick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 132px; overflow-y: auto; }
.lvpick button { width: 60px; padding: 4px 2px; border-radius: 12px; background: var(--surface); font-size: 13px; font-weight: 700; line-height: 1.25; }
.lvpick button img { display: block; width: 32px; height: 32px; object-fit: contain; margin: 0 auto 2px; }
.lvpick button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--coral); }
/* 2026-10-19：英文名字比較長（King Coconut Water…），格子讓字換到第三行、整區高一點；中文版不受影響 */
html[lang="en"] .lvpick { max-height: 172px; align-items: flex-start; }
html[lang="en"] .lvpick button { font-size: 13px; overflow-wrap: anywhere; }
.lvroad { list-style: none; margin: 0; padding: 0 0 0 4px; }
.lvroad li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 0 0 12px 18px; font-size: 14px; font-weight: 700; }
.lvroad li:last-child { padding-bottom: 0; }
.lvroad li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 2px; background: var(--surface-2); }
.lvroad li:last-child::before { display: none; }
.lvroad li i { position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--coral); background: var(--paper); }
.lvroad li.now i { background: var(--coral); }
.lvroad .lvl-n { flex: none; width: 40px; color: var(--muted); }
.lvroad li.now .lvl-n { color: var(--ink); }
.lvroad .lvl-r { flex: 1; min-width: 0; line-height: 1.5; }
.lvroad .lvl-now { flex: none; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--sky); color: var(--ink); }
.grtop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.grbig { font-size: 26px; font-weight: 800; }
.grvs { font-size: 13px; font-weight: 700; width: 100%; }
.grdelta { font-size: 13px; font-weight: 800; color: var(--muted); }
.grdelta.up { color: var(--good); }
.grgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.grmini { background: var(--paper); border-radius: 12px; padding: 8px 6px; text-align: center; }
.grmini p:first-child { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.grmini p:last-child { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.grmini .grdelta { font-size: 13px; }
.grspark { display: block; width: 100%; height: 46px; margin-top: 12px; overflow: visible; }
.grspark path { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grspark circle { fill: var(--coral); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grspark .grbase { stroke: var(--surface-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.grcap { font-size: 13px; font-weight: 700; margin-top: 4px; }
.wrapline { font-size: 15px; font-weight: 800; line-height: 1.6; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--yellow) 40%, var(--paper)); }
.wrapgrid .grmini { background: var(--surface); }
.helpbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 800; }
.helpbtn .xtag { margin: 0; }
.crit li.critmore { color: var(--muted); font-size: 13px; }
.crit li.critmore::before { content: "+"; color: var(--muted); }
/* 2026-10-18：草原最多 8 隻＋角落「還有 N 隻在家」、帶回家、我的恐龍「在草原／在家」、首頁下一步卡、第一次的一句話、第 2 天通知預覽 */
.meadowchip { position: absolute; left: 70px; top: 60px; z-index: 33; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -6px rgba(40,28,12,0.35); font-size: 14px; font-weight: 800; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.meadowchip[hidden] { display: none; }
.meadowchip.drop { transform: scale(1.12); box-shadow: 0 0 0 3px var(--sky), 0 6px 18px -6px rgba(40,28,12,0.4); }
#scr-park .roam { touch-action: none; -webkit-user-select: none; user-select: none; }
#scr-park .roam img { -webkit-user-drag: none; }   /* 不讓瀏覽器把恐龍圖當成圖片拖走（會吃掉拖回家的手勢） */
.roam.gohome { transition: opacity .55s ease, transform .55s ease !important; opacity: 0 !important; transform: translateY(10px) scale(.75); pointer-events: none; }
.dragdino { position: fixed; z-index: 95; width: 64px; height: 64px; object-fit: contain; pointer-events: none; transform: translate(-50%, -70%); opacity: .92; filter: drop-shadow(0 6px 10px rgba(40,28,12,.3)); }
#homegrid .mcell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.mstat { font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.mstat.on { background: var(--sky); color: var(--ink); }
#homegrid .hfwarn { grid-column: 1 / -1; margin-top: 0; }
#dinomodal .dnrow { display: flex; gap: 8px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.nextcard { margin-top: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; text-align: left; }
.nextcard[disabled] { cursor: default; }
.nextcard .nk { font-size: 13px; font-weight: 800; color: var(--muted); }
.nextcard .nt { font-size: 17px; font-weight: 800; line-height: 1.45; margin-top: 2px; }
.nextcard .ns { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.nextcard .chev { margin-left: auto; flex: none; color: var(--muted); font-size: 20px; font-weight: 800; }
.nextcard .xtag { margin-left: 6px; }
.firsttip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 8px 8px 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--sky) 38%, var(--paper)); font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--ink); text-align: left; }
.firsttip span { flex: 1; }
.firsttip button { flex: none; width: 24px; height: 24px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.firsttip.float { position: absolute; left: 18px; right: 18px; top: 100px; z-index: 37; margin: 0; box-shadow: 0 6px 18px -8px rgba(40,28,12,.35); }
.pushbanner { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 96; display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -10px rgba(40,28,12,.45); text-align: left; color: var(--ink); animation: pushin .45s cubic-bezier(.2,1,.3,1); }
.pushbanner[hidden] { display: none; }
.pushbanner img { width: 38px; height: 38px; flex: none; border-radius: 10px; object-fit: contain; background: var(--surface-2); }
.pushbanner .pbx { flex: 1; min-width: 0; }
.pushbanner .ph { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; }
.pushbanner .ph span { color: var(--muted); font-weight: 700; }
.pushbanner .ph, .pushbanner .pb { display: block; }
.pushbanner .ph { display: flex; }
.pushbanner .pb { font-size: 15px; line-height: 1.5; margin-top: 1px; }
@keyframes pushin { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
.fwbar { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 37; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 800; box-shadow: 0 6px 18px -8px rgba(40,28,12,.5); white-space: nowrap; }
.fwbar[hidden] { display: none; }
.fwbar button { min-width: 32px; height: 32px; border-radius: 999px; color: var(--paper); font-size: 16px; font-weight: 800; }
.fwbar span { padding-inline: 6px; }
/* ===== 2026-10-20：手機字級（Riley 用 iOS 放大字體，手機上原本太小）=====
   Phase A：所有 px 字級照一張對照表放大（次要文字下限 13px、極小標籤 11px、標題 +1~2px）；
   Phase B：主要閱讀文字（題目、要答到的點、批改、作答、卡片內文、對話框內文、導覽）下限 15px；
   這裡：所有可輸入的欄位 16px（iOS 小於 16px 點進去會自動放大畫面），以及 prod/hf-round2.js 產生的批改段落。
   重跑方式與對照表：hatchfellow/qa/2026-10-20-font-sizes/NOTES.md */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), textarea, select { font-size: 16px !important; }
#result-guide p[style*="font-size:12.5px"], #coach-guide p[style*="font-size:12.5px"] { font-size: 15px !important; }
.hfnotes .hfnote { font-size: 15px; }
.hfnotes .hfnote i { font-size: 13px; }
/* 窄格子裡的短標籤（徽章、圖鑑、商品、蛋、自選食物）折行時兩行平均，不會剩一個字掛在第二行 */
.badges p, .dexcell p, .shopitem .nm, .egg p, .eggcell p, .lvpick button, .stalldeco button, .pcgrid p, .grmini p, #scr-me .card p.muted { text-wrap: balance; }
/* 設定列：左邊標籤至少留 4.5 個字寬，右邊膠囊多的時候不會把「目前階段」擠成一字一行 */
.setrow > span:first-child { min-width: 4.5em; }