:root{
    --pink:#FF6FA0;
    --orange:#FFA857;
    --yellow:#FFD166;
    --teal:#2EC4B6;
    --purple:#7C6FE8;
    --navy:#2B2250;
    --cream:#FFF7EE;
    --white:#FFFFFF;
    --green:#4CD964;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{
    margin:0; padding:0; height:100%;
    font-family:'Nunito', sans-serif;
    color:var(--navy);
    overflow-x:hidden;
  }
  body{
    background: linear-gradient(160deg, var(--purple) 0%, var(--pink) 55%, var(--orange) 100%);
    background-size: 220% 220%;
    animation: bgshift 32s ease infinite;
    min-height:100vh;
    position:relative;
  }
  @keyframes bgshift{
    0%{background-position:0% 20%;}
    50%{background-position:100% 80%;}
    100%{background-position:0% 20%;}
  }

  /* hiasan blob lembut untuk kedalaman, bukan pola ikon berserakan */
  .bg-blobs{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  }
  .bg-blobs span{
    position:absolute; border-radius:50%; filter: blur(50px); opacity:0.35;
  }
  .bg-blobs span:nth-child(1){ width:260px; height:260px; background:var(--yellow); top:-60px; left:-60px; }
  .bg-blobs span:nth-child(2){ width:220px; height:220px; background:var(--teal); bottom:-40px; right:-50px; }
  .bg-blobs span:nth-child(3){ width:180px; height:180px; background:var(--cream); top:40%; right:10%; opacity:0.18; }

  .screen{
    position:relative; z-index:1;
    width:100%;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 20px 16px 40px;
    transition: opacity .45s ease, transform .45s ease;
  }
  .hidden{ display:none !important; }
  .fade-out{ opacity:0; transform:scale(0.96); }

  /* ===== WELCOME SCREEN ===== */
  #welcome-screen .hero-card{
    position:relative;
    text-align:center;
    max-width: 400px;
    width:100%;
    margin: 0 auto;
    background: var(--white);
    border-radius: 32px;
    padding: 40px 28px 32px;
    box-shadow: 0 24px 60px rgba(43,34,80,0.28);
  }
  .mascot-badge{
    width:120px; height:120px; border-radius:50%;
    margin: 0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background: radial-gradient(circle at 35% 30%, #FFF3D6, var(--yellow) 65%, var(--orange) 100%);
    box-shadow: 0 10px 22px rgba(255,168,87,0.45);
    animation: floatSoft 3.2s ease-in-out infinite;
  }
  @keyframes floatSoft{
    0%,100%{ transform: translateY(0);}
    50%{ transform: translateY(-10px);}
  }
  .mascot{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
  }
  .tagline{
    font-family:'Baloo 2', cursive;
    font-size: clamp(1.55rem, 6vw, 2rem);
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 8px;
    line-height:1.2;
  }
  .cta-btn{
    font-family:'Baloo 2', cursive;
    font-size: 1.35rem;
    font-weight:700;
    color: var(--white);
    background: linear-gradient(135deg, var(--orange), var(--pink));
    border: none;
    border-radius: 999px;
    padding: 15px 42px;
    min-height:56px;
    cursor:pointer;
    box-shadow: 0 10px 24px rgba(255,111,160,0.45);
    animation: pulseSoft 2.2s ease-in-out infinite;
    transition: transform .15s, box-shadow .15s;
  }
  .cta-btn:active{ transform: translateY(3px) scale(0.99); box-shadow: 0 5px 14px rgba(255,111,160,0.4); }
  @keyframes pulseSoft{
    0%,100%{ transform: scale(1);}
    50%{ transform: scale(1.035);}
  }
  .sub-hint{
    margin: 0 0 26px; font-weight:700; color: #6a5f9c; font-size:1rem; line-height:1.4;
  }
  .preview-strip{
    display:flex; justify-content:center; gap:10px; margin-top:24px;
  }
  .preview-strip span{
    width:42px; height:42px; border-radius:50%;
    background: var(--cream);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow: inset 0 0 0 2px rgba(43,34,80,0.06);
  }
  .preview-strip span img{ width:100%; height:100%; object-fit:cover; }

  /* ===== GAME SCREEN ===== */
  #game-screen{ width:100%; max-width: 640px; padding-top:10px; position:relative; margin:0 auto;}
  .topbar{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:14px;
  }
  .logo-mini{
    font-family:'Baloo 2', cursive; font-weight:800; color:var(--white);
    font-size:1.1rem; background:rgba(43,34,80,0.35); padding:8px 14px;
    border-radius:999px;
  }
  .score-box{
    font-family:'Baloo 2', cursive; font-weight:700; font-size:1.15rem;
    background: var(--white); color:var(--navy);
    padding: 8px 16px; border-radius: 999px;
    box-shadow: 0 4px 0 rgba(43,34,80,0.25);
    display:flex; align-items:center; gap:6px;
    min-height:44px;
  }

  .progress-strip{
    display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    background: rgba(255,255,255,0.55);
    padding: 10px; border-radius: 20px; margin-bottom: 16px; width:100%;
  }
  .progress-strip .badge{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:rgba(255,255,255,0.6);
    filter: grayscale(1) opacity(0.5);
    transition: all .4s ease;
    border: 2px solid rgba(43,34,80,0.15);
  }
  .progress-strip .badge img{ width:100%; height:100%; object-fit:cover; }
  .progress-strip .badge.done{
    filter:none; opacity:1; background: var(--white);
    transform: scale(1.12);
    border-color: var(--green);
    box-shadow: 0 3px 0 rgba(76,217,100,0.5);
  }
  .progress-strip .badge.current{
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,166,61,0.35);
  }

  .clue-card{
    background: var(--white);
    border-radius: 28px;
    padding: 22px 18px;
    width:100%;
    text-align:center;
    box-shadow: 0 18px 36px rgba(43,34,80,0.18);
    margin-bottom: 20px;
  }
  .clue-img{
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: 20px;
    display:inline-block;
    box-shadow: 0 8px 18px rgba(43,34,80,0.18);
    animation: wiggle 2.4s ease-in-out infinite;
  }
  @keyframes wiggle{
    0%,100%{ transform: rotate(-4deg);}
    50%{ transform: rotate(4deg);}
  }
  .clue-text{
    font-family:'Baloo 2', cursive;
    font-size: 1.4rem;
    font-weight:700;
    margin-top: 8px;
    color: var(--navy);
  }
  .clue-sub{
    font-size: 1.05rem;
    font-weight:700;
    color:#6a5f9c;
    margin-top:4px;
  }

  .slots{
    display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
    margin-bottom: 26px; width:100%;
  }
  .slot{
    width: 52px; height: 60px;
    background: rgba(255,255,255,0.85);
    border: 3px dashed var(--purple);
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2', cursive;
    font-size: 1.8rem; font-weight:800; color: var(--navy);
    cursor:pointer;
    transition: transform .12s ease, background .2s;
    min-width:48px; min-height:48px;
  }
  .slot.filled{
    border-style: solid;
    background: var(--white);
    box-shadow: 0 4px 0 rgba(43,34,80,0.2);
  }
  .slot.shake{ animation: shake .5s ease; }
  @keyframes shake{
    0%,100%{ transform: translateX(0);}
    20%{ transform: translateX(-8px);}
    40%{ transform: translateX(8px);}
    60%{ transform: translateX(-6px);}
    80%{ transform: translateX(6px);}
  }
  .slot.correct-pop{ animation: pop .5s ease; background: #E9FFF0; border-color: var(--green); }
  @keyframes pop{
    0%{ transform: scale(1);}
    50%{ transform: scale(1.25);}
    100%{ transform: scale(1);}
  }

  .tray{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
    width:100%;
  }
  .letter-btn{
    width: 58px; height: 58px;
    min-width:48px; min-height:48px;
    border-radius: 16px;
    border: none;
    font-family:'Baloo 2', cursive;
    font-size: 1.7rem; font-weight:800;
    color: var(--white);
    background: linear-gradient(180deg, var(--purple), #6b4fd6);
    box-shadow: 0 6px 0 #4c37a0;
    cursor:pointer;
    transition: transform .1s ease, opacity .2s;
  }
  .letter-btn:active{ transform: translateY(5px); box-shadow: 0 1px 0 #4c37a0; }
  .letter-btn.used{
    visibility:hidden;
    pointer-events:none;
  }

  /* feedback overlay */
  .feedback-overlay{
    position:fixed; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center;
    background: rgba(43,34,80,0.35);
    backdrop-filter: blur(2px);
  }
  .feedback-card{
    background: var(--white);
    border-radius: 28px;
    padding: 30px 28px;
    text-align:center;
    max-width: 340px;
    box-shadow: 0 20px 44px rgba(43,34,80,0.28);
    animation: cardpop .4s ease;
  }
  @keyframes cardpop{
    0%{ transform: scale(0.6); opacity:0;}
    100%{ transform: scale(1); opacity:1;}
  }
  .feedback-icon{ font-size: 3.6rem; }
  .feedback-icon img{
    width: 90px; height:90px; object-fit:cover; border-radius:18px;
    box-shadow: 0 6px 14px rgba(43,34,80,0.2);
  }
  .feedback-title{
    font-family:'Baloo 2', cursive; font-size:1.6rem; font-weight:800; margin:8px 0 4px;
  }
  .feedback-msg{ font-size:1.1rem; font-weight:700; color:#6a5f9c; }
  .confetti-layer{
    position:fixed; inset:0; z-index:19; pointer-events:none; overflow:hidden;
  }
  .confetti-piece{
    position:absolute; font-size:1.6rem; top:-10%;
    animation: confettifall 1.4s ease-in forwards;
  }
  .confetti-piece img{
    width:34px; height:34px; object-fit:cover; border-radius:8px;
    box-shadow: 0 3px 8px rgba(43,34,80,0.2);
  }
  @keyframes confettifall{
    0%{ transform: translateY(0) rotate(0deg); opacity:1;}
    100%{ transform: translateY(110vh) rotate(360deg); opacity:0.2;}
  }

  /* ===== RESULT SCREEN ===== */
  #result-screen .card{
    text-align:center; max-width:440px; width:100%; margin:0 auto;
    background: var(--white); border-radius: 30px; padding: 30px 24px;
    box-shadow: 0 20px 44px rgba(43,34,80,0.24);
  }
  .result-mascot{ font-size:72px; animation: bounce 2s ease-in-out infinite; }
  .result-title{ font-family:'Baloo 2', cursive; font-size:1.8rem; font-weight:800; margin:8px 0;}
  .stars-row{ font-size: 2.8rem; margin: 10px 0; letter-spacing:6px; }
  .star-dim{ opacity:0.25; filter:grayscale(1); }
  .result-score{ font-family:'Baloo 2', cursive; font-size:1.4rem; font-weight:700; color: var(--purple); margin-bottom:6px;}
  .result-msg{ font-size:1.1rem; font-weight:700; color:#6a5f9c; margin-bottom:18px;}
  .badges-collected{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
  .badges-collected span{ overflow:hidden; background:var(--cream); border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; box-shadow: 0 3px 0 rgba(43,34,80,0.15);}
  .badges-collected span img{ width:100%; height:100%; object-fit:cover; }
  .replay-btn{
    font-family:'Baloo 2', cursive; font-size:1.3rem; font-weight:700; color:var(--white);
    background: linear-gradient(180deg, var(--teal), #1a9d92);
    border:none; border-radius:999px; padding:14px 32px; min-height:52px;
    box-shadow: 0 6px 0 #157a71; cursor:pointer;
  }
  .replay-btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 #157a71; }

  .sound-toggle{
    width:40px; height:40px; min-width:40px; min-height:40px;
    border-radius:50%; border:2px solid rgba(43,34,80,0.12);
    background: var(--cream); font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow: 0 2px 6px rgba(43,34,80,0.12);
    flex-shrink:0;
  }
  .sound-toggle:active{ transform: scale(0.94); }
  #welcome-screen .sound-toggle{
    position:absolute; top:16px; right:16px;
  }

  @media (max-width:380px){
    .slot{ width:44px; height:52px; font-size:1.5rem;}
    .letter-btn{ width:50px; height:50px; font-size:1.4rem;}
    .clue-img{ width:110px; height:110px; }
  }