/* 貓咪圖鑑 — 果凍軟糖風 v3｜claymorphism 澎潤 3D・糖果色・光澤・Q 彈 */
:root{
  --pink:#FF8FB8; --pink-deep:#FF5E97; --grape:#B79CFF; --grape-deep:#9B7DF5;
  --mint:#8FE0C2; --lemon:#FFD86E; --sky:#9FD4FF; --peach:#FFB59C;
  --ink:#5b4b63; --muted:#a99fb3; --base:#FFF3F7;
  /* 軟糖陰影：右下深影 + 左上亮邊 + 內凹亮/暗，做出澎澎立體 */
  --clay: 7px 7px 16px rgba(170,140,190,.30), -6px -6px 14px rgba(255,255,255,.9),
          inset 2px 2px 4px rgba(255,255,255,.65), inset -3px -3px 7px rgba(170,140,190,.22);
  --clay-sm: 4px 4px 10px rgba(170,140,190,.28), -3px -3px 8px rgba(255,255,255,.9),
          inset 1px 1px 3px rgba(255,255,255,.6), inset -2px -2px 5px rgba(170,140,190,.2);
  --press: inset 4px 4px 9px rgba(170,140,190,.4), inset -3px -3px 7px rgba(255,255,255,.7);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  color:var(--ink); position:relative; overflow:hidden;
  background:linear-gradient(165deg,#FFE7F1 0%,#FBEFFF 45%,#E8FBF3 100%);
  display:flex; flex-direction:column; height:100dvh;
}
/* 背景澎澎糖果泡泡 */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(8px);z-index:0;pointer-events:none}
body::before{width:220px;height:220px;top:-60px;right:-50px;background:radial-gradient(circle at 35% 30%,#FFE08A,#FFD86E00 70%);opacity:.5}
body::after{width:260px;height:260px;bottom:-80px;left:-70px;background:radial-gradient(circle at 35% 30%,#A9E8FF,#9FD4FF00 70%);opacity:.5}
.view,.topbar,.tabbar{position:relative;z-index:1}

/* 載入 */
.boot{position:fixed;inset:0;z-index:100;background:linear-gradient(165deg,#FFE7F1,#FBEFFF 50%,#E8FBF3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;transition:opacity .4s}
.boot-emoji{font-size:78px;animation:bob 1.5s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(170,140,190,.4))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg) scale(1)}50%{transform:translateY(-14px) rotate(5deg) scale(1.05)}}
.boot-title{font-size:30px;font-weight:900;color:var(--pink-deep);letter-spacing:1.5px;text-shadow:2px 2px 0 #fff}
.boot-status{color:var(--muted);font-size:14px;font-weight:700}
.boot-bar{width:min(280px,72vw);height:14px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:var(--press)}
.boot-bar-fill{height:100%;width:8%;border-radius:99px;transition:width .3s;
  background:linear-gradient(90deg,var(--lemon),var(--pink),var(--grape));box-shadow:inset 0 2px 3px rgba(255,255,255,.6)}
.boot-hint{color:var(--muted);font-size:12px;text-align:center;max-width:280px;line-height:1.7;font-weight:600}

/* 頂部 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 18px 0;
  height:calc(62px + env(safe-area-inset-top));flex:0 0 auto}
.brand{font-weight:900;font-size:20px;color:var(--pink-deep);background:#fff;padding:10px 18px;border-radius:99px;box-shadow:var(--clay-sm);text-shadow:1px 1px 0 #ffe}
.stats{display:flex;gap:10px}
.stat{text-align:center;line-height:1;background:#fff;border-radius:20px;padding:9px 14px;box-shadow:var(--clay-sm)}
.stat b{font-size:20px;color:var(--grape-deep)} .stat small{display:block;font-size:10px;color:var(--muted);margin-top:3px;font-weight:700}

.view{flex:1 1 auto;overflow:auto;display:none}
.view.active{display:block}

/* 相機：澎澎軟糖框 */
.cam-wrap{position:relative;width:calc(100% - 30px);margin:16px auto 0;aspect-ratio:3/4;max-height:58vh;
  background:#2a2233;overflow:hidden;border-radius:34px;
  box-shadow:7px 7px 18px rgba(170,140,190,.4), -6px -6px 14px rgba(255,255,255,.85), inset 0 0 0 6px #fff}
#video{width:100%;height:100%;object-fit:cover;display:block}
.cam-corner{position:absolute;width:24px;height:24px;border:5px solid #FFD86E;opacity:.95;border-radius:8px}
.cam-corner.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.cam-corner.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.cam-corner.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.cam-corner.br{bottom:16px;right:16px;border-left:0;border-top:0}
.cam-hint{position:absolute;inset:auto 16px 16px;background:rgba(255,255,255,.92);color:var(--ink);
  padding:11px 16px;border-radius:18px;font-size:13.5px;font-weight:700;text-align:center;line-height:1.6;box-shadow:var(--clay-sm)}
.cam-controls{display:flex;align-items:center;justify-content:center;gap:26px;padding:22px}
/* 果凍拍照鈕：糖果漸層 + 頂部光澤 */
.shoot-btn{position:relative;display:flex;align-items:center;gap:7px;font-size:22px;font-weight:900;color:#fff;
  background:linear-gradient(150deg,#FFA0C4,#FF5E97);border:none;border-radius:99px;padding:18px 44px;cursor:pointer;
  box-shadow:7px 8px 18px rgba(255,94,151,.5), -4px -4px 10px rgba(255,255,255,.6), inset 2px 2px 5px rgba(255,255,255,.6), inset -3px -4px 8px rgba(200,40,100,.4);
  text-shadow:0 2px 3px rgba(190,40,90,.4);animation:squish 2.4s ease-in-out infinite}
.shoot-btn::before{content:"";position:absolute;top:5px;left:16%;right:16%;height:38%;border-radius:99px;
  background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,0))}
.shoot-btn span{font-size:24px;filter:drop-shadow(0 2px 1px rgba(190,40,90,.3))}
.shoot-btn:active{transform:scale(.9);box-shadow:var(--press)}
@keyframes squish{0%,100%{transform:scale(1)}50%{transform:scale(1.06,.96)}}
.round-btn{position:relative;width:58px;height:58px;border-radius:50%;border:none;background:#fff;font-size:24px;cursor:pointer;box-shadow:var(--clay)}
.round-btn::before{content:"";position:absolute;top:6px;left:24%;right:24%;height:30%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0))}
.round-btn:active{transform:scale(.9);box-shadow:var(--press)}

/* 收集牆：每隻貓躺在軟糖糖磚上浮動 */
.dex-empty{text-align:center;color:var(--muted);padding:64px 24px;line-height:2.1;font-size:15px;font-weight:700}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 14px;padding:20px 16px 30px}
.dex-cell{position:relative;border:none;cursor:pointer;aspect-ratio:1;padding:10px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--clay);background:#fff}
.dex-cell:nth-child(6n+1){background:#FFE3EF}.dex-cell:nth-child(6n+2){background:#EBE4FF}
.dex-cell:nth-child(6n+3){background:#DFF7EE}.dex-cell:nth-child(6n+4){background:#FFF1D6}
.dex-cell:nth-child(6n+5){background:#E2F1FF}.dex-cell:nth-child(6n){background:#FFE8DF}
.dex-cell::before{content:"";position:absolute;top:8px;left:18%;right:18%;height:26%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.sticker-float{display:block;width:100%;height:100%;animation:floaty var(--dur,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.sticker-float img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(91,75,99,.32));transform:rotate(var(--rot,0deg))}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dex-cell:active{transform:scale(.95);box-shadow:var(--press)}
.dex-cell:active .sticker-float{animation-play-state:paused}
.cell-badge{position:absolute;top:-6px;left:-4px;z-index:2;color:#fff;font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;box-shadow:var(--clay-sm);text-shadow:0 1px 1px rgba(0,0,0,.15)}
.cell-dup{position:absolute;top:-6px;right:-4px;z-index:2;background:#fff;color:var(--grape-deep);font-size:11px;font-weight:900;padding:3px 8px;border-radius:99px;box-shadow:var(--clay-sm)}
.cell-name{position:absolute;left:0;right:0;bottom:-22px;color:var(--ink);font-size:12.5px;font-weight:800;text-align:center}
.rar-SSR .sticker-float img{filter:drop-shadow(0 0 11px rgba(242,181,59,.95)) drop-shadow(0 6px 6px rgba(91,75,99,.25))}
.rar-SR .sticker-float img{filter:drop-shadow(0 0 9px rgba(255,123,169,.85)) drop-shadow(0 6px 6px rgba(91,75,99,.25))}

/* 底部分頁：果凍膠囊 */
.tabbar{display:flex;flex:0 0 auto;gap:10px;padding:8px 14px calc(10px + env(safe-area-inset-bottom))}
.tab{position:relative;flex:1;border:none;background:#fff;padding:14px 0;font-size:15px;font-weight:900;color:var(--muted);cursor:pointer;border-radius:22px;box-shadow:var(--clay-sm)}
.tab.active{color:#fff;background:linear-gradient(150deg,#FFA0C4,#FF5E97);box-shadow:5px 6px 14px rgba(255,94,151,.45),inset 2px 2px 4px rgba(255,255,255,.5),inset -2px -3px 6px rgba(200,40,100,.35)}
.tab.active::before{content:"";position:absolute;top:5px;left:20%;right:20%;height:34%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0))}

/* 彈窗：澎澎軟糖卡 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(91,75,99,.45);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.result-card{position:relative;background:#fff;border-radius:34px;padding:26px 22px;max-width:420px;width:100%;
  text-align:center;box-shadow:10px 12px 30px rgba(91,75,99,.4), -6px -6px 16px rgba(255,255,255,.7), inset 2px 2px 5px rgba(255,255,255,.7);max-height:92dvh;overflow:auto}
.pop{animation:pop .45s cubic-bezier(.18,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.rarity-badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:#fff;font-weight:900;
  font-size:15px;padding:7px 20px;border-radius:99px;box-shadow:var(--clay-sm);text-shadow:0 1px 2px rgba(0,0,0,.2)}
.result-images{display:flex;gap:12px;margin:18px 0 6px}
.result-images figure{flex:1;margin:0}
.result-images img{width:100%;border-radius:20px;aspect-ratio:1;object-fit:cover;box-shadow:var(--clay-sm)}
.sticker-cell{background:repeating-conic-gradient(#f1ecfa 0% 25%,#fff 0% 50%) 0/16px 16px;border-radius:20px}
.sticker-cell img{object-fit:contain !important;box-shadow:none !important;
  filter:drop-shadow(0 7px 9px rgba(91,75,99,.32));animation:floaty 3s ease-in-out infinite}
.sticker-cell.big{max-width:240px;margin:20px auto 6px;padding:12px}
.sticker-cell.big img{aspect-ratio:auto;max-height:240px}
.result-images figcaption{font-size:12px;color:var(--muted);margin-top:6px;font-weight:800}
.result-title{font-size:26px;font-weight:900;margin:10px 0;color:var(--ink);text-shadow:1px 1px 0 #fff}
.result-meta{font-size:14px;color:var(--ink);line-height:2;font-weight:600}
.result-meta .muted,.muted{color:var(--muted);font-size:12px}
.result-dup{background:#FFF6E6;border:0;color:#9a6a1a;border-radius:18px;padding:12px;font-size:13px;margin:12px 0;line-height:1.6;font-weight:700;box-shadow:var(--clay-sm)}
.detail-orig{margin:14px 0 0}.detail-orig img{width:100%;max-width:240px;border-radius:18px;box-shadow:var(--clay-sm)}
.detail-orig figcaption{font-size:12px;color:var(--muted);margin-top:6px;font-weight:700}
.result-actions{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.btn-primary{position:relative;background:linear-gradient(150deg,#FFA0C4,#FF5E97);color:#fff;border:none;border-radius:20px;
  padding:16px;font-size:16px;font-weight:900;cursor:pointer;text-shadow:0 2px 3px rgba(190,40,90,.35);
  box-shadow:6px 7px 16px rgba(255,94,151,.45),inset 2px 2px 5px rgba(255,255,255,.55),inset -3px -4px 8px rgba(200,40,100,.35)}
.btn-primary::before{content:"";position:absolute;top:5px;left:18%;right:18%;height:36%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.btn-primary:active{transform:scale(.96);box-shadow:var(--press)}
.btn-ghost{background:#fff;border:none;color:var(--muted);border-radius:20px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:var(--clay-sm)}
.btn-ghost:active{transform:scale(.96);box-shadow:var(--press)}

/* 星星灑落 */
.sparkle{position:absolute;font-size:24px;pointer-events:none;animation:sparkle 1.1s ease-out forwards;z-index:60}
@keyframes sparkle{0%{transform:translateY(0) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(-50px) scale(1.3) rotate(40deg);opacity:0}}

/* Toast */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:70;
  background:#fff;color:var(--ink);padding:13px 22px;border-radius:99px;font-size:14px;font-weight:800;max-width:88vw;text-align:center;
  opacity:0;pointer-events:none;transition:all .25s;box-shadow:var(--clay)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}