/* =========================================================
   ⚙️ CONFIG — แก้ไขคำถาม / คำตอบ / ข้อความตรงนี้ได้ใน <script> ด้านล่าง
   ========================================================= */

:root{
  --bg-deep:#170c28;
  --bg-mid:#2a1650;
  --bg-mid-2:#3a1f63;
  --gold:#e8b86d;
  --gold-soft:#f3d9a4;
  --pink:#ff7aa8;
  --pink-deep:#d94f8c;
  --text-light:#f5eefd;
  --text-muted:#b8a4d9;
  --danger:#ff8f7a;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  height:100%;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(217,79,140,.20), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(232,184,109,.12), transparent 50%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 55%, #1e0f3a 100%);
  color:var(--text-light);
  font-family:'Sarabun', sans-serif;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
}

/* floating sparkles in background */
.bg-sparkle{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.sparkle{
  position:absolute;
  width:3px; height:3px;
  background:var(--gold-soft);
  border-radius:50%;
  opacity:.5;
  animation:drift 9s linear infinite;
}
@keyframes drift{
  0%{ transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.6;}
  90%{opacity:.4;}
  100%{ transform:translateY(-120vh) translateX(20px); opacity:0;}
}

.stage{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
}

.screen{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  animation:fadein .5s ease;
}
.screen.active{display:flex;}

@keyframes fadein{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

.eyebrow{
  font-family:'Mitr', sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.5px;
  color:var(--pink);
}

h1,h2{
  font-family:'Mitr', sans-serif;
  font-weight:500;
  line-height:1.3;
}
h1{font-size:clamp(26px,6vw,34px); color:var(--gold-soft);}
h2{font-size:22px; color:var(--text-light);}

p{ color:var(--text-muted); font-size:16px; line-height:1.7; }

.card{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(232,184,109,.25);
  border-radius:22px;
  padding:34px 26px;
  backdrop-filter:blur(6px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* ---------- keyhole / lock ---------- */
.keyhole-wrap{
  width:96px; height:96px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--bg-mid-2), var(--bg-deep) 70%);
  border:2px solid var(--gold);
  box-shadow:0 0 0 6px rgba(232,184,109,.08), 0 0 30px rgba(217,79,140,.25);
  animation:pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 6px rgba(232,184,109,.08), 0 0 20px rgba(217,79,140,.2);}
  50%{box-shadow:0 0 0 10px rgba(232,184,109,.12), 0 0 34px rgba(217,79,140,.4);}
}
.keyhole-wrap svg{width:38px; height:38px;}
.keyhole-wrap.shake{ animation:shakeLock .4s; }
@keyframes shakeLock{
  0%,100%{transform:translateX(0) rotate(0);}
  20%{transform:translateX(-6px) rotate(-4deg);}
  40%{transform:translateX(6px) rotate(4deg);}
  60%{transform:translateX(-4px) rotate(-2deg);}
  80%{transform:translateX(4px) rotate(2deg);}
}

/* ---------- buttons ---------- */
.btn{
  font-family:'Mitr', sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--bg-deep);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  border:none;
  padding:14px 30px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 24px rgba(232,184,109,.25);
}
.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 30px rgba(232,184,109,.35); }
.btn:active{ transform:translateY(0) scale(.98); }

.btn.ghost{
  background:transparent;
  color:var(--text-muted);
  border:1px solid rgba(184,164,217,.4);
  box-shadow:none;
  font-size:13px;
  padding:10px 18px;
}
.btn.ghost:hover{ color:var(--gold-soft); border-color:var(--gold); transform:none; box-shadow:none;}
.btn.ghost:disabled{ opacity:.35; cursor:not-allowed; }

.btn-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---------- progress bar ---------- */
.progress-track{
  width:100%; height:6px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--pink-deep), var(--gold));
  border-radius:999px;
  width:0%;
  transition:width .5s ease;
}
.progress-label{ font-size:12px; color:var(--text-muted); letter-spacing:.4px; }

/* ---------- question ---------- */
.q-text{ font-family:'Mitr'; font-size:19px; color:var(--text-light); margin:6px 0 4px; }
input.answer{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(232,184,109,.3);
  border-radius:14px;
  padding:14px 16px;
  color:var(--text-light);
  font-family:'Sarabun'; font-size:16px;
  outline:none;
  transition:border-color .2s;
}
input.answer:focus{ border-color:var(--pink); }
input.answer.wrong{ border-color:var(--danger); animation:shakeLock .35s; }

.feedback{ min-height:20px; font-size:14px; color:var(--danger); }
.hint-text{ font-size:13px; color:var(--gold-soft); min-height:18px; }

/* ---------- door ---------- */
.door-frame{
  position:relative;
  width:220px; height:300px;
  margin:0 auto;
  border-radius:110px 110px 8px 8px;
  overflow:hidden;
  border:3px solid var(--gold);
  box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.4);
}
.door-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%, #fff2d6, #ffdca1 40%, #d94f8c 100%);
  opacity:0;
  transition:opacity 1.2s ease;
}
.door-frame.opened .door-glow{ opacity:1; }
.door-panel{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    repeating-linear-gradient(180deg, #6b3aa0 0 6px, #5a2f8a 6px 12px);
  transition:transform 1.1s cubic-bezier(.7,0,.3,1);
  display:flex; align-items:center;
}
.door-panel.left{ left:0; border-right:2px solid var(--gold); justify-content:flex-end; }
.door-panel.right{ right:0; border-left:2px solid var(--gold); justify-content:flex-start; }
.door-panel .knob{
  width:10px; height:10px; border-radius:50%;
  background:var(--gold-soft);
  margin:0 14px;
  box-shadow:0 0 8px var(--gold);
}
.door-frame.opened .door-panel.left{ transform:translateX(-100%); }
.door-frame.opened .door-panel.right{ transform:translateX(100%); }

.key-icon{ width:44px; height:44px; }
.key-icon.spin{ animation:spinKey 1.4s ease-in-out infinite; transform-origin:70% 50%; }
@keyframes spinKey{
  0%,100%{ transform:rotate(0deg);}
  50%{ transform:rotate(35deg);}
}

/* ---------- hearts ---------- */
.hearts-wrap{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.heart{
  position:absolute;
  bottom:-30px;
  font-size:20px;
  opacity:.85;
  animation:floatHeart linear forwards;
}
@keyframes floatHeart{
  to{ transform:translateY(-110vh) translateX(var(--drift,0px)) rotate(20deg); opacity:0; }
}

/* ---------- surprise ---------- */
.gift-photo{
  width:100%;
  border-radius:16px;
  border:2px solid var(--gold);
  overflow:hidden;
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bg-mid-2), var(--bg-deep));
  color:var(--text-muted);
  font-size:14px;
}
.gift-photo img{ width:100%; height:100%; object-fit:cover; }

.score-box{
  display:flex; justify-content:space-around; width:100%;
  padding:16px 0; border-top:1px solid rgba(232,184,109,.2); border-bottom:1px solid rgba(232,184,109,.2);
}
.score-item{ display:flex; flex-direction:column; gap:2px; }
.score-num{ font-family:'Mitr'; font-size:22px; color:var(--gold-soft); }
.score-lbl{ font-size:12px; color:var(--text-muted); }

/* ---------- music button ---------- */
.music-btn{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  border: 2px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.music-btn:hover{
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(232,184,109,.4);
}
.music-btn:active{
  transform: scale(.95);
}

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