/* paywall.css — skrin belian ibu bapa + butang upsell kad menang.
   Fail BERASINGAN dari style.css supaya gaya game asal kekal tak tersentuh. */

/* ---------- Butang upsell pd kad menang ---------- */
.win-upsell{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:340px;
  border:3px solid #fff; border-radius:20px; cursor:pointer;
  font-family:inherit; text-align:left;
  background:linear-gradient(180deg,#FFDF70,var(--yellow));
  box-shadow:0 5px 0 var(--yellow-d), 0 10px 18px rgba(58,52,86,.2);
  padding:10px 18px; color:#7a5200;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease;
  animation:wuPulse 2.4s ease-in-out infinite;
}
.win-upsell[hidden]{display:none;}
.win-upsell:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--yellow-d), 0 12px 22px rgba(58,52,86,.24);}
.win-upsell:active{transform:translateY(3px); box-shadow:0 2px 0 var(--yellow-d), 0 4px 8px rgba(58,52,86,.16);}
.wu-icon{font-size:clamp(26px,4vw,34px); line-height:1; flex:0 0 auto;}
.wu-text{display:flex; flex-direction:column; line-height:1.25;}
.wu-text strong{font-size:clamp(14px,2.1vw,18px); font-weight:900;}
.wu-text small{font-size:clamp(11px,1.6vw,13px); opacity:.8; font-weight:700;}
@keyframes wuPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){ .win-upsell{animation:none;} }

/* ---------- Skrin paywall ---------- */
#screen-paywall{ padding:var(--nav-h) 16px 16px; justify-content:center; align-items:center; overflow-y:auto; }

/* Gate tekan & tahan (corak sama dgn laporan-gate) */
.pw-gate{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; }
.pw-gate[hidden]{display:none;}
.pw-gate-card{
  background:#fff; border-radius:26px; border:4px solid var(--yellow);
  padding:clamp(20px,4vh,34px) clamp(22px,4vw,40px);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:min(420px,92vw); text-align:center;
}
.pw-gate-icon{ font-size:clamp(40px,6vw,58px); line-height:1; }
.pw-gate-card h2{ margin:0; font-size:clamp(18px,2.8vw,24px); color:var(--ink); font-weight:900; }
.pw-gate-card p{ margin:0; font-size:clamp(13px,2vw,16px); color:#5a6a82; font-weight:700; }
.pw-gate-btn{
  position:relative; overflow:hidden;
  border:3px solid #fff; border-radius:999px; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#C9D8EC,#A8BDD8);
  box-shadow:0 4px 0 #8098b8; padding:14px 36px; min-height:54px;
  font-size:clamp(15px,2.2vw,19px); font-weight:900; color:#33445c;
  touch-action:none; user-select:none;
}
.pw-gate-fill{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(180deg,#8BE86A,var(--green));
  transition:none;
}
.pw-gate-btn.holding .pw-gate-fill{ inset:0 0 0 0; transition:inset 3s linear; }
.pw-gate-label{ position:relative; z-index:1; }

/* Kad tawaran */
.pw-wrap{ position:relative; z-index:2; width:100%; display:flex; justify-content:center; padding:8px 0 24px; }
.pw-wrap[hidden]{display:none;}
.pw-card{
  background:linear-gradient(180deg,#FFFDF6,#FFF6E4);
  border:4px solid #fff; border-radius:28px;
  box-shadow:0 8px 0 rgba(224,154,0,.25), 0 20px 40px rgba(30,20,60,.3);
  padding:clamp(18px,3vh,28px) clamp(18px,3vw,32px);
  max-width:min(520px,94vw); width:100%;
  display:flex; flex-direction:column; gap:14px;
}
.pw-head{ text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; }
.pw-badge{
  background:linear-gradient(180deg,#8BE86A,var(--green)); color:#fff;
  border:3px solid #fff; border-radius:999px; padding:3px 18px;
  font-size:clamp(12px,1.8vw,14px); font-weight:900;
  box-shadow:0 3px 0 var(--green-d);
}
.pw-title{ margin:0; font-size:clamp(19px,3vw,26px); font-weight:900; color:var(--ink); line-height:1.25; }
.pw-sub{ margin:0; font-size:clamp(13px,2vw,16px); color:#5a6a82; font-weight:700; line-height:1.45; }

.pw-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pw-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:clamp(13px,1.9vw,15.5px); color:var(--ink); font-weight:700; line-height:1.4;
}
.pw-list li span{ font-size:1.15em; flex:0 0 auto; }

.pw-price{ text-align:center; padding:8px 0 2px; }
.pw-price-main{ font-size:clamp(36px,6vw,52px); font-weight:900; color:var(--green-d); line-height:1; }
.pw-price-note{ font-size:clamp(12px,1.8vw,14px); color:#5a6a82; font-weight:800; margin-top:2px; }

.pw-form{ display:flex; flex-direction:column; gap:10px; }
.pw-form label{
  display:flex; flex-direction:column; gap:4px;
  font-size:clamp(12px,1.8vw,14px); font-weight:800; color:var(--ink);
}
.pw-form input{
  font-family:inherit; font-size:clamp(14px,2vw,16px); font-weight:700;
  border:3px solid #E3D3B0; border-radius:14px; padding:11px 14px;
  background:#fff; color:var(--ink); min-height:48px;
}
.pw-form input:focus-visible{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(106,220,255,.3); }
.pw-form label small{ font-size:11px; font-weight:700; color:#8a97a8; }
.pw-error{
  margin:0; padding:9px 14px; border-radius:12px;
  background:#fde8e8; color:#c0392b; font-weight:800;
  font-size:clamp(12px,1.8vw,14px);
}
.pw-error[hidden]{display:none;}
.pw-submit{ width:100%; margin-top:4px; font-size:clamp(15px,2.2vw,19px); padding:14px 20px; }
.pw-submit:disabled{ opacity:.65; cursor:default; }

.pw-secure, .pw-guarantee{
  margin:0; text-align:center; line-height:1.4;
  font-size:clamp(11px,1.6vw,13px); color:#5a6a82; font-weight:700;
}
.pw-guarantee{ color:#3a9d43; font-weight:800; }

.pw-foot{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px; }
.pw-foot a{ font-size:clamp(12px,1.8vw,14px); font-weight:800; color:#2E9FDF; }
.pw-back{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:clamp(12px,1.8vw,14px); font-weight:800; color:#5a6a82; padding:6px;
}
.pw-back:hover{ color:var(--ink); }

/* Tile kategori berkunci-TRIAL — boleh diklik, jadi beri isyarat visual */
.map-btn-trial{ cursor:pointer; }
.map-btn-trial .map-btn-lock{ animation:wuPulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .map-btn-trial .map-btn-lock{animation:none;} }