:root {
  --bg: #fff0f5; --card: #ffffff; --gold: #e8738a; --gold2: #d4627a;
  --rose: #c4556d; --text: #4a3040; --muted: #9a7a88;
  --deep: #ffe8ee; --star: #ffd0de; --accent: #e8738a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Noto Serif SC', 'PingFang SC', serif;
  background: var(--bg); color: var(--text);
  overflow-x: hidden; line-height:1.8;
}
/* Stars background */
.stars { position:fixed; inset:0; pointer-events:none; z-index:0; }
.stars span { position:absolute; background:var(--star); border-radius:50%;
  animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.3} 50%{opacity:1} }

/* Section / Scene */
.section { min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; position:relative; z-index:1; }
.container { max-width:600px; width:100%; text-align:center; }

/* GATE */
#gate { min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; z-index:1; }
#gate .title { font-size:clamp(32px,5vw,56px); color:var(--gold); margin-bottom:8px;
  text-shadow:0 0 40px rgba(240,192,96,.4); }
#gate .sub { color:var(--muted); margin-bottom:36px; font-size:16px; }
#gate .input-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#gate input {
  padding:14px 22px; border-radius:30px; border:1.5px solid rgba(240,192,96,.3);
  background:var(--card); color:var(--text); font-size:16px; width:220px;
  outline:none; font-family:inherit; text-align:center; transition:.3s;
}
/* Gate collapse */
#gate.collapsing { animation: gateCollapse 1.6s ease-in forwards; pointer-events:none; }
@keyframes gateCollapse {
  0% { transform:scale(1); opacity:1; filter:blur(0); }
  100% { transform:scale(0.01); opacity:0; filter:blur(12px); }
}

/* Main assemble */
#main { transition:opacity 1.6s ease-out .6s,transform 1.6s ease-out .6s; }
#main.assemble { display:block!important; opacity:1!important; transform:scale(1)!important; }
#gate .btn { cursor:pointer; padding:14px 32px; border-radius:30px; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2)); color:var(--deep);
  font-weight:700; font-size:16px; font-family:inherit; transition:.3s; }
#gate .btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(240,192,96,.3); }
#gate .hint { color:var(--rose); margin-top:16px; font-size:14px; min-height:24px; }

/* Main scene container */
#main { width:100%; min-height:100vh; position:relative; }

/* Countdown */
.countdown { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cd-box { background:var(--card); border-radius:20px; padding:20px 18px; min-width:80px;
  border:1px solid rgba(240,192,96,.2); text-align:center; }
.cd-box .num { font-size:42px; font-weight:900; color:var(--gold);
  text-shadow:0 0 20px rgba(240,192,96,.3); }
.cd-box .label { font-size:13px; color:var(--muted); margin-top:4px; }

/* Timeline */
.timeline { position:relative; padding:20px 0; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0;
  width:2px; background:linear-gradient(to bottom,transparent,var(--gold),var(--gold),transparent); transform:translateX(-50%); }
.tl-item { display:flex; align-items:center; margin-bottom:36px; position:relative; }
.tl-item:nth-child(odd) { flex-direction:row; }
.tl-item:nth-child(even) { flex-direction:row-reverse; }
.tl-card { background:var(--card); border-radius:16px; padding:18px 20px; width:44%;
  border:1px solid rgba(240,192,96,.15); text-align:left;
  transition:.3s; position:relative; }
.tl-card:hover { transform:translateY(-3px); border-color:rgba(240,192,96,.35); }
.tl-card .date { color:var(--gold); font-size:13px; font-weight:700; margin-bottom:6px; }
.tl-card .title { font-size:17px; font-weight:700; margin-bottom:4px; }
.tl-card .desc { color:var(--muted); font-size:14px; }
.tl-dot { width:16px; height:16px; border-radius:50%; background:var(--gold);
  border:3px solid var(--deep); z-index:2; flex-shrink:0;
  box-shadow:0 0 16px rgba(240,192,96,.4); margin:0 18px; }
.tl-item .spacer { width:44%; }
.tl-card.mystery { border:1.5px dashed rgba(232,115,138,.4); background:rgba(255,232,238,.8); }
.tl-card.mystery .date { color:var(--accent); }

/* Larger section icons */
.section .container > div:first-child { font-size:22px!important; }

/* Game tabs */
.game-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.game-tab { padding:8px 16px; border-radius:20px; cursor:pointer; font-size:14px; border:1px solid rgba(232,115,138,.3); background:var(--card); color:var(--muted); transition:.2s; font-family:inherit; }
.game-tab.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.game-panel { display:none; }
.game-panel.active { display:block; }

/* Quiz */
.quiz { text-align:left; }
.q-card { background:var(--card); border-radius:16px; padding:24px; margin-bottom:20px;
  border:1px solid rgba(240,192,96,.15); }
.q-card .q-title { font-weight:700; margin-bottom:14px; font-size:16px; color:var(--gold); }
.q-card .opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.q-card .opt { padding:10px 14px; border-radius:12px; border:1px solid rgba(240,192,96,.2);
  background:transparent; color:var(--text); cursor:pointer; text-align:center;
  transition:.25s; font-family:inherit; font-size:14px; }
.q-card .opt:hover { border-color:var(--gold); }
.q-card .opt.picked { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:var(--deep); border-color:transparent; font-weight:700; }
.q-card .opt.wrong { background:rgba(224,100,120,.25); border-color:var(--rose); }
.q-card .opt.correct { background:rgba(100,200,140,.25); border-color:#64c88c; }
.score { text-align:center; margin-top:24px; padding:20px; border-radius:16px;
  background:var(--card); border:1px solid rgba(240,192,96,.2); }
.score .big { font-size:28px; color:var(--gold); font-weight:900; }
.score .msg { color:var(--muted); margin-top:6px; font-size:15px; }

/* Wishing Tree */
.tree { position:relative; width:200px; height:280px; margin:0 auto 24px; }
.tree .trunk { position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:12px; height:80px; background:linear-gradient(to top,#5a3a1a,#8a6030); border-radius:6px; }
.tree .branch { position:absolute; width:100px; height:2px; background:rgba(138,96,48,.5);
  border-radius:1px; transform-origin:center left; }
.tree .star-ornament { position:absolute; font-size:16px; cursor:pointer; transition:.3s;
  filter:grayscale(1) brightness(.6); }
.tree .star-ornament.you { filter:none; animation:glow-star 2s ease-in-out infinite; }
.tree .star-ornament.lit { filter:none; animation:glow-star 2s ease-in-out infinite; }
@keyframes glow-star { 0%,100%{transform:scale(1); opacity:.8} 50%{transform:scale(1.3); opacity:1} }
.wish-box { background:var(--card); border-radius:16px; padding:20px; margin-top:14px;
  border:1px solid rgba(240,192,96,.15); }
.wish-box .wish { font-size:15px; color:var(--gold); line-height:1.8; }
.wish-box .wish.locked { color:var(--muted); font-style:italic; cursor:pointer; }
.wish-box .wish.locked:hover { color:var(--accent); }
.wish-input { display:flex; gap:8px; margin-top:12px; }
.wish-input input { flex:1; padding:10px 14px; border-radius:14px; border:1px solid rgba(240,192,96,.2);
  background:var(--card); color:var(--text); font-family:inherit; }
.wish-input .btn-sm { padding:10px 20px; border-radius:14px; border:none;
  background:var(--gold); color:var(--deep); font-weight:700; cursor:pointer; font-family:inherit; }
.both-wishes { text-align:center; color:var(--gold); font-size:20px; margin-top:18px;
  animation:fadeInUp .8s; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Capsule */
#capsule .sealed { opacity:.5; }
#capsule .unsealed { animation:fadeInUp .8s; }
#capsule .letter { background:var(--card); border-radius:16px; padding:28px 24px;
  border:1px solid rgba(240,192,96,.15); text-align:left; font-size:15px; line-height:2; }

/* Star reveal */
.reveal-text { font-size:clamp(22px,3.5vw,32px); line-height:1.6; }
.reveal-text span { opacity:0; transition:opacity .6s; }
.reveal-text span.show { opacity:1; }
.signed { margin-top:30px; color:var(--gold); font-size:18px; opacity:0; transition:opacity 1s; }
.signed.show { opacity:1; }

/* Photos in timeline */
.tl-card .tl-img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px;
  margin-bottom:12px; opacity:.85; transition:.3s; background:rgba(26,20,48,.5); }
.tl-card:hover .tl-img { opacity:1; }
@media (max-width:640px) { .tl-card .tl-img { aspect-ratio:3/4; } }

/* Music toggle */
.music-btn { position:fixed; bottom:20px; left:20px; font-size:24px; cursor:pointer;
  z-index:99; opacity:.5; transition:.3s; background:var(--card); border-radius:50%;
  width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(240,192,96,.2); }
/* 3D Cube */
.cube-scene { width:240px; height:240px; margin:0 auto; perspective:700px; }
.cube { width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transition:transform .1s; user-select:none; }
.cube-face { position:absolute; width:100%; height:100%; border-radius:12px;
  overflow:hidden; border:2px solid rgba(240,192,96,.3); }
.cube-face img { width:100%; height:100%; object-fit:cover; }
.cube-face.front  { transform:translateZ(120px); }
.cube-face.back   { transform:rotateY(180deg) translateZ(120px); }
.cube-face.right  { transform:rotateY(90deg) translateZ(120px); }
.cube-face.left   { transform:rotateY(-90deg) translateZ(120px); }
.cube-face.top    { transform:rotateX(90deg) translateZ(120px); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(120px); }

/* Heartbeat button */
.hb-btn { width:160px; height:160px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle,rgba(240,192,96,.25),transparent);
  display:grid; place-items:center; cursor:pointer; user-select:none;
  transition:transform .15s; touch-action:none; }
.hb-btn span { font-size:60px; transition:transform .15s; }
.hb-btn.pressed { transform:scale(1.08); }
.hb-btn.pressed span { transform:scale(1.2); }

/* Memory game */
.memory-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:380px; margin:0 auto; }
.memory-card { aspect-ratio:1; border-radius:10px; cursor:pointer; font-size:28px;
  display:grid; place-items:center; transition:.2s; user-select:none;
  background:linear-gradient(135deg,rgba(240,192,96,.3),rgba(192,144,240,.3)); color:var(--gold); }
.memory-card.flipped { background:var(--card); color:var(--gold); border:1px solid rgba(240,192,96,.3); }
.memory-card.matched { opacity:.35; pointer-events:none; border-color:rgba(100,200,140,.5); }
@media (max-width:400px) { .memory-grid { grid-template-columns:repeat(4,1fr); max-width:300px; } }

/* iPhone 14 Pro */
@media (max-width:430px) and (max-height:940px) {
  .section { min-height:100dvh; padding:30px 12px; }
  .container { max-width:370px; }
  #gate .title { font-size:28px; }
  .tl-card { width:88%; }
  .cube-scene { width:160px; height:160px; }
  .cube-face.front  { transform:translateZ(80px); }
  .cube-face.back   { transform:rotateY(180deg) translateZ(80px); }
  .cube-face.right  { transform:rotateY(90deg) translateZ(80px); }
  .cube-face.left   { transform:rotateY(-90deg) translateZ(80px); }
  .cube-face.top    { transform:rotateX(90deg) translateZ(80px); }
  .cube-face.bottom { transform:rotateX(-90deg) translateZ(80px); }
}

/* Mobile */
@media (max-width:640px) {
  .cube-scene { width:180px; height:180px; }
  .cube-face.front  { transform:translateZ(90px); }
  .cube-face.back   { transform:rotateY(180deg) translateZ(90px); }
  .cube-face.right  { transform:rotateY(90deg) translateZ(90px); }
  .cube-face.left   { transform:rotateY(-90deg) translateZ(90px); }
  .cube-face.top    { transform:rotateX(90deg) translateZ(90px); }
  .cube-face.bottom { transform:rotateX(-90deg) translateZ(90px); }
}

/* Easter Egg */
.egg { position:fixed; bottom:20px; right:20px; font-size:28px; cursor:pointer;
  animation:beat 2s infinite; z-index:99; opacity:.5; transition:.3s; }
.egg:hover { opacity:1; transform:scale(1.2); }
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* Toast */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:99;
  background:var(--card); color:var(--gold); padding:12px 24px; border-radius:20px;
  font-size:14px; opacity:0; transition:opacity .4s; border:1px solid rgba(240,192,96,.2);
  pointer-events:none; }

/* Buttons & navigation */
.nav-dots { position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:10px; }
.nav-dot { width:10px; height:10px; border-radius:50%; background:rgba(240,192,96,.3);
  cursor:pointer; transition:.3s; }
.nav-dot.active { background:var(--gold); box-shadow:0 0 10px rgba(240,192,96,.5); }
.scroll-hint { text-align:center; color:var(--muted); font-size:13px; margin-top:30px;
  animation:bounce 2s infinite; }
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media (max-width:640px) {
  .section { min-height:auto; padding:60px 14px; }
  .tl-item, .tl-item:nth-child(even) { flex-direction:column; }
  .tl-card { width:90%; margin:0 auto; }
  .tl-dot { margin:10px auto; }
  .tl-item .spacer { display:none; }
  .timeline::before { left:8px; }
  .q-card .opts { grid-template-columns:1fr; }
  .cd-box { min-width:56px; padding:12px 8px; }
  .cd-box .num { font-size:24px; }
  .cd-box .label { font-size:11px; }
  .countdown { gap:8px; }
  #gate .title { font-size:36px; }
  #gate input { width:180px; font-size:15px; }
  .nav-dots { right:6px; gap:7px; }
  .nav-dot { width:8px; height:8px; }
  .music-btn { bottom:16px; left:12px; width:38px; height:38px; font-size:20px; }
  .egg { bottom:16px; right:12px; font-size:24px; }
}