/* ===========================================================
   Apoteker Cilik - Apotek Alpro
   Shared stylesheet
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --orange: #FF7A1A;
  --orange-dark: #E85D04;
  --green: #4CAF50;
  --green-dark: #2E8B3B;
  --red: #E63946;
  --blue: #2E86DE;
  --yellow: #FFC93C;
  --cream: #FFF8EC;
}

*{ box-sizing: border-box; }

body{
  font-family: 'Poppins', sans-serif;
  background: var(--cream);
  color: #2b2b2b;
  overflow-x: hidden;
}

h1,h2,h3,h4, .font-fun{
  font-family: 'Baloo 2', cursive;
}

/* Scrollbar cute */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-thumb{ background: var(--orange); border-radius: 10px; }
::-webkit-scrollbar-track{ background: #ffe6cc; }

/* Background pattern */
.bg-fun{
  background-image: radial-gradient(circle at 10% 20%, rgba(255,201,60,0.25) 0, transparent 12%),
                     radial-gradient(circle at 90% 15%, rgba(76,175,80,0.2) 0, transparent 14%),
                     radial-gradient(circle at 30% 90%, rgba(230,57,70,0.15) 0, transparent 14%),
                     radial-gradient(circle at 80% 80%, rgba(46,134,222,0.18) 0, transparent 14%);
}

/* Top navigation */
.navbar{
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.navbar a.nav-link{
  color: #fff;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 999px;
  transition: all .2s;
  white-space: nowrap;
}
.navbar a.nav-link:hover, .navbar a.nav-link.active{
  background: rgba(255,255,255,0.22);
}
.navbar-logo{
  height: 40px;
  width: auto;
  border-radius: 10px;
  background: #fff;
  padding: 3px 6px;
}

/* Sound on/off toggle button in navbar */
.sound-toggle-btn{
  color: #fff;
  background: rgba(255,255,255,0.18);
  border: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  font-size: 0.9rem;
}
.sound-toggle-btn:hover{
  background: rgba(255,255,255,0.32);
}

/* ---------- Mascot (Apoteker JJ / Apoteker Putri) ---------- */
.mascot{
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}
.mascot-hero{
  position: absolute;
  bottom: -10px;
  right: 4%;
  width: 150px;
  z-index: 5;
}
.mascot-hero-left{
  position: absolute;
  bottom: -6px;
  left: 3%;
  width: 120px;
  z-index: 5;
}
.mascot-float{
  animation: mascot-float 3s ease-in-out infinite;
}
@keyframes mascot-float{
  0%,100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-12px) rotate(1deg); }
}
.mascot-inline{
  width: 90px;
  flex-shrink: 0;
}
.mascot-corner{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 90px;
  z-index: 40;
  opacity: .95;
}
@media (max-width: 640px){
  .mascot-hero{ width: 70px; right: 2%; bottom: auto; top: 6px; opacity:.9; }
  .mascot-hero-left{ width: 72px; left: 2%; }
  .mascot-corner{ width: 60px; }
}

/* ---------- Cover / Hero: Hari Apoteker Sedunia (artwork header) ---------- */
.hero-artwork-section{
  background: linear-gradient(160deg, var(--orange), #ff9a3d 55%, var(--yellow));
  background-size: 200% 200%;
  animation: hero-bg-shift 10s ease-in-out infinite;
}
@keyframes hero-bg-shift{
  0%,100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.hero-wave{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index: 5;
  margin-top:-4px;
}
.hero-inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1rem 3.2rem;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-artwork-wrap{
  width: 100%;
  max-width: 340px;
  margin: 1.8rem auto 0;
  animation: artwork-bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.25));
}
.hero-artwork-img{
  /* Show the FULL source artwork uncropped (mascot head + complete
     2-line tagline) so nothing is ever cut off; spacing above/below
     is controlled purely via margins on the wrapper, not by cropping
     the image itself. */
  width:100%;
  height:auto;
  display:block;
}
.hero-desc{ margin: 1rem auto 0; }
.hero-cta-row{ margin-top: 1.5rem; }
.hero-scroll-hint{ margin-top: 1.5rem; }
@keyframes artwork-bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(-1deg); }
}
.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: .8rem;
}
.pulse-btn{
  animation: pulse-btn-anim 1.8s infinite;
}
@keyframes pulse-btn-anim{
  0%{ box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(255,255,255,.6); }
  70%{ box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 14px rgba(255,255,255,0); }
  100%{ box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(255,255,255,0); }
}
.hero-scroll-hint{
  color: rgba(255,255,255,.85);
  font-size: 1.3rem;
  animation: scroll-hint-bounce 1.6s infinite;
}
@keyframes scroll-hint-bounce{
  0%,100%{ transform: translateY(0); opacity:.7; }
  50%{ transform: translateY(8px); opacity:1; }
}

/* Floating decorative emoji on hero */
.floaty-icon{
  position:absolute;
  font-size: 1.8rem;
  opacity:.85;
  z-index: 2;
  pointer-events:none;
  animation: floaty-drift 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.fi-1{ top:8%; left:6%; animation-duration:5.5s; }
.fi-2{ top:18%; right:8%; animation-duration:6.5s; animation-delay:.4s; }
.fi-3{ bottom:34%; left:4%; animation-duration:5s; animation-delay:.8s; }
.fi-4{ bottom:16%; right:6%; animation-duration:7s; animation-delay:.2s; }
.fi-5{ top:42%; left:14%; animation-duration:4.8s; animation-delay:1.1s; font-size:1.3rem; }
.fi-6{ top:10%; left:44%; animation-duration:6s; animation-delay:.6s; font-size:1.4rem; }
.fi-7{ bottom:8%; right:30%; animation-duration:5.4s; animation-delay:.9s; font-size:1.4rem; }
@keyframes floaty-drift{
  0%,100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(-16px) rotate(6deg); }
}
@media (max-width:640px){
  .floaty-icon{ font-size:1.3rem; }
  .fi-6, .fi-7{ display:none; }
  .hero-artwork-wrap{ margin-top: 2.4rem; max-width: 280px; }
}

/* Stat chips under hero */
.stat-chip{
  background:#fff;
  border-radius: 18px;
  padding: .9rem .6rem;
  text-align:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  border: 3px solid #ffe4c2;
  transition: transform .2s;
}
.stat-chip:hover{ transform: translateY(-4px); }
.stat-chip-icon{ font-size:1.5rem; line-height:1; }
.stat-chip-value{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1.35rem;
  color: var(--orange-dark);
  margin-top:.2rem;
}
.stat-chip-label{
  font-size:.68rem;
  color:#888;
  font-weight:600;
  margin-top:.1rem;
  line-height:1.2;
}

/* Why-join cards */
.why-join-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.why-join-card{
  background:#fff;
  border-radius:20px;
  padding: 1.1rem .8rem;
  text-align:center;
  border: 2px solid #ffe4c2;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.why-join-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}
.why-join-icon{ font-size: 2rem; margin-bottom:.4rem; }
@media (max-width:640px){
  .why-join-grid{ grid-template-columns: 1fr; }
}

/* Legacy hero (kept for other pages using .hero-flex if any) */
.hero-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  text-align:center;
}
.hero-text{
  flex:1;
  min-width:0;
}
.hero-mascot-wrap{
  display:none;
  flex-shrink:0;
}
.hero-mascot{
  width: 170px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.2));
}

.cover-ribbon{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: rgba(255,255,255,0.95);
  color: var(--orange-dark);
  font-weight:700;
  font-family:'Baloo 2',cursive;
  padding:.4rem 1.1rem;
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  font-size:.78rem;
  letter-spacing:.01em;
}
.cover-title{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  line-height:1.15;
  color:#fff;
  font-size: 2rem;
  margin-top: .7rem;
  text-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.cover-theme-box{
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  padding: .8rem 1.4rem;
  margin-top: 1.1rem;
  display:inline-block;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.cover-theme-label{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--orange-dark);
  margin-bottom:.25rem;
}
.cover-theme-text{
  font-family:'Baloo 2',cursive;
  font-weight:700;
  color: #7a3c00;
  font-size:1.05rem;
  line-height:1.35;
}
.hero-desc{
  color: rgba(255,255,255,0.95);
  font-size:.92rem;
  max-width: 34rem;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:640px){
  .cover-title{ font-size:2.8rem; }
  .cover-theme-text{ font-size:1.25rem; }
  .hero-desc{ font-size:1rem; }
}
@media (min-width:768px){
  .hero-flex{ text-align:left; justify-content:flex-start; }
  .hero-text{ text-align:left; }
  .hero-mascot-wrap{ display:block; }
  .hero-desc{ margin-left:0; margin-right:0; }
  .cover-theme-box{ display:block; }
}

/* Mission cards with illustration */
.mission-illustration{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Card */
.fun-card{
  background: #fff;
  border-radius: 24px;
  border: 3px dashed var(--orange);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: transform .25s, box-shadow .25s;
}
.fun-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

.badge-star{
  background: var(--yellow);
  color: #7a4b00;
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .8rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* Buttons */
.btn-fun{
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  border-radius: 999px;
  padding: .7rem 1.8rem;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15);
  border: none;
  cursor: pointer;
}
.btn-fun:active{ transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.btn-orange{ background: var(--orange); color: #fff; }
.btn-orange:hover{ background: var(--orange-dark); }
.btn-green{ background: var(--green); color: #fff; }
.btn-green:hover{ background: var(--green-dark); }
.btn-blue{ background: var(--blue); color: #fff; }
.btn-red{ background: var(--red); color: #fff; }
.btn-outline{ background: #fff; color: var(--orange); border: 2px solid var(--orange); box-shadow:none; }

.btn-fun:disabled{ opacity:.5; cursor: not-allowed; box-shadow:none; transform:none; }

/* Mission status badge */
.status-pill{
  font-size: .78rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 999px;
}
.status-belum{ background:#ffe1c2; color:#a15200; }
.status-selesai{ background:#d7f5da; color:#1c7a2e; }

/* Modal */
.modal-overlay{
  position: fixed; inset:0; background: rgba(20,10,0,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 60; padding: 1rem;
}
.modal-box{
  background:#fff; border-radius: 26px; max-width: 560px; width:100%;
  max-height: 90vh; overflow-y:auto; padding: 1.75rem;
  border: 4px solid var(--yellow);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  animation: pop-in .25s ease;
}
@keyframes pop-in{ from{ transform: scale(.85); opacity:0;} to{ transform:scale(1); opacity:1;} }

/* Larger modal variant for content-heavy popups (e.g. the Funfact/mission
   modal, which shows a detailed infographic poster or flashcard image) so
   the content is big enough to read comfortably instead of feeling cramped. */
.modal-box-lg{
  max-width: 820px;
  max-height: 94vh;
  padding: 2rem 2.25rem;
}
@media (max-width: 640px){
  .modal-box-lg{ padding: 1.5rem; }
}

/* Funfact card (legacy single-item, kept for compatibility) */
.funfact-item{
  background: #FFF3E0;
  border-left: 5px solid var(--orange);
  border-radius: 14px;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
}

/* ---------- Funfact modal v2: image + edukasi + tau-nggak-sih ---------- */
.funfact-mission-img{
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  margin-bottom: 1rem;
}
.funfact-section{
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
}
.funfact-section-edukasi{
  background: #EAF7EC;
  border: 2px solid #bfe8c4;
}
.funfact-section-tau{
  background: linear-gradient(135deg,#FFF3D6,#FFE8C2);
  border: 2px dashed var(--yellow);
  position: relative;
}
.funfact-section-label{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1rem;
  color: var(--green-dark);
  margin-bottom:.5rem;
}
.funfact-section-tau .funfact-section-label{
  color:#a15200;
}
.funfact-edukasi-list{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:.55rem;
}
.funfact-edukasi-list li{
  position:relative;
  padding-left: 1.5rem;
  font-size:.92rem;
  line-height:1.4;
  color:#334;
}
.funfact-edukasi-list li::before{
  content:"✔️";
  position:absolute;
  left:0; top:0;
  font-size:.85rem;
}
.funfact-tau-text{
  font-size:.92rem;
  line-height:1.5;
  color:#5c3d00;
  font-weight:500;
}

/* Full infographic image inside funfact modal (no cropping, so info stays readable) */
.funfact-mission-img-full{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 18px;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  margin-bottom: 1rem;
}

/* ---------- Flashcard step-by-step flow (Cek Tensi Darah mission) ---------- */
.flashcard-progress-label{
  text-align:center;
  font-size:.8rem;
  font-weight:700;
  color:#2E86DE;
  margin-bottom:.4rem;
}
.flashcard-progress-track{
  width:100%;
  height:.5rem;
  background:#dceafd;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:.9rem;
}
.flashcard-progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--blue), #5aa9f0);
  transition: width .3s ease;
}
.flashcard-stage{
  display:flex;
  justify-content:center;
  margin-bottom: .9rem;
}
.flashcard-img{
  width:100%;
  max-width: 560px;
  height:auto;
  display:block;
  margin: 0 auto;
  border-radius: 18px;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  animation: pop-in .25s ease;
}
.flashcard-nav{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
}
.flashcard-nav-summary{
  justify-content:center;
  margin-top:.8rem;
  margin-bottom:.9rem;
}
.flashcard-summary-label{
  text-align:center;
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1.1rem;
  color: var(--orange-dark);
  margin-bottom:.6rem;
}

/* Home activity prompt box (Cek Tensi Darah mission) */
.funfact-section-activity{
  background: linear-gradient(135deg,#EAF7EC,#D7F5DA);
  border: 2px dashed var(--green);
}
.funfact-section-activity .funfact-section-label{
  color: var(--green-dark);
}

/* ---------- Quiz modal ---------- */
.quiz-option-btn{
  display:flex;
  align-items:center;
  gap:.7rem;
  width:100%;
  text-align:left;
  background:#FFF8EC;
  border:2px solid #ffe1c2;
  border-radius:14px;
  padding:.75rem 1rem;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:.92rem;
  color:#4a3a1c;
  cursor:pointer;
  transition: all .18s;
}
.quiz-option-btn:hover:not(:disabled){
  background:#FFE9CC;
  transform: translateX(3px);
}
.quiz-option-btn:disabled{ cursor:default; }
.quiz-option-letter{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  background: var(--orange);
  color:#fff;
  font-family:'Baloo 2',cursive;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.quiz-option-btn.quiz-correct{
  background:#d7f5da;
  border-color: var(--green);
  animation: quiz-pop .35s ease;
}
.quiz-option-btn.quiz-correct .quiz-option-letter{ background: var(--green-dark); }
.quiz-option-btn.quiz-wrong{
  background:#fde2e2;
  border-color: var(--red);
  animation: quiz-shake .4s ease;
}
.quiz-option-btn.quiz-wrong .quiz-option-letter{ background: var(--red); }
@keyframes quiz-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}
@keyframes quiz-shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
}
.quiz-feedback-correct{ color: var(--green-dark); }
.quiz-feedback-wrong{ color: var(--red); }

/* ---------- Storage matching mini game (Game Cocokkan Tempat Simpan Obat) ---------- */
.storage-tip-box{
  background: linear-gradient(135deg,#FFF3D6,#FFE8C2);
  border: 2px dashed var(--yellow);
  border-radius: 14px;
  padding: .75rem 1rem;
  margin-bottom: .9rem;
}
.storage-tip-box p{
  font-size:.88rem;
  line-height:1.45;
  color:#5c3d00;
  font-weight:500;
  margin:0;
}

/* Draggable "stage" holding the medicine item above the two photo zones */
.storage-drag-stage{
  display:flex;
  justify-content:center;
  margin-bottom: 1rem;
}
.storage-item-draggable{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  background: linear-gradient(135deg,#F3EAFB,#E9DAF7);
  border: 3px solid #b98af0;
  border-radius: 18px;
  padding: .9rem 1.3rem;
  text-align:center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  position: relative;
  z-index: 5;
  transition: box-shadow .2s;
}
.storage-item-draggable:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.storage-item-draggable.dragging{
  cursor: grabbing;
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
  z-index: 20;
}
.storage-item-draggable.storage-item-locked{
  cursor: default;
  pointer-events: none;
}
.storage-item-icon{
  font-size: 2.2rem;
  line-height:1;
}
.storage-item-icon-img{
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  display:block;
}
.storage-item-name{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1rem;
  color:#5b2c92;
  max-width: 220px;
}

/* Two photo-based drop zones (real cabinet / fridge / window photos) */
.storage-zones-photo{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
@media (min-width:480px){
  .storage-zones-photo{ flex-direction:row; }
}
.storage-zone-photo{
  /* Default (desktop/tablet, row layout): share the row width equally. */
  flex: 1 1 0;
  position:relative;
  height: 140px;
  border-radius:16px;
  border:3px solid #ffe1c2;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  cursor:pointer;
  transition: transform .2s, box-shadow .2s;
  outline: none;
  /* Prevent the browser's default translucent tap-highlight flash (often
     tinted red/gray on mobile) from briefly appearing on tap/drop before our
     own green "correct" feedback renders — this was the cause of a
     red-then-green flicker on correct answers. Border-color is intentionally
     NOT transitioned so it switches to green instantly instead of cross-fading
     through an intermediate reddish/brown hue. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.storage-zone-photo::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);
}
/* Mobile-only override: flex:1 1 0 has flex-basis:0, which fights with the
   fixed height above inside a column (flex-direction:column) layout and can
   collapse each zone to a sliver. Scoping this fix to a max-width query (not
   a plain rule placed after the desktop rule) means it can never win on
   wider screens regardless of source order — that ordering bug is exactly
   what shrank/hid the photos on desktop previously. */
@media (max-width:479px){
  .storage-zone-photo{ flex: 0 0 auto; }
}
.storage-zone-photo:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.storage-zone-photo-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.5rem .6rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:.78rem;
  line-height:1.25;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.storage-zone-photo-icon{ font-size:1.2rem; flex-shrink:0; }
.storage-zone-photo.storage-zone-correct{
  border-color: var(--green);
  animation: quiz-pop .35s ease;
  box-shadow: 0 0 0 4px rgba(76,175,80,.35);
}
.storage-zone-photo.storage-zone-wrong{
  border-color: var(--red);
  animation: quiz-shake .4s ease;
  box-shadow: 0 0 0 4px rgba(230,57,70,.3);
}

/* wiggle icon */
.wiggle{ animation: wiggle 2.2s infinite ease-in-out; display:inline-block; }
@keyframes wiggle{
  0%,100%{ transform: rotate(-6deg); }
  50%{ transform: rotate(6deg); }
}
.bounce-slow{ animation: bounce-slow 2.6s infinite; }
@keyframes bounce-slow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Certificate / voucher canvas wrapper */
.cert-canvas-wrap{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  max-width: 100%;
}
canvas{ max-width: 100%; height:auto; display:block; }

/* Tabs */
.tab-btn{
  font-family:'Baloo 2', cursive;
  font-weight:700;
  padding:.6rem 1.4rem;
  border-radius: 999px 999px 0 0;
  background:#ffe4c2;
  color:#a15200;
  cursor:pointer;
}
.tab-btn.active{
  background:#fff;
  color: var(--orange-dark);
  box-shadow: 0 -4px 10px rgba(0,0,0,0.06);
}

/* Voucher front/back side-by-side layout */
.voucher-side-by-side{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  justify-content:center;
  align-items:flex-start;
}
.voucher-panel{
  flex:1 1 260px;
  max-width: 320px;
  min-width: 220px;
}
.voucher-panel-label{
  text-align:center;
  font-family:'Baloo 2', cursive;
  font-weight:700;
  color:#a15200;
  margin-bottom:.4rem;
  font-size:.95rem;
}
@media (max-width:480px){
  .voucher-side-by-side{ gap:.8rem; }
  .voucher-panel{ flex:1 1 45%; min-width: 140px; }
}

/* Leaderboard row */
.lb-row{
  display:flex; align-items:center; gap:.8rem;
  background:#fff; border-radius:14px; padding:.6rem 1rem;
  margin-bottom:.5rem; border:2px solid #ffe4c2;
}
.lb-rank{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; background: var(--blue); flex-shrink:0;
}
.lb-rank.gold{ background: #FFC93C; color:#7a4b00; }
.lb-rank.silver{ background:#C0C0C0; color:#444; }
.lb-rank.bronze{ background:#CD7F32; color:#fff; }

.pulse-dot{
  width:9px; height:9px; border-radius:50%; background:#26d160;
  display:inline-block; animation: pulse 1.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(38,209,96,.6);}
  70%{ box-shadow: 0 0 0 8px rgba(38,209,96,0);}
  100%{ box-shadow: 0 0 0 0 rgba(38,209,96,0);}
}

input.fun-input, select.fun-input{
  border: 2px solid #ffd6a5;
  border-radius: 14px;
  padding: .65rem 1rem;
  width: 100%;
  font-family:'Poppins',sans-serif;
  outline:none;
}
input.fun-input:focus, select.fun-input:focus{
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}
label.fun-label{
  font-weight:600; color:#a15200; margin-bottom:.3rem; display:block; font-size:.92rem;
}

/* Game area */
#germ-canvas, #ttp-canvas{
  background: linear-gradient(180deg,#eaffee,#d8f3ff);
  border-radius: 20px;
  border: 3px dashed var(--green);
  touch-action: none;
}

.diff-scene{
  position:relative;
  width:100%;
  aspect-ratio: 4/3;
  background: linear-gradient(180deg,#fff7e6,#ffe9c7);
  border-radius:18px;
  border: 3px solid #ffd6a5;
  overflow:hidden;
}
.diff-item{
  position:absolute;
  font-size: 2rem;
  transform: translate(-50%,-50%);
  user-select:none;
}
.diff-hotspot{
  position:absolute;
  width:44px; height:44px;
  border-radius:50%;
  transform: translate(-50%,-50%);
  cursor:pointer;
}
.diff-mark{
  position:absolute;
  width:46px; height:46px;
  border:4px solid var(--red);
  border-radius:50%;
  transform: translate(-50%,-50%);
  pointer-events:none;
  animation: mark-pop .3s ease;
}
@keyframes mark-pop{ from{ transform:translate(-50%,-50%) scale(.4); opacity:0;} to{ transform:translate(-50%,-50%) scale(1); opacity:1;} }

/* ---------- Memory Match (Tebak Pasangan) ---------- */
.memory-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  max-width: 560px;
  margin: 0 auto;
}
.memory-card{
  position:relative;
  aspect-ratio: 3/4;
  cursor:pointer;
}
.memory-card-inner{
  width:100%; height:100%;
  position:relative;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4,.2,.2,1);
}
.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner{
  transform: rotateY(180deg);
}
.memory-card-face{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.memory-card-back{
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.memory-card-back .mc-icon{
  width: 46%;
  opacity: .95;
}
.memory-card-front{
  background:#fff;
  border: 3px solid var(--green);
  transform: rotateY(180deg);
  padding: 6px;
}
.memory-card.matched .memory-card-front{
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,201,60,.4);
}
.memory-card-front img{
  width:100%; height:100%; object-fit: contain;
}
.memory-card-front .mc-emoji{
  font-size: 2.2rem;
}
.memory-card.shake .memory-card-inner{
  animation: card-shake .4s;
}
@keyframes card-shake{
  0%,100%{ transform: rotateY(180deg) translateX(0); }
  25%{ transform: rotateY(180deg) translateX(-6px); }
  75%{ transform: rotateY(180deg) translateX(6px); }
}
@media (max-width: 480px){
  .memory-grid{ grid-template-columns: repeat(3, 1fr); gap:.4rem; }
  .memory-card-front .mc-emoji{ font-size: 1.6rem; }
}

/* ---------- Big "play mini game" CTA on sertifikat.html ---------- */
.minigame-cta-card{
  display:flex;
  align-items:center;
  gap:1rem;
  max-width: 560px;
  margin: 2rem auto 0;
  background: linear-gradient(120deg, var(--green), #2ea84a 55%, var(--blue));
  border-radius: 24px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 10px 0 rgba(0,0,0,0.12), 0 16px 30px rgba(0,0,0,0.18);
  text-decoration:none;
  border: 3px solid #fff;
  transition: transform .2s;
}
.minigame-cta-card:hover{
  transform: translateY(-4px) scale(1.01);
}
.minigame-cta-card:active{
  transform: translateY(3px);
}
.minigame-cta-icon{
  font-size: 2.8rem;
  flex-shrink:0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.minigame-cta-text{
  flex:1;
  min-width:0;
}
.minigame-cta-question{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1.2rem;
  color:#fff;
  line-height:1.25;
}
.minigame-cta-sub{
  font-size:.8rem;
  color: rgba(255,255,255,.9);
  margin-top:.2rem;
  font-weight:500;
}
.minigame-cta-arrow{
  font-size:1.6rem;
  flex-shrink:0;
  animation: minigame-arrow-nudge 1.4s infinite;
}
@keyframes minigame-arrow-nudge{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(6px); }
}
@media (max-width:480px){
  .minigame-cta-card{ padding:1rem 1rem; gap:.7rem; }
  .minigame-cta-icon{ font-size:2.2rem; }
  .minigame-cta-question{ font-size:1rem; }
  .minigame-cta-sub{ font-size:.72rem; }
}

.confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:70; }

@media (max-width: 640px){
  .fun-card{ border-radius:18px; }
  .diff-item{ font-size: 1.5rem; }
}