/* 跟收集頁同一套「明亮圓潤戶外」皮 */
:root{
  --sky:#6cc8ff; --sky2:#c9ecff; --grass:#9bdc6e; --leaf:#2e9e5b; --navy:#17405e; --sun:#ffcd2e; --sun2:#e8a300;
  --card:#ffffff; --mute:#5d7f97; --shadow:#17405e22;
  --round:"Huninn","M PLUS Rounded 1c","Noto Sans TC",system-ui,sans-serif; --num:"Fredoka","Huninn",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#dff3ff;color:var(--navy);font-family:var(--round);overscroll-behavior:none}
body{display:grid;place-items:center;overflow:hidden;position:fixed;inset:0}
#app{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#9ab;touch-action:none;user-select:none;-webkit-user-select:none}
@media (min-width:600px){#app{width:390px;height:min(844px,96vh);border-radius:40px;box-shadow:0 30px 80px #17405e40,0 0 0 8px #fff}}
#video,#bg,#tv{position:absolute;inset:0;width:100%;height:100%}
#video{object-fit:cover;display:none;background:#000}
#app.cam #video{display:block}#app.cam #bg{display:none}
#tv{pointer-events:none;z-index:2}

.btn{appearance:none;cursor:pointer;border:0;font:900 18px/1 var(--round);color:var(--navy);background:var(--sun);border-radius:99px;min-height:56px;padding:0 22px;box-shadow:0 6px 0 var(--sun2),0 12px 24px #e8a30033;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sun2)}
.btn.w{background:#fff;box-shadow:0 6px 0 #c6dce9}
.btn.w:active{box-shadow:0 2px 0 #c6dce9}
.btn.big{height:66px;font-size:22px;padding:0 34px}
.badge{display:inline-flex;align-items:center;font:800 11.5px/1 var(--round);padding:6px 10px;border-radius:99px;background:#fff;color:var(--mute);white-space:nowrap;box-shadow:0 3px 0 var(--shadow)}
.badge.sim{background:var(--sun);color:var(--navy)}
.chip{font:800 15px/1.2 var(--round);color:var(--navy);background:#fff;padding:11px 18px;border-radius:99px;box-shadow:0 5px 0 var(--shadow);white-space:nowrap}

/* 頂部 */
#top{position:absolute;left:0;right:0;top:0;padding:calc(12px + env(safe-area-inset-top)) 12px 0;z-index:10;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}
#badges{align-self:flex-end;display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
#year{font:800 20px/1 var(--round);color:var(--navy);background:#fff;border-radius:99px;padding:10px 18px;box-shadow:0 5px 0 var(--shadow);opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s cubic-bezier(.2,1.6,.3,1)}
#year b{font:700 26px/1 var(--num);color:var(--leaf);margin:0 4px;display:inline-block;min-width:1.2em;text-align:center}
#year.show{opacity:1;transform:scale(1)}
#year.tick b{animation:tick .18s ease-out}
@keyframes tick{0%{transform:translateY(-6px) scale(1.25)}100%{transform:none}}

#home{position:absolute;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:45;height:44px;min-width:44px;padding:0 16px;border-radius:99px;background:#fff;color:var(--navy);font:800 14px/44px var(--round);text-decoration:none;box-shadow:0 4px 0 var(--shadow)}
#home:active{transform:translateY(3px)}

/* 開場 */
#intro{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;gap:9vh;padding:calc(70px + env(safe-area-inset-top)) 24px calc(54px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 48%,#eef9ff 76%,var(--grass) 76.2%,#86cf5c 100%)}
#app.intro #intro{display:flex}
.hero{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:4vh}
.sprout{width:150px;height:150px;filter:drop-shadow(0 6px 0 #17405e18);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
#intro h1{margin:0;text-align:center;font:900 44px/1.12 var(--round);color:#1f6b3a;text-shadow:0 3px 0 #ffffffb0;letter-spacing:.02em}

/* 提示 */
#hint{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);z-index:9;pointer-events:none;opacity:0;transition:opacity .25s}
#hint.show{opacity:1}

/* 選樹種 */
#pick{position:absolute;left:0;right:0;bottom:0;z-index:10;display:none;flex-direction:column;align-items:center;gap:14px;padding:0 0 calc(22px + env(safe-area-inset-bottom))}
#app.pick #pick{display:flex}
#cards{display:flex;gap:10px;overflow-x:auto;width:100%;padding:6px 14px 10px;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior:contain}
#cards::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:118px;min-height:132px;scroll-snap-align:center;appearance:none;cursor:pointer;border:3px solid transparent;background:#fff;border-radius:22px;padding:10px 10px 11px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:0 5px 0 var(--shadow);color:var(--navy);font-family:var(--round);text-align:center;transition:transform .15s cubic-bezier(.2,1.6,.3,1)}
.card svg{width:52px;height:52px}
.card b{font:800 15px/1.15 var(--round)}
.card small{font:700 11.5px/1.3 var(--round);color:var(--mute)}
.card[aria-selected="true"]{border-color:var(--sun);transform:translateY(-4px);box-shadow:0 7px 0 var(--sun2)}

/* 快門 */
#shut{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));margin-left:-44px;width:88px;height:88px;border-radius:50%;border:6px solid #fff;padding:0;background:#ffffff55;cursor:pointer;z-index:12;display:none;box-shadow:0 6px 0 var(--shadow);animation:pop .45s cubic-bezier(.2,1.6,.3,1)}
#shut .core{position:absolute;inset:7px;border-radius:50%;background:var(--sun);box-shadow:0 4px 0 var(--sun2);transition:transform .1s}
#shut:active .core{transform:scale(.88)}
#app.grown #shut{display:block}
@keyframes pop{from{transform:scale(.3);opacity:0}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}

/* 完成 */
#done{position:absolute;inset:0;z-index:40;display:none;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 30%,#eef9ff 70%)}
#app.done #done{display:block}
.sheet{padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:rise .5s cubic-bezier(.2,1.3,.3,1)}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.photo{position:relative;border-radius:26px;background:#fff;padding:8px;box-shadow:0 8px 0 #c6dce9,0 20px 40px #17405e33}
.photo img{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:19px;background:#cfe6f2}
#gain{position:absolute;right:-4px;top:-10px;font:900 16px/1 var(--round);color:var(--navy);background:var(--sun);border-radius:99px;padding:10px 16px;box-shadow:0 5px 0 var(--sun2);transform:scale(0) rotate(-12deg)}
#gain b{font:700 28px/1 var(--num)}
#gain.show{animation:gain .7s cubic-bezier(.2,1.8,.3,1) forwards}
@keyframes gain{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(-6deg)}}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.row h2{margin:0;font:900 30px/1.1 var(--round);color:var(--navy)}
#dbadges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.total{font:800 15px/1 var(--round);color:var(--mute);margin-top:-6px}
.total b{font:700 22px/1 var(--num);color:var(--navy);margin:0 3px}
.prog{background:#fff;border-radius:22px;padding:14px 16px 16px;box-shadow:0 5px 0 var(--shadow)}
.pl{display:flex;justify-content:space-between;align-items:baseline;font:800 15px/1 var(--round);margin-bottom:10px}
.pl b{font:700 20px/1 var(--num)}
.bar{height:18px;border-radius:99px;background:#e3f1d8;overflow:hidden;box-shadow:inset 0 2px 0 #17405e14}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--grass),var(--leaf));transition:width 1.2s cubic-bezier(.2,1,.3,1)}
.acts{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.acts .btn{width:100%}
.two{display:flex;gap:10px}.two .btn{flex:1;font-size:16px;padding:0 10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* 快門在選樹種列下方：預覽時就能按 */
#pick #shut{position:relative;left:auto;bottom:auto;margin:0;display:block;flex:none}
#credit{position:fixed;left:8px;bottom:calc(4px + env(safe-area-inset-bottom));z-index:20;font:600 10px/1.2 var(--round);color:#ffffffd0;text-shadow:0 1px 2px #0008;text-decoration:none}
#app.intro ~ #credit,#app.done ~ #credit{color:var(--mute);text-shadow:none}
#year .sy{font:800 11px/1 var(--round);font-style:normal;color:var(--navy);background:var(--sun);border-radius:99px;padding:4px 7px;margin-left:8px;vertical-align:3px}
#vote{align-self:center;display:inline-block;margin-top:4px;padding:10px 18px;border-radius:99px;background:var(--sun);color:var(--navy);font:800 14px/1 var(--round);text-decoration:none;box-shadow:0 4px 0 var(--sun2)}
#vote:active{transform:translateY(3px)}