/* SmartStudy Game Gate v0.17.0
   Tujuan: skrin mula hanyalah pintu masuk ke game.
   Ada cover = cover + Mula Main + Kembali.
   Tiada cover = ikon + nama + 1 ayat + Mula Main + Kembali. */

.ssgl-screen{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;
  padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(145deg,var(--ssgl-bg-1,#ffb20c),var(--ssgl-bg-2,#ff8f08) 58%,var(--ssgl-bg-3,#f77b00));
}
.ssgl-screen.hidden{display:none}

.ssgl-card{
  width:min(500px,100%);
  min-height:0;max-height:none;
  padding:8px;
  background:transparent;
  border:0;border-radius:0;
  box-shadow:none;
  overflow:visible;
}

.ssgl-stage{
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
  justify-items:center;
}

.ssgl-visual{
  width:100%;
  display:grid;
  justify-items:center;
  gap:0;
}

.ssgl-cover-shell{
  width:min(420px,88vw,calc((100dvh - 155px) * .8));
  max-width:100%;
  aspect-ratio:4/5;
  display:grid;place-items:center;
  padding:6px;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 55px rgba(27,37,73,.22);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.ssgl-cover{
  display:none;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:22px;
  background:#fff;
}

.ssgl-fallback{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
  width:100%;
  padding:24px 18px;
}
.ssgl-fallback-icon{
  width:96px;height:96px;
  display:grid;place-items:center;
  border-radius:28px;
  background:linear-gradient(135deg,var(--ssgl-accent,#1d72f2),var(--ssgl-accent-2,#7048ef));
  color:#fff;
  border:6px solid rgba(255,255,255,.88);
  box-shadow:0 16px 32px rgba(39,54,119,.20);
  font-size:3rem;
}
.ssgl-fallback-title{
  margin:2px 0 0;
  color:#10295a;
  font-size:clamp(2.1rem,8vw,3.6rem);
  line-height:.98;
  letter-spacing:-.04em;
  font-weight:1000;
}
.ssgl-fallback-text{
  margin:0;
  max-width:360px;
  color:#66758d;
  font-size:1rem;
  line-height:1.5;
}

.ssgl-copy{
  width:min(420px,88vw,100%);
  display:grid;
  justify-items:stretch;
  gap:9px;
  padding:0;
}

/* Maklumat pemasaran/penjelasan tidak diperlukan di pintu game */
.ssgl-overline,
.ssgl-title,
.ssgl-lead,
.ssgl-feature-row,
.ssgl-steps,
.ssgl-foot,
.ssgl-cover-badge{display:none!important}

.ssgl-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}

.ssgl-start-btn{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--ssgl-accent,#1d72f2),var(--ssgl-accent-2,#7048ef));
  color:#fff;
  font-size:1.08rem;
  font-weight:1000;
  box-shadow:0 14px 28px rgba(35,63,170,.24);
  cursor:pointer;
}
.ssgl-start-btn:active{transform:translateY(1px)}

.ssgl-back-btn{
  min-height:38px;
  display:flex;align-items:center;justify-content:center;
  padding:6px 12px;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.95);
  text-decoration:none;
  font-size:1rem;
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}

.ssgl-start-note{
  display:none;
  margin:0!important;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  color:#5f6f85;
  text-align:center;
  font-size:1rem!important;
  line-height:1.4;
  box-shadow:0 8px 20px rgba(27,37,73,.10);
}
.ssgl-start-note.is-important{display:block}

/* Cover ada: cover benar-benar menggantikan ikon/nama/penerangan */
.ssgl-screen.has-cover .ssgl-cover{display:block}
.ssgl-screen.has-cover .ssgl-fallback{display:none}

/* Tiada cover: fallback ringkas */
.ssgl-screen.no-cover .ssgl-cover{display:none}
.ssgl-screen.no-cover .ssgl-cover-shell{
  cursor:default;
  background:rgba(255,255,255,.98);
}
.ssgl-screen.no-cover .ssgl-copy{
  margin-top:2px;
}

@media(max-width:640px){
  .ssgl-screen{
    padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom));
  }
  .ssgl-card{width:100%;padding:0}
  .ssgl-stage{gap:9px}
  .ssgl-cover-shell{
    width:min(92vw,calc((100dvh - 138px) * .8));
    padding:4px;
    border-radius:22px;
  }
  .ssgl-cover{border-radius:18px}
  .ssgl-copy{width:min(92vw,420px);gap:6px}
  .ssgl-start-btn{min-height:54px;border-radius:16px}
  .ssgl-back-btn{min-height:34px;padding:4px 10px}
}

@media(max-height:690px){
  .ssgl-cover-shell{
    width:min(360px,82vw,calc((100dvh - 130px) * .8));
  }
  .ssgl-start-btn{min-height:50px}
}

@media(prefers-reduced-motion:reduce){
  .ssgl-start-btn{transition:none!important}
}