@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --sky:#4ECDC4;
  --sky2:#45B7AA;
  --green:#5CB85C;
  --green2:#4CAE4C;
  --orange:#FF8C00;
  --orange2:#E67E00;
  --yellow:#FFD700;
  --red:#FF6B6B;
  --white:#FFFFFF;
  --cream:#FFF8E7;
  --brown:#8B5E3C;
  --text-dark:#3D2B1F;
  --shadow-card:0 6px 20px rgba(0,0,0,0.2);
  --r:18px;
}

html{font-size:16px;}
body{
  font-family:'Kanit',sans-serif;
  background:linear-gradient(180deg,#87CEEB 0%,#87CEEB 55%,#5CB85C 55%,#4CAE4C 100%);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ── Clouds ── */
body::before,body::after{
  content:'☁️';
  position:fixed;font-size:3rem;
  animation:cloudMove 18s linear infinite;
  top:8%;z-index:0;pointer-events:none;opacity:0.7;
}
body::before{left:-80px;animation-duration:18s;}
body::after{left:-80px;animation-duration:28s;top:18%;font-size:2rem;animation-delay:-10s;}
@keyframes cloudMove{from{transform:translateX(-100px);}to{transform:translateX(110vw);}}

/* Sun */
.sun{
  position:fixed;top:20px;right:20px;
  font-size:3rem;z-index:1;
  animation:sunSpin 10s linear infinite;
}
@keyframes sunSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* Ground strip */
.ground{
  position:fixed;bottom:0;left:0;right:0;height:60px;
  background:linear-gradient(180deg,#8B6914 0%,#6B4F10 100%);
  z-index:0;
}
.ground::before{
  content:'';position:absolute;top:-12px;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg,#5CB85C 0,#5CB85C 18px,#4CAE4C 18px,#4CAE4C 36px);
  border-radius:8px 8px 0 0;
}

/* ══ HOME PAGE ══ */
.home-wrap{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem 1rem 5rem;
  text-align:center;
}

.home-logo-wrap{
  font-size:4rem;margin-bottom:0.5rem;
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}}

.home-title{
  font-size:clamp(2.2rem,8vw,4rem);font-weight:800;
  color:var(--white);
  text-shadow:3px 3px 0 var(--brown),5px 5px 0 rgba(0,0,0,0.15);
  letter-spacing:2px;margin-bottom:0.3rem;
  -webkit-text-stroke:2px var(--brown);
}
.home-sub{font-size:1rem;color:rgba(255,255,255,0.9);margin-bottom:2rem;font-weight:600;text-shadow:1px 1px 0 rgba(0,0,0,0.2);}

.card-container{
  background:rgba(255,255,255,0.95);
  border:4px solid var(--white);
  border-radius:var(--r);
  padding:1.75rem;
  width:min(360px,90vw);
  box-shadow:var(--shadow-card),0 0 0 4px var(--orange);
}
.card-container h2{
  font-size:0.9rem;font-weight:700;
  color:var(--brown);
  margin-bottom:1rem;letter-spacing:1px;
  text-transform:uppercase;
}

/* Input */
.field-wrap{position:relative;margin-bottom:1rem;}
.field-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1rem;}
.field-input{
  width:100%;padding:0.9rem 1rem 0.9rem 2.8rem;
  background:#FFF8E7;
  border:3px solid #FFD700;
  border-radius:50px;
  color:var(--text-dark);
  font-family:'Kanit',sans-serif;font-size:1rem;
  outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.field-input::placeholder{color:#BBA97A;}
.field-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,140,0,0.2);}

/* Buttons */
.btn-main{
  width:100%;padding:1rem;
  background:linear-gradient(180deg,#5CB85C,#4CAE4C);
  border:none;border-bottom:5px solid #3A8A3A;
  border-radius:50px;
  color:#fff;
  font-family:'Kanit',sans-serif;font-size:1.2rem;font-weight:800;
  cursor:pointer;letter-spacing:1px;
  text-shadow:1px 2px 0 rgba(0,0,0,0.2);
  box-shadow:0 6px 20px rgba(76,174,76,0.4);
  transition:transform 0.1s,box-shadow 0.1s;
}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(76,174,76,0.5);}
.btn-main:active{transform:translateY(2px);border-bottom-width:2px;}

.btn-out{
  display:inline-flex;align-items:center;gap:6px;
  padding:0.7rem 1.5rem;
  background:rgba(255,255,255,0.9);
  border:3px solid rgba(255,255,255,0.6);
  border-bottom:4px solid rgba(0,0,0,0.1);
  border-radius:50px;
  color:var(--text-dark);
  font-family:'Kanit',sans-serif;font-size:0.95rem;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:transform 0.1s,background 0.2s;
}
.btn-out:hover{background:#fff;transform:translateY(-1px);}

.footer-links{margin-top:1.2rem;display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;}

/* How card */
.how-card{
  background:rgba(255,255,255,0.9);
  border:3px solid rgba(255,255,255,0.6);
  border-radius:var(--r);
  padding:1.25rem 1.5rem;
  width:min(360px,90vw);
  margin-top:1rem;text-align:left;
}
.how-card h3{font-size:0.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--brown);margin-bottom:0.75rem;font-weight:700;}
.how-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem;}
.how-list li{display:flex;align-items:center;gap:0.75rem;font-size:0.9rem;color:var(--text-dark);}
.how-list .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;}

/* ══ GAME PAGE ══ */
.game-wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;}

.game-bar{
  background:rgba(255,255,255,0.95);
  border-bottom:4px solid rgba(255,215,0,0.6);
  padding:0.7rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  position:sticky;top:0;z-index:50;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}

.player-pill{
  display:flex;align-items:center;gap:0.5rem;
  background:linear-gradient(135deg,#FFD700,#FFA500);
  border-radius:50px;padding:0.35rem 1rem 0.35rem 0.35rem;
  box-shadow:0 3px 8px rgba(255,165,0,0.4);
}
.player-av{
  width:30px;height:30px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
}
.player-name{font-size:0.9rem;font-weight:700;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,0.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}

.stat-pill{
  display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,0.95);
  border:2px solid rgba(255,215,0,0.5);
  border-radius:12px;padding:0.35rem 0.85rem;min-width:62px;
}
.stat-label{font-size:0.6rem;text-transform:uppercase;letter-spacing:1px;color:var(--brown);font-weight:600;}
.stat-val{font-size:1.25rem;font-weight:800;line-height:1.2;color:var(--text-dark);}
.stat-val.blue{color:#0099CC;}
.stat-val.gold{color:#FF8C00;}
.stat-val.warn{color:#FF6600;animation:pulse 0.7s ease-in-out infinite;}
.stat-val.crit{color:#FF0000;animation:pulse 0.35s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* Timer bar */
.timer-track{height:6px;background:rgba(0,0,0,0.1);}
.timer-fill{height:100%;background:linear-gradient(90deg,#5CB85C,#FFD700);transition:width 1s linear,background 0.5s;border-radius:0 4px 4px 0;}
.timer-fill.warn{background:linear-gradient(90deg,#FFD700,#FF8C00);}
.timer-fill.crit{background:linear-gradient(90deg,#FF6B6B,#FF0000);}

/* Progress */
.match-track{height:4px;background:rgba(0,0,0,0.1);margin:0 1rem;border-radius:99px;}
.match-fill{height:100%;background:linear-gradient(90deg,#5CB85C,#FFD700);border-radius:99px;transition:width 0.5s ease;}

/* Card Grid */
.game-body{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem 0.75rem 4rem;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,2.5vw,18px);
  width:min(560px,94vw);
}

/* Memory Card */
.m-card{aspect-ratio:0.78;cursor:pointer;perspective:900px;user-select:none;}
.m-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.m-card.flipped .m-inner,
.m-card.matched .m-inner{transform:rotateY(180deg);}

.m-front,.m-back{
  position:absolute;inset:0;
  border-radius:16px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  border:3px solid rgba(255,255,255,0.8);
  box-shadow:0 6px 18px rgba(0,0,0,0.18),0 2px 0 rgba(255,255,255,0.4) inset;
}

/* Card Back */
.m-back{
  background:linear-gradient(145deg,#FF8C00,#FF6B00);
  background-image:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.2) 0%,transparent 60%);
  transition:transform 0.15s;
}
.m-card:hover:not(.flipped):not(.matched) .m-back{transform:scale(1.04);box-shadow:0 10px 28px rgba(0,0,0,0.25);}
.m-back-logo{font-size:2.4rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}

/* Card Front */
.m-front{transform:rotateY(180deg);gap:6px;}
.m-front-icon{font-size:clamp(2.4rem,8vw,4rem);line-height:1;}
.m-front-lbl{font-size:clamp(0.75rem,2vw,1rem);color:#fff;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,0.25);letter-spacing:0.5px;}

/* Matched */
.m-card.matched .m-front{
  border-color:rgba(255,215,0,0.8);
  box-shadow:0 0 20px rgba(255,215,0,0.5);
  animation:matchPop 0.5s ease;
}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1);}50%{transform:rotateY(180deg) scale(1.12);}100%{transform:rotateY(180deg) scale(1);}}

/* Shake */
.m-card.shake .m-inner{animation:cardShake 0.4s ease;}
@keyframes cardShake{0%,100%{transform:rotateY(180deg) translateX(0);}25%{transform:rotateY(180deg) translateX(-6px);}75%{transform:rotateY(180deg) translateX(6px);}}

/* Game footer */
.game-foot{padding:0.75rem 1rem;display:flex;justify-content:center;align-items:center;gap:1rem;}
.game-foot span{
  background:rgba(255,255,255,0.85);
  padding:0.4rem 1.2rem;border-radius:50px;
  font-size:0.85rem;font-weight:700;color:var(--text-dark);
  border:2px solid rgba(255,215,0,0.5);
}

/* Toast */
.toast{
  position:fixed;bottom:5rem;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:#fff;
  border:3px solid var(--green);
  padding:0.7rem 1.75rem;
  border-radius:50px;font-size:0.95rem;font-weight:700;color:var(--text-dark);
  z-index:999;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.ok{border-color:var(--green);color:var(--green2);}
.toast.err{border-color:var(--red);color:#CC0000;}

/* ══ RESULT PAGE ══ */
.result-wrap{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem 1rem 5rem;text-align:center;
}
.result-badge{
  width:100px;height:100px;border-radius:50%;
  background:linear-gradient(135deg,#FFD700,#FF8C00);
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;margin:0 auto 1rem;
  box-shadow:0 8px 30px rgba(255,140,0,0.4),0 0 0 6px rgba(255,255,255,0.5);
  animation:popIn 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn{from{transform:scale(0) rotate(-20deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}

.result-title{font-size:clamp(2rem,6vw,3rem);font-weight:800;color:#fff;text-shadow:3px 3px 0 var(--brown);-webkit-text-stroke:1px var(--brown);margin-bottom:0.25rem;}
.result-sub{font-size:1rem;color:rgba(255,255,255,0.95);font-weight:600;margin-bottom:1.5rem;text-shadow:1px 1px 0 rgba(0,0,0,0.15);}

.result-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0.85rem;width:min(360px,88vw);margin-bottom:1.75rem;
}
.res-stat{
  background:rgba(255,255,255,0.95);
  border:3px solid rgba(255,215,0,0.5);
  border-bottom:5px solid rgba(180,140,0,0.3);
  border-radius:16px;padding:1.1rem;text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.res-stat-icon{font-size:1.8rem;display:block;margin-bottom:0.3rem;}
.res-stat-lbl{font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--brown);font-weight:600;}
.res-stat-val{font-size:1.7rem;font-weight:800;color:var(--orange);}

.result-btns{display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center;}
.btn-primary-solid{
  display:inline-flex;align-items:center;gap:6px;
  padding:0.9rem 2rem;border-radius:50px;
  background:linear-gradient(180deg,#FFD700,#FF8C00);
  color:#fff;font-family:'Kanit',sans-serif;font-size:1rem;font-weight:800;
  text-decoration:none;border:none;border-bottom:5px solid #CC6600;
  cursor:pointer;
  text-shadow:1px 1px 0 rgba(0,0,0,0.2);
  box-shadow:0 6px 18px rgba(255,140,0,0.35);
  transition:transform 0.1s;
}
.btn-primary-solid:hover{transform:translateY(-2px);}
.btn-primary-solid:active{transform:translateY(2px);border-bottom-width:2px;}

/* ══ LEADERBOARD ══ */
.lb-wrap{
  position:relative;z-index:2;
  min-height:100vh;max-width:700px;
  margin:0 auto;padding:2rem 1rem 5rem;
}
.lb-head{text-align:center;margin-bottom:1.75rem;}
.lb-head-icon{
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,#FFD700,#FF8C00);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;margin:0 auto 0.75rem;
  box-shadow:0 6px 20px rgba(255,165,0,0.4),0 0 0 4px rgba(255,255,255,0.5);
  animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.lb-head h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;color:#fff;text-shadow:3px 3px 0 var(--brown);-webkit-text-stroke:1px var(--brown);}
.lb-head p{font-size:0.9rem;color:rgba(255,255,255,0.9);margin-top:0.25rem;font-weight:600;}

.lb-table-wrap{
  background:rgba(255,255,255,0.96);
  border:3px solid rgba(255,255,255,0.8);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,0.15);
}
.lb-table{width:100%;border-collapse:collapse;}
.lb-table thead th{
  padding:0.9rem 1rem;
  font-size:0.72rem;text-transform:uppercase;letter-spacing:1.5px;
  color:#fff;background:linear-gradient(90deg,#FF8C00,#FFD700);
  text-align:left;font-weight:700;
}
.lb-row{border-top:2px solid rgba(255,215,0,0.2);transition:background 0.15s;}
.lb-row:hover{background:rgba(255,215,0,0.08);}
.lb-row.top3{background:rgba(255,215,0,0.06);}
.lb-row td{padding:0.85rem 1rem;font-size:0.9rem;color:var(--text-dark);}

.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:0.8rem;font-weight:800;}
.r1{background:#FFD700;color:#7A5800;}
.r2{background:#C0C0C0;color:#555;}
.r3{background:#CD7F32;color:#fff;}
.rn{background:#EEE;color:#888;}

.lb-score{font-weight:800;color:var(--orange);font-size:1rem;}
.lb-foot{text-align:center;margin-top:1.25rem;display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;}

/* ══ RESPONSIVE ══ */
@media(max-width:600px){
  .game-bar{padding:0.55rem 0.75rem;gap:0.5rem;}
  .player-name{max-width:80px;}
  .stat-pill{padding:0.3rem 0.6rem;min-width:52px;}
  .stat-val{font-size:1.1rem;}
  .game-body{padding:0.75rem 0.5rem 4rem;}
  .card-grid{width:min(98vw,400px);gap:10px;}
  .result-grid{gap:0.6rem;}
}
@media(max-width:380px){
  .card-grid{gap:7px;width:100%;}
  .m-back-logo{font-size:1.8rem;}
  .m-front-icon{font-size:2rem;}
  .stat-pill{display:none;}
  .stat-pill.must-show{display:flex;}
}