/* KidsLab Indonesia — Mobile App / Responsive Guardrails
   Additive only: no question content or game data is changed. */
:root{
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-safe-left:env(safe-area-inset-left,0px);
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}
*{-webkit-tap-highlight-color:transparent}
button,a,[role="button"],input,select,textarea{
  touch-action:manipulation;
}
img,video{max-width:100%;height:auto}
iframe{max-width:100%}
.mobile-only{display:none!important}

/* App-like install pill, shown only when the browser exposes install support */
.kl-install-pill{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  border:0;
  border-radius:14px;
  padding:0 13px;
  background:linear-gradient(135deg,#ff5d8f,#8a6cff);
  color:#fff;
  font:800 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 8px 18px rgba(91,73,161,.22);
  cursor:pointer;
}
.kl-install-pill.show{display:inline-flex}

/* Mobile bottom dock for the main application shell */
.kl-mobile-dock{
  display:none;
  position:fixed;
  left:max(10px,var(--mobile-safe-left));
  right:max(10px,var(--mobile-safe-right));
  bottom:max(9px,var(--mobile-safe-bottom));
  z-index:9000;
  height:64px;
  padding:6px;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  border:1px solid rgba(120,106,146,.18);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel,#fff) 92%,transparent);
  box-shadow:0 18px 50px rgba(25,20,43,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.kl-mobile-dock a,.kl-mobile-dock button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted,#756f88);
  text-decoration:none;
  border-radius:16px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font:800 10px/1.05 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.kl-mobile-dock i{font-style:normal;font-size:21px;line-height:1}
.kl-mobile-dock .active{
  color:var(--accent,#ff5d8f);
  background:color-mix(in srgb,var(--accent,#ff5d8f) 10%,transparent);
}

/* iOS standalone mode keeps content clear of the home indicator */
@media (display-mode:standalone){
  body{padding-bottom:var(--mobile-safe-bottom)}
}

/* Main KidsLab Indonesia shell */
@media(max-width:860px){
  body.kl-main-app .main{
    padding-bottom:calc(88px + var(--mobile-safe-bottom))!important;
  }
  body.kl-main-app .topbar{
    position:sticky;
    top:0;
    z-index:60;
    margin-left:-4px;
    margin-right:-4px;
    padding-left:4px;
    padding-right:4px;
    background:color-mix(in srgb,var(--bg,#f7f6fb) 88%,transparent);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  body.kl-main-app .kl-mobile-dock,body.kl-gift-app .kl-mobile-dock{display:grid}
  body.kl-main-app .hero{
    margin-top:10px;
    border-radius:22px;
  }
  body.kl-main-app .hero-stats{
    overflow-x:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  body.kl-main-app .hero-stats::-webkit-scrollbar{display:none}
  body.kl-main-app .hero-stats .stat{white-space:nowrap}
  body.kl-main-app .original-subjects{
    margin-top:14px;
  }
  body.kl-main-app .original-subject-grid,
  body.kl-main-app .nusantara-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(142px,44vw);
    grid-template-columns:none!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    padding:2px 2px 8px;
    scrollbar-width:none;
  }
  body.kl-main-app .original-subject-grid::-webkit-scrollbar,
  body.kl-main-app .nusantara-grid::-webkit-scrollbar{display:none}
  body.kl-main-app .original-subject-grid>a,
  body.kl-main-app .nusantara-grid>a{scroll-snap-align:start}
  body.kl-main-app .category-dropdown{
    max-height:calc(100dvh - 150px);
  }
}
@media(max-width:620px){
  body.kl-main-app .topbar{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px 44px;
    gap:7px;
  }
  body.kl-main-app .topbar .search{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
  }
  body.kl-main-app .header-menu-wrap{grid-column:2}
  body.kl-main-app .gift-header-btn{grid-column:3}
  body.kl-main-app .user-chip{grid-column:4}
  body.kl-main-app #theme{grid-column:4;grid-row:1;display:none}
  body.kl-main-app .topbar .kl-install-pill{grid-column:1/-1;width:100%;grid-row:3}
  body.kl-main-app .hero{padding:18px!important}
  body.kl-main-app .hero h1{font-size:26px!important}
  body.kl-main-app .hero p{font-size:13px!important;line-height:1.48}
  body.kl-main-app .grid{gap:10px}
  body.kl-main-app .card{
    border-radius:18px;
    grid-template-columns:92px 1fr!important;
  }
  body.kl-main-app .cover{min-height:124px!important}
  body.kl-main-app .card h3{font-size:15px}
  body.kl-main-app .card p{font-size:12px}
  body.kl-main-app .original-subjects-head p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* Course pages */
@media(max-width:700px){
  body:has(.shell .level-grid) .shell{
    padding-left:max(10px,var(--mobile-safe-left));
    padding-right:max(10px,var(--mobile-safe-right));
    padding-bottom:calc(30px + var(--mobile-safe-bottom));
  }
  body:has(.shell .level-grid) .top{
    position:sticky;
    top:var(--mobile-safe-top);
    z-index:45;
    padding:8px 0;
    background:color-mix(in srgb,var(--bg,#f7f6fb) 90%,transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  body:has(.shell .level-grid) .panel,
  body:has(.shell .level-grid) .hero{padding:16px!important;border-radius:20px!important}
  body:has(.shell .level-grid) .level-tools{align-items:stretch}
  body:has(.shell .level-grid) .level-tools input,
  body:has(.shell .level-grid) .level-tools button{min-height:44px}
  body:has(.shell .level-grid) .choices{gap:9px}
  body:has(.shell .level-grid) .choice{min-height:58px}
  body:has(.shell .level-grid) .game-top{gap:7px}
  body:has(.shell .level-grid) .q{overflow-wrap:anywhere}
}

/* Gift / collection page */
@media(max-width:700px){
  body:has(.gift-page) .gift-page{
    padding-left:max(11px,var(--mobile-safe-left))!important;
    padding-right:max(11px,var(--mobile-safe-right))!important;
    padding-bottom:calc(86px + var(--mobile-safe-bottom))!important;
  }
  body:has(.gift-page) .card-head{
    position:sticky;
    top:var(--mobile-safe-top);
    z-index:70;
    padding-top:7px;
    padding-bottom:7px;
    background:color-mix(in srgb,var(--bg,#f7f6fb) 90%,transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  body:has(.gift-page) .gift-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  body:has(.gift-page) .gift-tabs::-webkit-scrollbar{display:none}
  body:has(.gift-page) .gift-tabs>*{white-space:nowrap}
  body:has(.gift-page) .collection-card{touch-action:manipulation}
  body:has(.gift-page) .sticky-save{
    bottom:calc(76px + var(--mobile-safe-bottom));
  }
}

/* Nusantara game lab */
@media(max-width:700px){
  body:has(#gameGrid) .shell{
    padding-left:max(10px,var(--mobile-safe-left))!important;
    padding-right:max(10px,var(--mobile-safe-right))!important;
    padding-bottom:calc(24px + var(--mobile-safe-bottom))!important;
  }
  body:has(#gameGrid) .topbar{padding-top:max(10px,var(--mobile-safe-top))}
  body:has(#gameGrid) .hero{border-radius:24px!important}
  body:has(#gameGrid) .modal{padding-top:var(--mobile-safe-top);padding-bottom:var(--mobile-safe-bottom)}
}

/* Original KidsLab and miscellaneous static/courseware pages:
   guard fixed desktop canvases/cards from causing horizontal scrolling. */
@media(max-width:760px){
  body :where(.container,.wrapper,.wrap,.page,.content,.content-wrap,.layout,.dashboard,.workspace,.main-content){
    max-width:100%;
  }
  table{max-width:100%;overflow-x:auto}
  dialog,[role="dialog"]{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  input,select,textarea{font-size:16px}
}

/* Landscape phones: keep gameplay area usable without huge headers */
@media(max-height:520px) and (orientation:landscape){
  body.kl-main-app .hero{padding:14px!important}
  body.kl-main-app .hero p{display:none}
  .kl-mobile-dock{height:54px}
  .kl-mobile-dock i{font-size:18px}
}

/* Accessibility and battery-friendly fallback */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kl-mobile-dock,.kl-install-pill{transition:none!important}
}