/* Diary of Moon — 響應式互動體驗
   主螢幕 iPad 橫置；同時支援桌機與橫向手機。
   尺寸一律用 vmin/vh/clamp，全畫面置中、不可捲動。 */

:root {
  --gold: #FFE787;
  --cool: #D7FAFF;
  --moon: #D17E5A;
  --cursor: #3B3B3B;
  --home-arrow: #3F4064;
  --white: #FFFFFF;
  /* 字型角色（皆自託管開源 OFL，見 styles/fonts.css）。換字型只改這三個變數。 */
  --font-title: 'Great Vibes', 'Dancing Script', 'Brush Script MT', cursive; /* 標題：優雅女性 script */
  --font-hand:  'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;          /* 手寫：Dear/感謝詞 */
  --font-poem:  'Quicksand', system-ui, sans-serif;                          /* 詩內文：可讀優先（可換手寫） */
  --font-ui:    'Quicksand', system-ui, -apple-system, 'PingFang TC', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0b0a1f; }
body {
  font-family: var(--font-ui);
  color: var(--white);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; user-drag: none; }

#stage { position: fixed; inset: 0; overflow: hidden; }

/* ---------- 背景層（夜空 → 暖晨 cross-fade） ---------- */
.bg { position: absolute; inset: 0; opacity: 0; transition: opacity var(--bgfade, 1.4s) ease; }
#sky {
  opacity: 1;
  background:
    radial-gradient(120% 90% at 50% 18%, #2a2660 0%, #1a1640 45%, #0b0a1f 100%),
    radial-gradient(60% 50% at 78% 70%, rgba(80,70,160,.5), transparent 70%);
}
#dawn {
  background:
    linear-gradient(180deg, #fde8c8 0%, #f7d9a8 35%, #f3c7c9 65%, #e8b5d6 100%);
}
body[data-screen="reveal"] #sky,
body[data-screen="card"]  #sky,
body[data-screen="thanks"] #sky { opacity: 0; }
body[data-screen="reveal"] #dawn,
body[data-screen="card"]  #dawn { opacity: 1; }
body[data-screen="thanks"] #dawn {
  opacity: 1;
  background: linear-gradient(180deg, #fdf0d0 0%, #f8e0c4 40%, #f3c9d6 75%, #e9b9d2 100%);
}

/* ---------- 月亮 ---------- */
#moon {
  position: absolute; left: 50%; top: 30%;
  width: 7vmin; height: 7vmin; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 38%, #ffe7c2, var(--moon) 70%);
  box-shadow: 0 0 6vmin 1.4vmin rgba(209,126,90,.45);
  opacity: 0; transition: opacity 1.2s;
}
/* 發光動畫僅在首頁啟用；否則 infinite 動畫會覆蓋宣告式 opacity 導致月亮無法淡出 */
body[data-screen="home"] #moon { opacity: 1; animation: moonGlow 5.5s ease-in-out infinite; }
@keyframes moonGlow {
  0%,100% { opacity: .75; filter: brightness(.9); }
  43%     { opacity: 1;   filter: brightness(1.25); }
}

/* ---------- 星空 ---------- */
#starfield { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 .6vmin rgba(255,231,135,.8));
  animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
  transition: opacity 1.1s ease, width 1.5s ease, left 1.5s ease, top 1.5s ease;
  will-change: opacity, transform;
}
@keyframes twinkle {
  0%,100% { opacity: .15; }
  50%     { opacity: 1; }
}
.star--gone { opacity: 0 !important; animation: none; }
.star--chosen {
  animation: chosenPulse 1.4s ease-in-out infinite;
  pointer-events: auto; cursor: pointer; z-index: 5;
  filter: drop-shadow(0 0 3vmin rgba(255,231,135,1));
}
@keyframes chosenPulse {
  0%,100% { filter: drop-shadow(0 0 2vmin rgba(255,231,135,.8)); }
  50%     { filter: drop-shadow(0 0 4.5vmin rgba(255,231,135,1)); }
}
/* reveal：被選星星放大鋪滿畫面 */
body[data-screen="reveal"] .star--chosen {
  width: 220vmax !important; left: 50% !important; top: 50% !important;
  opacity: 0; animation: none; transition: width 1.7s ease-in, opacity 1.7s ease-in 1.1s;
}
body[data-screen="reveal"] .star:not(.star--chosen),
body:not([data-screen="home"]):not([data-screen="pick"]):not([data-screen="input"]) #starfield { opacity: 0; }
#starfield { transition: opacity 1.2s ease; }
body[data-screen="input"] #starfield { opacity: .4; } /* 過渡：星星變少 */

/* ---------- 標題 Diary of Moon ---------- */
#title {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 11vmin, 9rem);
  color: var(--cool);
  animation: titleGlow 4.6s ease-in-out infinite;
  transition: top 1.6s ease, color 1.6s ease, opacity 1s ease;
  white-space: nowrap; z-index: 6;
}
/* 冷白發光（首頁） */
@keyframes titleGlow {
  0%,100% { text-shadow: 0 0 1.6vmin rgba(215,250,255,.5); }
  47%     { text-shadow: 0 0 3.4vmin rgba(215,250,255,.95); }
}
/* 金色發光（過渡後）。獨立動畫避免 animation 覆蓋 text-shadow 過渡導致瞬跳 */
@keyframes titleGlowGold {
  0%,100% { text-shadow: 0 0 1.8vmin rgba(255,231,135,.6); }
  47%     { text-shadow: 0 0 3.6vmin rgba(255,231,135,1); }
}
/* 過渡後：上移、染金 */
body[data-screen="input"] #title,
body[data-screen="pick"]  #title {
  top: 14%; color: var(--gold);
  animation: titleGlowGold 4.6s ease-in-out infinite;
}
body:not([data-screen="home"]):not([data-screen="input"]):not([data-screen="pick"]) #title { opacity: 0; }

/* ---------- Follow Me Here 按鈕 ---------- */
#follow {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .18em;
  font-size: clamp(.9rem, 2.4vmin, 1.6rem); color: var(--white);
  padding: 1.4vmin 4.4vmin; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 3vmin rgba(215,250,255,.55), inset 0 0 2vmin rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .8s; z-index: 6;
}
/* fade-in 動畫僅首頁；否則 forwards 動畫會覆蓋 opacity:0 使按鈕不消失 */
body[data-screen="home"] #follow { pointer-events: auto; animation: followIn 1.6s ease forwards .6s; }
@keyframes followIn {
  from { opacity: 0; transform: translate(-50%, 20%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- 輸入區（提示 + 姓名顯示框） ---------- */
#inputWrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(80vw, 70vmin); display: flex; flex-direction: column; align-items: center;
  gap: 2.2vmin; opacity: 0; pointer-events: none; transition: opacity 1s ease .4s; z-index: 7;
}
body[data-screen="input"] #inputWrap { opacity: 1; pointer-events: auto; }
#prompt { text-align: center; }
.prompt-main { display: block; letter-spacing: .12em; font-size: clamp(.8rem, 2.2vmin, 1.4rem); color: var(--white); }
.prompt-sub  { display: block; margin-top: .6vmin; font-size: clamp(.7rem, 1.7vmin, 1.05rem); color: rgba(255,255,255,.7); }
#nameBox {
  width: 100%; min-height: 8vmin; border-radius: 999px;
  border: .35vmin solid var(--cool);
  background: rgba(215,250,255,.06);
  box-shadow: 0 0 2.4vmin rgba(215,250,255,.4), inset 0 0 1.6vmin rgba(215,250,255,.2);
  display: flex; align-items: center; justify-content: center; padding: 0 4vmin;
}
#nameDisplay {
  font-size: clamp(1.2rem, 4vmin, 2.6rem); letter-spacing: .06em; color: var(--cool);
  min-height: 1.2em;
}
#nameDisplay::after {
  content: ''; display: inline-block; width: .12em; height: 1.05em;
  margin-left: .04em; background: var(--cursor); vertical-align: -.12em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.input-handwriting #nameDisplay { font-family: var(--font-hand); font-size: clamp(1.6rem, 5vmin, 3.2rem); }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(-54%,-50%)} 75%{transform:translate(-46%,-50%)} }

/* ---------- 螢幕鍵盤 ---------- */
#keyboard {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  width: min(94vw, 150vmin); display: flex; flex-direction: column; gap: 1.1vh;
  opacity: 0; pointer-events: none; transition: opacity .8s ease .5s; z-index: 8;
}
body[data-screen="input"] #keyboard { opacity: .85; pointer-events: auto; } /* 透明度 ~60% 規格 → 整體 .85，鍵面再降 */
.kbd-row { display: flex; justify-content: center; gap: 1vmin; }
.kbd-key {
  flex: 1 1 0; max-width: 11vmin; min-width: 0;
  height: clamp(2.75rem, 7.5vh, 4.4rem); /* 下限 44px，符合觸控最小目標 */
  border: none; border-radius: 1.6vmin; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(.8rem, 2.4vmin, 1.4rem); color: #2a2750;
  background: rgba(255,255,255,.6);
  box-shadow: 0 .4vmin 1.2vmin rgba(0,0,0,.25), inset 0 .2vmin .6vmin rgba(255,255,255,.8);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.kbd--handwriting .kbd-key { font-family: var(--font-hand); font-size: clamp(1rem, 3vmin, 1.8rem); }
.kbd-key--press { transform: translateY(.5vmin) scale(.95); background: var(--gold); box-shadow: 0 0 2vmin var(--gold); }
.kbd-row--fn .kbd-key { flex: 0 0 auto; padding: 0 3vmin; }
.kbd-key--space { flex: 1 1 auto; max-width: none; letter-spacing: .3em; text-transform: uppercase; font-size: .8em; }
.kbd-key--globe { background: rgba(215,250,255,.7); }
.kbd-key--enter { background: var(--gold); color: #4a4320; }

/* ---------- 卡片畫面（Dear + 詩，QR） ---------- */
#cardScreen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 1.2s ease; z-index: 9; padding: 4vmin;
}
body[data-screen="card"] #cardScreen { opacity: 1; pointer-events: auto; }
#cardImage {
  position: relative;
  width: min(56vh, 70vw); aspect-ratio: 3 / 4; max-height: 92vh;
  background-size: cover; background-position: center; border-radius: 2.4vmin;
  box-shadow: 0 1.4vmin 5vmin rgba(0,0,0,.35);
  display: flex; flex-direction: column; padding: 5% 7%;
  color: #3a2f3a; overflow: hidden;
}
#cardDear { font-family: var(--font-hand); font-size: clamp(1rem, 3.4vmin, 2rem); margin-bottom: 1.5%; }
#cardPoem {
  font-family: var(--font-poem); white-space: pre-wrap;
  font-size: clamp(.6rem, 1.9vmin, 1.05rem); line-height: 1.45;
  overflow: hidden; flex: 1; text-shadow: 0 0 .4vmin rgba(255,255,255,.6);
}
#qr {
  position: absolute; right: 3vmin; bottom: 3vmin; width: 14vmin; max-width: 130px;
  background: #fff; padding: 1vmin; border-radius: 1.2vmin; box-shadow: 0 .6vmin 2vmin rgba(0,0,0,.3);
  opacity: 0; transform: scale(.85); transition: opacity .6s ease, transform .6s ease; z-index: 12;
}
#qr.show { opacity: 1; transform: scale(1); }
.qr-box { width: 100%; aspect-ratio: 1; display: flex; }
.qr-cap { display: block; text-align: center; font-size: 1.3vmin; color: #555; margin-top: .4vmin; }

/* ---------- 尾頁 ---------- */
#thanksScreen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 1.4s ease; z-index: 9;
}
body[data-screen="thanks"] #thanksScreen { opacity: 1; pointer-events: auto; }
#thanksText {
  font-family: var(--font-hand); white-space: pre-line; text-align: center;
  font-size: clamp(1.4rem, 5vmin, 3.4rem); color: #6b5a52; line-height: 1.5;
  text-shadow: 0 0 1vmin rgba(255,255,255,.6);
}

/* ---------- 回首頁箭頭 ---------- */
.home-arrow {
  position: absolute; left: 3vmin; bottom: 3vmin; z-index: 20;
  width: 7vmin; height: 7vmin; border-radius: 50%; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,.35); color: var(--home-arrow);
  font-size: 4vmin; line-height: 1;
}
body[data-screen="card"] .home-arrow,
body[data-screen="thanks"] .home-arrow { display: flex; }

/* ---------- 錯誤 ---------- */
#errorMsg { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 3vmin; }
body[data-screen="error"] #errorMsg { display: flex; }

/* ---------- 矮橫向手機：避免鍵盤與輸入框重疊（P0） ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  #title { top: 11%; }
  #inputWrap { top: 34%; }
  #keyboard { bottom: 1.5vh; gap: .6vh; }
  .kbd-row { gap: .6vmin; }
  .kbd-key { height: clamp(2.5rem, 11vh, 3.4rem); border-radius: 1.2vmin; }
  #nameBox { min-height: 6vh; }
}

/* ---------- 直向提示（鼓勵橫置） ---------- */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 920px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 999;
    align-items: center; justify-content: center; text-align: center; padding: 8vw;
    background: #1a1640; color: var(--cool); font-size: 5vw; line-height: 1.6;
  }
}