/* ===== Base / Reset ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Playpen Sans Thai", cursive;
  font-weight: 300;
}

* {
  box-sizing: border-box;
}

/* ===== Layout ===== */
body {
  display: flex;
  flex-direction: column;
  background-color: #E4F3F2;
  position: relative;
}

/* ===== Wrinkle paper overlay ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("pic/crumpledpaper.png");
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.bg-decor{
  position: fixed;
  inset: 0;
  z-index: 0;                
  pointer-events: none;     
  overflow: hidden;         
}

.decor{
  position: absolute;


  width: clamp(100px, 10vw, 150px);
  height: auto;

  opacity: 0.9; /* optional */
  user-select: none;
}
.t{
    top: 10%;
    left: 5%;
    width: clamp(100px, 15vw, 200px);
  }
.f{
    bottom: 20%;
    right: 10%;
    width: clamp(100px, 15vw, 200px);
  }
.sq{
    bottom: 10%;
    left: 15%;
    width: clamp(100px, 15vw, 200px);
  }
.tr{
    bottom: 2%;
    right: 5%;
    width: clamp(100px, 15vw, 200px);
}

.dp{
    top: 25%;
    left: 1%;
    width: clamp(100px, 15vw, 200px);
  }

.r{
  bottom: 0.2%;
  left: 5%;
  width: clamp(100px, 15vw, 250px);
}

.wk{
  bottom: 4%;
  left: 3%;
  width: clamp(100px, 15vw, 250px);
}

.jel{
  top: 10%;
  right: 3%;
  width: clamp(200px, 15vw, 600px);
}

.shk{
  bottom: 20%;
  left: 0%;
  width: clamp(150px,15vw, 400px);

}

.shel{
  bottom: 1%;
  right: 0%;
  width: clamp(50px, 15vw, 150px);}

.ksh{
  top: 36%;
  right: 0%;
  width: clamp(200px, 15vw, 400px);}



nav {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgba(95, 149, 152, 1);
padding: 1rem;
position: relative;
z-index: 1;


}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
font-size: 2rem;
font-weight: 800;
color: #E4F3F2;

}

.buttonlogo{
display: flex;
justify-content: center;
align-items: center;
color: rgba(95, 149, 152, 1);
background-color: #E4F3F2;
border: 0.5px solid #E4F3F2;
border-radius: 5px;
padding-left: 1%;
padding-right: 1%;
cursor: pointer;




}
.profile-btn{
  width: 3rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.4rem;
  text-decoration: none;

  background: rgba(95, 149, 152, 1);
  border: 2px solid #E4F3F2;
  border-radius: 20px;

  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.profile-btn:hover{
  background-color: rgba(120, 175, 178, 1);
  transform: translateY(-1px);
}

.profile-btn{
  display: none;
}







/* ===== Spotify Embed ===== */


.spotify-wrapper {
  width: min(90vw, 420px);  
  margin: 1.5rem auto;
}

.spotify-wrapper iframe {
  width: clamp(220px, 60vw, 360px);
  height: clamp(100px, 15vw, 152px);
  border-radius: 12px;
  border: none;
}



/* ===== Header ===== */
.header {
  text-align: center;
  padding: 1% 5%;
  position: relative;
  z-index: 1;
}

.title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.4;
  margin: 2rem 0 0.5rem 0;
text-align:center;
}

.subtitle {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 -10rem 0;
  text-align: center;
}

/* ===== Center screen ===== */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.tap-text {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0.85;
}

.bottom-waves{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 160px;
  z-index: 0;
  pointer-events: none;
}

.footer {
  text-align: center;
  padding: 1% 5%;
  position: relative;
  z-index: 1;
  margin-top: auto;
  
}


/* ===== Responsive ===== */
@media (max-width: 768px) {
  .title { font-size: 1.4rem; }
  .subtitle { font-size: 0.8rem; }
  .tap-text { font-size: 0.7rem; }
  .bottom-waves{ height: 100px; }
  .footer-text { font-size: 0.8rem; }
  .logo{ font-size: 1rem; }
  .buttonlogo{ display: none; }
  .profile-btn{ display: flex; }
}

@media (max-width: 430px) {
  .title { font-size: 1.2rem; }
  .subtitle { font-size: 0.7rem; }
  .tap-text { font-size: 0.6rem; }
  .bottom-waves{ height: 80px; }
  .footer-text { font-size: 0.7rem; }
  .logo{ font-size: 0.9rem; }
  .buttonlogo{ display: none; }
  .profile-btn{ display: flex; }

}

/* ===== SVG Filter cycling for edge wobble ===== */
@keyframes squiggle {
  0%   { filter: url(#squiggle-0); }
  25%  { filter: url(#squiggle-1); }
  50%  { filter: url(#squiggle-2); }
  75%  { filter: url(#squiggle-3); }
  100% { filter: url(#squiggle-4); }
}

.squiggle {
  animation: squiggle 0.3s linear infinite;
}



.doodle-wiggle.squiggle {
  animation:
    doodleMove 2.3s steps(2, end) infinite,
    doodleInk 1.6s steps(2, end) infinite,
    squiggle 0.3s linear infinite;
}

/* ===== Story Page ===== */

.story-text {
  
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 600;
  color: #1C4D8D;
  letter-spacing: 0.1em;

  opacity: 0;
  transform: translateY(20px);

  animation: fadeUp 2.5s ease-out forwards;
}

.substory-text {
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 100;
  color: #2C3D3C;
  letter-spacing: 0.05em;
  ;

  opacity: 0;
  transform: translateY(20px);

  animation: fadeUp 2.5s ease-out forwards;
  animation-delay: 0.5s;
} 

.story-box{
  width: min(86vw, 720px);    
  text-align: center;
  padding: 1rem;
}

.story-text1{
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(1rem, 2.6vw, 1.35rem);  
  font-weight: 400;
  color: #1C4D8D;
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0.5rem 0;
  white-space: pre-wrap;        
}


.cursor{
  display: inline-block;
  width: 0.6ch;
  animation: blink 0.9s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }


.substory-text1{
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(0.85rem, 2.4vw, 1.1rem);
  font-weight: 300;
  color: #2C3D3C;
  opacity: 0.9;
}


.gold-glow {
  color: #D4AF37; /* gold */
  animation: goldGlow 1.6s ease-in-out forwards;
}

/* ===== Choice Page ===== */


.choice:hover {
  background-color: #CFE8E7;
  transform: translateY(-2px);
}

.story-visual img {
  width: 100%;
  max-height: clamp(100px, 35vw, 200px);
  object-fit: contain;
  border-radius: 12px;
}

.question-header {
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 500;
  color: #1C4D8D;
  text-align: center;
  margin-top: 1rem;
}

.question-content {
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(0.45rem, 3vw, 1rem);
  font-weight: 400;
  color: #06172eff;
  text-align: center;
  margin-top: -2rem;
  margin-bottom: -2rem;
}

.choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.choice{
  font-family: "Playpen Sans Thai", cursive;
  font-size: clamp(0.45rem, 2.5vw, 1rem);
  font-weight: 500;
  color: #1C4D8D;
  background-color: #e4f3f270;
  border: 2px solid #1c4d8da1;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.Qbox {
  margin-top: 5rem;
  width: min(90vw, 720px);  
  background-color: rgba(255, 255, 255, 0.36);
  border-radius: 18px;
  padding: 1.5rem 1.8rem;
 

  display: flex;
  flex-direction: column;
  gap: 1.2rem;

  opacity: 1;
  transform: translateY(20px);
  
}

.Qbox.animate-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.5s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes goldGlow {
  0% {
    color: #1C4D8D; /* สีเดิมก่อนเปลี่ยน */
    text-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }
  60% {
    color: #D4AF37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  }
  100% {
    color: #D4AF37;
    text-shadow:
      0 0 6px rgba(212, 175, 55, 0.45),
      0 0 18px rgba(212, 175, 55, 0.28);
  }
}

/* ===== Story End Page ===== */
.story-screen {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;

  
  padding: clamp(10px, 2.5vw, 22px);
}


.story-card {
  
  width: clamp(280px, 92vw, 520px);

 
  min-height: clamp(520px, 78vh, 680px);

  background: rgba(255,255,255,0.78);
  border: clamp(1px, 0.25vw, 2px) solid rgba(0,0,0,0.25);
  border-radius: clamp(14px, 2.2vw, 18px);
  box-shadow: 0 clamp(6px, 1.4vw, 10px) clamp(18px, 4vw, 28px) rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;

 
  padding: clamp(12px, 2.6vw, 18px) clamp(12px, 2.8vw, 18px) clamp(10px, 2.2vw, 14px);

  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.8s ease-out forwards;
}


.story-top {
  text-align: center;
  padding: clamp(4px, 1.2vw, 8px) clamp(6px, 1.6vw, 10px) clamp(8px, 2vw, 12px);
}

.story-title {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #1C4D8D;
}


.story-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  /* gap ไหล */
  gap: clamp(8px, 2vw, 14px);
  padding: clamp(6px, 1.8vw, 12px) clamp(8px, 2vw, 14px);
}

.story-textEND {
  margin: 0 auto;
  max-width: clamp(32ch, 6vw + 34ch, 46ch); 
  font-size: clamp(0.88rem, 2.4vw, 1rem);
  line-height: clamp(1.45, 0.8vw + 1.4, 1.65);
  color: #1b2b2a;
}


.story-figure {
  margin: clamp(6px, 2vw, 12px) auto 0;

  
  width: clamp(180px, 70vw, 340px);
}

.story-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ส่วนล่าง: quote + press anywhere */
.story-bottom {
  padding-top: clamp(8px, 2.2vw, 12px);
  text-align: center;
}

.story-quote {
  margin: 0 auto clamp(8px, 2vw, 12px);
  max-width: clamp(34ch, 6vw + 36ch, 48ch);
  font-size: clamp(0.9rem, 2.4vw, 1.02rem);
  font-weight: 600;
  line-height: clamp(1.4, 0.7vw + 1.35, 1.6);
  color: #1b2b2a;
}

.story-hint {
  margin: 0;
  font-size: clamp(0.9rem, 2.6vw, 1.05rem);
  font-weight: 700;
  color: #111;
  opacity: 0.9;
}

/* ===== End Story Page 2 ===== */

.story-mid--full {
  padding: 0;             
}

.story-figure--full {
  width: 100%;
  margin: 0;
  position: relative;      
  flex: 1;
  display: grid;
  place-items: center;
}

.story-figure--full img {
  width: 100%;
  height: min(62vh, 520px);  
  object-fit: contain;
}


.story-overlay {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 10vh, 30px);
  transform: translateX(-50%);
  width: min(90%, 46ch);
  text-align: center;
  padding: clamp(8px, 1.8vw, 12px);
}


.story-overlay .story-textEND {
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}


.story-bottom {
  padding-top: 0;
  padding-bottom: clamp(6px, 1.2vw, 10px);
}


.screen.scrollable{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  
  justify-content: flex-start;
  align-items: center;
}


.screen.scrollable{
  padding-bottom: 200px; 
}


/* ===== Result Page Add-on ===== */
.result-card{
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.result-title{
  font-weight: 800;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin: 6px 0 14px;
  color: #1C4D8D;
}

.result-figure{
  margin: 0;
  padding: 0;
  width: 100%;
}

.result-img{
  width: min(92vw, 420px);
  height: auto;
  max-width: 100%;  
  border-radius: 14px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.result-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.result-hint{
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.result-debug{
  margin-top: 12px;
  text-align: left;
}

 
  .page-result .subtitle{
    margin: 0 0 1rem 0 !important; /* ลบ -10rem */
  }

  
  .page-result .screen.scrollable{
    justify-content: flex-start; /* เผื่อบางหน้าไม่ได้ set */
    padding-top: 8px;
  }

  .result-survey{
  margin-top: 12px;
  text-align: center;
}

.survey-link{
  display: inline-block;
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: #1C4D8D;
  text-decoration: none;
  opacity: 0.85;
  padding: 6px 10px;
  border-radius: 10px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.survey-link:hover{
  opacity: 1;
  background-color: rgba(28,77,141,0.08);
}