:root{
  --pink:#ffc0cb; --ink:#0a0c10; --pill:rgba(10,12,16,.65); --blur:10px;
  --radius:18px; --shadow-lg:0 14px 30px rgba(0,0,0,.36), 0 6px 14px rgba(0,0,0,.18);
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang TC", "Noto Sans TC", "Heiti TC", "Microsoft JhengHei",
             "PMingLiU", sans-serif;
  --cta-gap:12px;
}
*{ box-sizing:border-box; }
html {
  touch-action: manipulation;
  overscroll-behavior-y: none;
}
html,body{ height:100%; margin:0; }
body{ background:var(--pink); color:#fff; font-family:var(--font-ui); }

/* 層級：Footer(-1) < Canvas(0) < Photos(1) < UI(2) */
#c{ position: fixed; inset: 0; z-index: 0; display:block; transition: opacity .35s ease; }
.tilted-photos-bg{ position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.tilted-photos-bg .photo{
  --img:url('');
  --x:50%; --y:50%; --r:0deg;
  position:absolute; left:var(--x); top:var(--y);
  width:clamp(120px,16vw,240px); aspect-ratio:3/4;
  background:#fff; border-radius:12px; box-shadow:var(--shadow-lg);
  transform: translate(-50%,-50%) rotate(var(--r)) scale(.94);
  transition: left 6s ease-in-out, top 6s ease-in-out, transform 6s ease-in-out;
  overflow:visible;
}
.tilted-photos-bg .photo::before{
  content:""; position:absolute; inset:8% 8% 16% 8%;
  background-image:var(--img); background-size:cover; background-position:center; border-radius:8px;
}

.page{ position: relative; z-index: 2; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; }
header{ padding: max(16px, env(safe-area-inset-top)) 20px 8px; display:flex; align-items:center; justify-content:center; position:relative; }

/* 右上角：登出 + 音樂 */
.top-actions{ position:absolute; right:16px; top:16px; display:flex; gap:8px; z-index:3; }
.chip{
  background: rgba(255,255,255,.9); color: var(--ink);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px; padding:.5rem .9rem; font:700 14px/1 var(--font-ui);
  cursor:pointer; box-shadow: 0 8px 16px rgba(0,0,0,.16);
}
.chip:hover{ filter:brightness(.98); }

.hero{ display:grid; place-items:center; text-align:center; padding: 8vh 20px 6vh; }
.hero h1{
  margin:0 0 12px; font: 800 clamp(28px, 6.6vw, 56px)/1.1 var(--font-ui);
  color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.45);
  background: rgba(10,12,16,.72);
  padding: .55rem .9rem; border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  display:inline-flex; align-items:center; gap:.55rem;
}
.avatar-inline{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.85);
}

/* 自適應的散文段落 */
.hero .prose{
  width:min(820px, 92vw);
  text-align:left;
  background: var(--pill);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.hero .prose p{
  margin: 0 0 12px;
  font: 500 clamp(15px, 3.8vw, 20px)/1.9 var(--font-ui);
}
.hero .prose p:last-child{ margin-bottom: 0; }

.cta{ display:flex; gap:var(--cta-gap); flex-wrap:wrap; justify-content:center; margin-top: 12px; isolation:isolate; }
.btn{
  appearance:none; border:0; border-radius:16px; padding:1rem 1.25rem;
  font: 800 16px/1.1 var(--font-ui); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.16), inset 0 -6px 12px rgba(0,0,0,.15), inset 0 6px 12px rgba(255,255,255,.35);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, opacity .2s ease;
  text-decoration:none; line-height:1.1;
}
.btn-primary{ background: linear-gradient(180deg, #ff7aa5, #ff477e); color:#fff; }
.btn-ghost{ background: linear-gradient(180deg, #ffffff, #f1f1f1); color: var(--ink); border: 1px solid rgba(0,0,0,.06); text-shadow: none; }
.btn:hover{ transform: translateY(-1px) scale(1.02); }
.btn:active{ transform: translateY(1px) scale(.98); }

main{ display:grid; gap:20px; padding: 0 20px 10vh; place-items:center; }

/* 初次載入不顯示列表；點擊後才顯示 */
.cards{
  width:min(1000px, 94vw);
  display:none; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  transition: all .25s ease;
}
.cards.show{ display:grid; }
.cards.single{ grid-template-columns: minmax(300px, 720px); place-items:center; }
.card{
  background: var(--pill); border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.card.hidden{ display:none !important; }
.card h3{ margin: 0 0 10px; font-size: 18px; }
.card p{ margin:0; line-height:1.65; font-weight: 500; }
.card .mt-8{ margin-top: 10px; }
.card .desc{ font-size: 14px; opacity:.95; margin-top: 6px; }

.reveal{ display:none; margin-top:10px; padding:12px; border-radius:14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.reveal.show{ display:block; }

.form{ display:grid; gap:10px; margin-top:10px; }
.form-row{ display:grid; gap:8px; }
.label{ font-weight:700; font-size:14px; }
.input{
  width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.25);
  padding:.8rem .9rem; font:600 16px/1.2 var(--font-ui); color:#111; background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.submit{ justify-self:start; }
.hint{ font-size:13px; opacity:.92; }
.error{ margin-top:8px; font-size:13px; color:#fff; background:#ff4f86; padding:.5rem .7rem; border-radius:10px; display:none; }
.error.show{ display:block; }

/* 🧩 footer 永遠在底層 */
footer {
  position: relative;
  z-index: -1; /* ⬇️ 永遠在最底層 */
  color: #fff;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(to top, rgba(255,255,255,.4), rgba(255,255,255,0));
  pointer-events: none; /* 🚫 整體不吃點擊 */
}

footer a {
  pointer-events: auto; /* ✅ Email 可點擊 */
  color: #878787;
  text-decoration: none;
  word-break: break-all;
}

footer a:hover {
  text-decoration: underline;
}

/* 手機自動斷行處理 */
footer small p {
  margin: 6px 0;
  line-height: 1.6;
  word-break: break-word;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce){
  .tilted-photos-bg .photo{ transition: none; }
  #c{ transition: none; }
}

#logoutBtn { display: none; }
.auth-yes #logoutBtn { display: inline-flex; }