/*purgecss start ignore*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@100..125,400..700&display=swap');

/* =========================================================
   Susun Gambar — Play Store landing page
   Guide  : /guide/home.png (786 x 3458 @2x)
   Design : 393px wide, every value below is design-px and is
            scaled through --px so the page matches the guide
            proportionally on any viewport.
   ========================================================= */

main{
  height: auto;
  min-height: 100vh;
  background: #FFD300;
  box-shadow: none;
  overflow-x: hidden;
}

.ps{
  --px: calc(min(100vw, 480px) / 393);

  --navy: #111827;
  --red: #EC1C23;
  --yellow: #FFD300;
  --cream: #FEF9C3;
  --gold: #FFD700;
  --silver: #CBD5E1;
  --bronze: #CD7F32;
  --emboss: #7F6900;
  --emboss-soft: #CFAE08;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--yellow);
  color: var(--navy);
  font-family: 'Fredoka', 'Quicksand', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-stretch: 106%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports (container-type: inline-size){
  main{ container-type: inline-size; }
  .ps{ --px: calc(100cqw / 393); }
}

:where(.ps) img{ width: auto; height: auto; max-width: none; display: block; }
:where(.ps) ul, :where(.ps) li{ margin-left: 0; list-style: none; }
:where(.ps) li:not(:last-child){ margin-bottom: 0; }
:where(.ps) button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- background stack (yellow + bg_1 wash + bg_2 puzzle) ---------- */

.ps-bg1,
.ps-bg2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
.ps-bg1{ height: calc(var(--px) * 634); }
.ps-bg2{ height: calc(var(--px) * 665); mix-blend-mode: color-burn; }

/* ---------- hero ---------- */

.ps-hero{
  position: relative;
  z-index: 1;
  height: calc(var(--px) * 655);
}

.ps-pieces{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ps-piece{
  position: absolute;
  animation: ps-float 6s ease-in-out infinite;
  will-change: transform;
}

/* positions read off puzzle_full.png inside the guide (hero starts at y=337@2x) */
.ps-p3{ left: calc(var(--px) * 331.75); top: calc(var(--px) * 169.25); width: calc(var(--px) * 45);    animation-delay: -0.4s; }
.ps-p1{ left: calc(var(--px) * 2.4);    top: calc(var(--px) * 249);    width: calc(var(--px) * 69.5);  animation-delay: -2.1s; }
.ps-p5{ left: calc(var(--px) * 63.7);   top: calc(var(--px) * 288.25); width: calc(var(--px) * 152);   animation-delay: -1.2s; }
.ps-p6{ left: calc(var(--px) * 234.75); top: calc(var(--px) * 263.85); width: calc(var(--px) * 195);   animation-delay: -3.0s; }
.ps-p4{ left: calc(var(--px) * -45);    top: calc(var(--px) * 411.8);  width: calc(var(--px) * 213.5); animation-delay: -0.8s; }
.ps-p7{ left: calc(var(--px) * 178.5);  top: calc(var(--px) * 446);  width: calc(var(--px) * 166);   animation-delay: -2.6s; }
.ps-p2{ left: calc(var(--px) * 347.5);  top: calc(var(--px) * 548);    width: calc(var(--px) * 90);    animation-delay: -1.7s; }

@keyframes ps-float{
  0%, 100%{ transform: translate3d(0, 0, 0) rotate(0deg); }
  50%     { transform: translate3d(0, calc(var(--px) * -6), 0) rotate(-1.2deg); }
}

/* flattened artwork — used when the visitor asks for reduced motion */
.ps-pieces-flat{
  display: none;
  position: absolute;
  left: 0;
  top: calc(var(--px) * 168.5);
  width: 100%;
}

@media (prefers-reduced-motion: reduce){
  .ps-piece{ display: none; }
  .ps-pieces-flat{ display: block; }
}

.ps-hero-copy{
  position: relative;
  z-index: 2;
  padding-top: calc(var(--px) * 24);
  text-align: center;
}

.ps-logo{
  width: calc(var(--px) * 90);
  margin: 0 auto;
  filter:
    drop-shadow(0 calc(var(--px) * 1.5) 0 #fff) drop-shadow(0 calc(var(--px) * -1.5) 0 #fff)
    drop-shadow(calc(var(--px) * 1.5) 0 0 #fff) drop-shadow(calc(var(--px) * -1.5) 0 0 #fff);
}

.ps-title{
  margin: calc(var(--px) * 31.5) 0 0;
  font-size: calc(var(--px) * 22);
  line-height: calc(var(--px) * 26);
  font-weight: 600;
  color: var(--navy);
}

.ps-10gb{
  width: calc(var(--px) * 217.5);
  margin: calc(var(--px) * 12.5) auto 0;
  /* the guide nudges the 10GB lockup 4px right of centre — remove to centre it */
  transform: translateX(calc(var(--px) * 4));
}

/* ---------- bantuan / sisa main pills ---------- */

.ps-stats{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 18);
}

.ps-pill{
  display: inline-flex;
  align-items: center;
  height: calc(var(--px) * 32);
  padding: 0 calc(var(--px) * 4) 0 calc(var(--px) * 11);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 calc(var(--px) * 2) calc(var(--px) * 6) rgba(120, 60, 0, .16);
}

.ps-pill-ico{ width: calc(var(--px) * 20); }

.ps-pill-label{
  margin: 0 calc(var(--px) * 8) 0 calc(var(--px) * 5);
  font-size: calc(var(--px) * 13);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.ps-pill-add{
  flex: none;
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  border-radius: 999px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-pill-add svg{ width: 62%; height: 62%; }

/* ---------- main CTA ---------- */

.ps-cta{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--px) * 303);
  height: calc(var(--px) * 62);
  margin: calc(var(--px) * 13) auto 0;
  border: calc(var(--px) * 3) solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #E40E0F 0%, #BF090A 100%);
  box-shadow: 0 calc(var(--px) * 5) 0 var(--emboss);
  color: #fff;
  font-size: calc(var(--px) * 20.4);
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}
.ps-cta:active{ transform: translateY(calc(var(--px) * 3)); box-shadow: 0 calc(var(--px) * 2) 0 var(--emboss); }

/* ---------- shared card shell ---------- */

.ps-section{
  position: relative;
  z-index: 2;
  margin: 0 calc(var(--px) * 24);
}

.ps-card{
  background: #fff;
  border-radius: calc(var(--px) * 20);
}

/* ---------- google play ---------- */

.ps-gplay{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--px) * 73.5);
  margin-top: calc(var(--px) * 32);
  padding: 0 calc(var(--px) * 16) 0 calc(var(--px) * 17);
  box-sizing: border-box;
}

.ps-gplay p{
  margin: 0;
  font-size: calc(var(--px) * 15.9);
  line-height: calc(var(--px) * 20);
  font-weight: 600;
  color: #0E2E25;
}

.ps-gplay-badge{ width: calc(var(--px) * 145); height: auto; }

/* ---------- leaderboard ---------- */

.ps-lead{
  margin-top: calc(var(--px) * 20);
  padding: calc(var(--px) * 14) calc(var(--px) * 16) calc(var(--px) * 17);
  box-shadow: 0 calc(var(--px) * 5) 0 var(--emboss-soft);
}

.ps-lead-title{
  margin: 0;
  text-align: center;
  font-size: calc(var(--px) * 22);
  line-height: calc(var(--px) * 28);
  font-weight: 600;
  color: var(--navy);
}

.ps-lead-note{
  margin: calc(var(--px) * 13) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 12);
  line-height: calc(var(--px) * 14);
  font-weight: 600;
  color: var(--navy);
}

.ps-table{ margin-top: calc(var(--px) * 13); }

.ps-row{
  display: flex;
  align-items: center;
  height: calc(var(--px) * 43);
  padding: calc(var(--px) * 3) 0;
  font-size: calc(var(--px) * 13);
  font-weight: 600;
  color: var(--navy);
  box-sizing: border-box;
}

.ps-row--head{
  height: calc(var(--px) * 39);
  padding: 0;
  border-radius: calc(var(--px) * 12);
  background: var(--navy);
  color: #fff;
  font-size: calc(var(--px) * 13.2);
  margin-bottom: calc(var(--px) * 10);
}

.ps-row--medal{ height: calc(var(--px) * 50); }

.ps-row--alt{
  background: var(--cream);
  background-clip: content-box;
  border-radius: calc(var(--px) * 10);
}

.ps-col-no{ flex: none; width: calc(var(--px) * 52.5); display: flex; align-items: center; justify-content: center; }
.ps-col-hp{ flex: none; width: calc(var(--px) * 120); }
.ps-col-lv{ flex: none; width: calc(var(--px) * 61); text-align: center; }
.ps-col-rw{ flex: none; width: calc(var(--px) * 79); text-align: center; color: #EF4444; }
.ps-row--head .ps-col-rw{ color: #fff; }

.ps-medal{
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--px) * 12);
  font-weight: 600;
  line-height: 1;
}
.ps-medal--1{ background: var(--gold);   color: #78350F; }
.ps-medal--2{ background: var(--silver); color: #1E293B; }
.ps-medal--3{ background: var(--bronze); color: #fff; }

.ps-col-no > span{ font-size: calc(var(--px) * 14); }

/* the guide's mask glyphs are tighter than Fredoka's asterisk advance */
.ps-mask{ letter-spacing: calc(var(--px) * -1.6); }

.ps-divider{
  height: calc(var(--px) * 2);
  margin: calc(var(--px) * 9) 0 calc(var(--px) * 13.5);
  background: #DBDCDF;
  border-radius: 999px;
}

.ps-me{
  display: flex;
  align-items: center;
  height: calc(var(--px) * 46);
  padding-right: calc(var(--px) * 30);
  border-radius: calc(var(--px) * 12);
  background: var(--red);
  color: #fff;
  font-size: calc(var(--px) * 13);
  font-weight: 600;
}
.ps-me .ps-medal{ background: #000; color: #fff; }
.ps-me-name{ flex: 1 1 auto; }

/* ---------- secondary actions ---------- */

.ps-actions{
  display: flex;
  gap: calc(var(--px) * 12.5);
  margin-top: calc(var(--px) * 18);
}

.ps-action{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 10);
  height: calc(var(--px) * 48);
  border: calc(var(--px) * 2) solid var(--red);
  border-radius: calc(var(--px) * 12);
  background: #fff;
  color: var(--red);
  font-size: calc(var(--px) * 16);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}
.ps-action img{ width: calc(var(--px) * 15); height: calc(var(--px) * 15); }
/* the guide's two buttons are not equal width — drop this rule for a 50/50 split */
.ps-action:first-child{ flex: 0 0 calc(var(--px) * 159.5); }

/* ---------- footer ---------- */

.ps-footer{
  position: relative;
  z-index: 2;
  height: calc(var(--px) * 60);
  margin-top: calc(var(--px) * 32);
  padding-top: calc(var(--px) * 14.5);
  background: #1E1E1E;
  color: #fff;
  text-align: center;
  font-size: calc(var(--px) * 12.5);
  line-height: calc(var(--px) * 14);
  font-weight: 600;
  box-sizing: border-box;
}

/* =========================================================
   LOGIN  — guide/login.png (375 x 666 @1x)
   Guide px are converted to the 393-wide design space (x1.048)
   and reuse the index.html tokens/components above.
   ========================================================= */

.ps-login{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ps-login-body{
  flex: 1 0 auto;
  padding-bottom: calc(var(--px) * 88);
}

/* --- hero: same wash as index.html, cropped and faded out --- */

.ps-login-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: calc(var(--px) * 160);
  background: var(--yellow);
}

.ps-login-hero::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--px) * 70);
  background: linear-gradient(to bottom, rgba(255, 211, 0, 0), #FFD300);
  z-index: 1;
}

.ps-back{
  position: absolute;
  z-index: 2;
  left: calc(var(--px) * 15.7);
  top: calc(var(--px) * 22);
  width: calc(var(--px) * 36.7);
  height: calc(var(--px) * 36.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: calc(var(--px) * 2) solid #fff;
  background: rgba(255, 255, 255, .35);
  box-sizing: border-box;
}
.ps-back svg{ width: calc(var(--px) * 18); height: calc(var(--px) * 18); display: block; }

.ps-login-logo{
  position: relative;
  z-index: 2;
  padding-top: calc(var(--px) * 24);
}

/* --- headings --- */

.ps-login-title{
  margin: calc(var(--px) * 18) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 30);
  line-height: calc(var(--px) * 36);
  font-weight: 600;
  color: var(--red);
}

.ps-login-sub{
  margin: calc(var(--px) * 7.4) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 16.5);
  line-height: calc(var(--px) * 20);
  font-weight: 600;
  color: var(--navy);
}

/* --- form card --- */

.ps-login-card{
  margin-top: calc(var(--px) * 21.5);
  padding: calc(var(--px) * 16) calc(var(--px) * 16) calc(var(--px) * 18);
  box-shadow: 0 calc(var(--px) * 5) 0 var(--emboss-soft);
}

.ps-field-label{
  display: block;
  margin: 0 0 calc(var(--px) * 7);
  font-size: calc(var(--px) * 16);
  line-height: calc(var(--px) * 20);
  font-weight: 600;
  color: var(--navy);
}

.ps-field{
  display: flex;
  align-items: center;
  height: calc(var(--px) * 52.4);
  padding: 0 calc(var(--px) * 16);
  border-radius: calc(var(--px) * 15);
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--px) * 1.5) #E7E2CE;
  box-sizing: border-box;
}

.ps-field-prefix{
  flex: none;
  margin-right: calc(var(--px) * 11);
  font-size: calc(var(--px) * 17);
  font-weight: 600;
  color: #0E2E25;
}

.ps-field input{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  color: var(--navy);
  outline: none;
}
.ps-field input::placeholder{ color: #B5AA8E; font-weight: 500; }

.ps-field-hint{
  margin: calc(var(--px) * 9) 0 0;
  font-size: calc(var(--px) * 13);
  line-height: calc(var(--px) * 20);
  font-weight: 600;
  color: #867038;
}

.ps-cta--block{
  width: 100%;
  height: calc(var(--px) * 57.6);
  margin-left: 0;
  margin-right: 0;
}

.ps-login-card .ps-cta{ margin-top: calc(var(--px) * 17.5); }

.ps-terms{
  margin: calc(var(--px) * 15) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 13.4);
  line-height: calc(var(--px) * 17.8);
  font-weight: 600;
  color: var(--navy);
}
.ps-terms a{ color: var(--red); text-decoration: underline; }

/* =========================================================
   OTP POPUP — guide/popup_otp.png
   ========================================================= */

.ps-otp .popup-backdrop{ background: rgba(0, 0, 0, .6); }

.ps-otp-wrap{
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--px) * 24);
  box-sizing: border-box;
}

.ps-otp .popup-content{
  position: relative;
  width: 100%;
  max-width: calc(var(--px) * 345);
  padding: calc(var(--px) * 23) calc(var(--px) * 20) calc(var(--px) * 22);
  border-radius: calc(var(--px) * 20);
  background: #fff;
  box-sizing: border-box;
}

.ps-otp-close{
  position: absolute;
  top: calc(var(--px) * 11.7);
  right: calc(var(--px) * 11.2);
  width: calc(var(--px) * 30);
  height: calc(var(--px) * 30);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cream);
}
.ps-otp-close svg{ width: calc(var(--px) * 14); height: calc(var(--px) * 14); display: block; }

.ps-otp-title{
  margin: 0;
  text-align: center;
  font-size: calc(var(--px) * 22);
  line-height: calc(var(--px) * 28);
  font-weight: 600;
  color: var(--navy);
}

.ps-otp-sub{
  margin: calc(var(--px) * 5.1) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 15);
  line-height: calc(var(--px) * 19);
  font-weight: 500;
  color: var(--navy);
}
.ps-otp-sub strong{ font-weight: 600; }

.ps-otp-fields{
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 6.6);
  margin-top: calc(var(--px) * 22.3);
}

.ps-otp-input{
  width: calc(var(--px) * 66);
  height: calc(var(--px) * 56.6);
  padding: 0;
  border: calc(var(--px) * 2) solid #FBEFB0;
  border-radius: calc(var(--px) * 12);
  background: var(--cream);
  text-align: center;
  font: inherit;
  font-size: calc(var(--px) * 22);
  font-weight: 600;
  color: var(--navy);
  caret-color: var(--navy);
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.ps-otp-input::-webkit-outer-spin-button,
.ps-otp-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.ps-otp-input:focus,
.ps-otp-input:placeholder-shown{
  background: #fff;
  border-color: var(--red);
}

.ps-otp-resend{
  margin: calc(var(--px) * 12.1) 0 0;
  text-align: center;
  font-size: calc(var(--px) * 15);
  line-height: calc(var(--px) * 19);
  font-weight: 500;
  color: var(--navy);
}
.ps-otp-resend button{ font-weight: 600; color: #998B68; }
.ps-otp-resend button:not([disabled]){ color: var(--red); text-decoration: underline; }

.ps-otp .ps-cta{ margin-top: calc(var(--px) * 2.5); }

.ps-cta[disabled]{
  background: #D5A7A5;
  box-shadow: 0 calc(var(--px) * 5) 0 #B4A98E;
  cursor: default;
}
.ps-cta[disabled]:active{ transform: none; box-shadow: 0 calc(var(--px) * 5) 0 #B4A98E; }
/*purgecss end ignore*/