:root{
  --ink:#202124;
  --ink-soft:#5f6368;
  --ink-muted:#80868b;
  --line:#e1e3e6;
  --bg:#ffffff;
  --card-bg:#f8f9fa;
  --chip-bg:#f1f3f4;
  --track:#e1e3e6;
  --star:#202124;
  --shadow:0 2px 10px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8eaed;
    --ink-soft:#9aa0a6;
    --ink-muted:#80868b;
    --line:#35363a;
    --bg:#0e0e0f;
    --card-bg:#1c1d1f;
    --chip-bg:#26282b;
    --track:#3c4043;
    --star:#e8eaed;
    --shadow:0 2px 10px rgba(0,0,0,.5);
  }
}

/* ---------- accent color: change data-theme="blue"|"green" on .app-frame in index.html
   to switch the whole page's accent (install button, stars, bars, links, chips, etc.) ---------- */
.app-frame[data-theme="blue"]{ --accent:#1a73e8; --accent-dark:#0b57d0; }
.app-frame[data-theme="green"]{ --accent:#1e8e3e; --accent-dark:#137333; }
.app-frame{ --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Roboto,"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
svg{display:block;flex:0 0 auto;}

.app-frame{
  position:relative;
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  padding-bottom:76px;
}

/* ---------- top bar: transparent-over-hero -> solid-on-scroll (same pattern as iOS) ---------- */
.top-bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 16px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.top-bar.scrolled{background:var(--bg);border-bottom-color:var(--line);}
.top-bar__logo{width:34px;height:34px;flex:0 0 auto;}
.top-bar__actions{display:flex;align-items:center;gap:20px;}
.top-bar__actions svg{
  width:23px;height:23px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  transition:color .25s ease, filter .25s ease;
}
.top-bar.scrolled .top-bar__actions svg{color:var(--ink-soft);filter:none;}
.app-frame[data-header="plain"] .top-bar{background:var(--bg);border-bottom-color:var(--line);}
.app-frame[data-header="plain"] .top-bar__actions svg{color:var(--ink-soft);filter:none;}

/* ---------- hero gallery (video / gif / game preview, shown only when is_demo_header has media) ---------- */
.hero-gallery{
  position:relative;
  width:100%;
  /* aspect-ratio:390/210; */
  aspect-ratio:390/150;
  overflow:hidden;
  background:var(--card-bg);
  margin-top:-56px; /* pulls the video up under the transparent .top-bar (same height),
                        so the video reaches the very top edge and the icons float over it */
}
.hero-slide{position:absolute;inset:0;}
.hero-slide iframe{width:100%;height:100%;object-fit:cover;border:none;display:block;}
.hero-slide__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:blur(30px) brightness(.6) saturate(1.15);
  transform:scale(1.2);
}
.hero-slide__fg{
  position:relative;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.app-frame[data-header="plain"] .hero-gallery{display:none;}

/* ---------- app header ---------- */
.app-header{
  display:flex;gap:16px;
  padding:20px 16px 0;
}
.app-icon{
  width:84px;height:84px;flex:0 0 auto;
  border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--card-bg);
}
.app-icon img{width:100%;height:100%;object-fit:cover;}
.app-header__info{flex:1;min-width:0;}
.app-name{
  margin:0;
  display:flex;align-items:center;gap:6px;
  font-size:23px;font-weight:400;line-height:1.25;
  color:var(--ink);
}
.verified-badge{width:36px;height:36px;flex:0 0 auto;}
.dev-link{
  display:block;margin-top:2px;
  font-size:15px;color:var(--accent);
}
.badges-line{
  margin-top:2px;
  font-size:13px;color:var(--ink-soft);
}

/* ---------- stats row ---------- */
.stats-row{
  list-style:none;margin:18px 0 0;padding:0 16px 4px;
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
.stats-row::-webkit-scrollbar{display:none;}
.stats-item{
  flex:0 0 auto;
  width:130px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0 8px;
  border-right:1px solid var(--line);
  text-align:center;
}
.stats-item:last-child{border-right:none;}
.stats-value{
  font-size:15px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;gap:3px;
  text-align:center;
  white-space:normal;
}
.stats-star{width:15px;height:15px;color:var(--star);}
.stats-label{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:3px;}
.stats-info{width:13px;height:13px;color:var(--ink-muted);}

/* ---------- install ---------- */
.install-section{padding:20px 16px 0;}
.btn-install{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:42px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:.15px;
  overflow:hidden;
}
.btn-install__ring{
  position:absolute;left:14px;top:50%;
  width:20px;height:20px;
  transform:translateY(-50%) rotate(-90deg);
  opacity:0;
  transition:opacity .2s ease;
}
.btn-install[data-state="installing"] .btn-install__ring{opacity:1;}
.btn-install__ring-bg{fill:none;stroke:rgba(255,255,255,.35);stroke-width:3;}
.btn-install__ring-fg{
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100.53;stroke-dashoffset:100.53;
  transition:stroke-dashoffset .1s linear;
}

.share-row{
  display:flex;justify-content:center;gap:36px;
  margin-top:16px;
}
.share-btn{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--accent);
}
.share-btn svg{width:19px;height:19px;}

.devices-line{
  display:flex;align-items:center;gap:10px;
  margin-top:18px;padding:0 16px;
  font-size:13.5px;color:var(--ink-soft);
}
.devices-line svg{width:18px;height:18px;flex:0 0 auto;}

/* ---------- gallery ---------- */
.gallery-section{margin-top:20px;container-type:inline-size;}
.gallery-scroll{
  display:flex;gap:8px;
  overflow-x:auto;
  padding:0 16px;
  scrollbar-width:none;
}
.gallery-scroll::-webkit-scrollbar{display:none;}
/* .app-frame[data-header="plain"] .gallery-item--preview{display:none;} */
.gallery-item{
  flex:0 0 auto;
  height:170px; /* static fallback for browsers without container-query support */
  height:45cqw; /* ties card size to the actual rendered width, not a fixed px, so it stays
                   phone-proportional instead of ballooning on narrow real-device viewports */
  border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  cursor:pointer;
  background:var(--card-bg);
}
.gallery-item img,.gallery-item video{height:100%;width:auto;border:none;display:block;}
.gallery-item iframe{height:100%;width:180px;border:none;display:block;}

/* ---------- shared section chrome ---------- */
.section{padding:24px 16px 0;}
.section-heading{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;text-align:left;
}
.section-heading h2{margin:0;font-size:17px;font-weight:500;color:var(--ink);}
.section-arrow{width:18px;height:18px;color:var(--ink-muted);flex:0 0 auto;}
.round-arrow{
  width:32px;height:32px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--chip-bg);
  color:var(--ink-soft);
  transition:transform .25s ease;
}
.round-arrow svg{width:18px;height:18px;}
.round-arrow.open{transform:rotate(-90deg);}
hr.divider{border:none;border-top:1px solid var(--line);margin:24px 16px 0;}

/* ---------- about ---------- */
.about-text{
  margin:14px 0 0;
  font-size:14px;line-height:1.55;color:var(--ink);
  overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
}
.about-cols{
  display:flex;gap:24px;
  margin-top:18px;
}
.about-cols div{flex:1;min-width:0;}
.about-cols span{display:block;font-size:14.5px;font-weight:500;color:var(--ink);margin-bottom:3px;}
.about-cols small{font-size:13.5px;color:var(--ink-soft);}
.tag-row{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;
}
.tag-chip{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13.5px;color:var(--ink);
}
.about-powered{margin:14px 0 0;font-size:12.5px;color:var(--ink-soft);}

/* ---------- safety ---------- */
.safety-intro{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.safety-intro-extra{display:none;margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.safety-intro-extra.open{display:block;}
.safety-intro-extra p{margin:0 0 10px;}
.safety-intro-extra .see-all-link{margin:0;}
.safety-card{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.safety-row{
  display:flex;gap:14px;
  margin-bottom:16px;
}
.safety-row:last-of-type{margin-bottom:0;}
.safety-row svg{width:22px;height:22px;color:var(--ink-soft);margin-top:1px;}
.safety-row__title{margin:0;font-size:14px;color:var(--ink);line-height:1.4;}
.safety-row__sub{margin:2px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.4;}
.safety-extra{display:none;}
.safety-extra.open{display:block;}
.safety-more{
  margin-top:4px;
  display:inline-block;
  font-size:13.5px;font-weight:500;color:var(--accent);
  padding:8px 14px;border-radius:8px;
  background:var(--accent-soft);
}

/* ---------- ratings summary ---------- */
.ratings-verified{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft);}
.device-chips{
  display:flex;gap:10px;
  margin-top:16px;
  overflow-x:auto;scrollbar-width:none;
}
.device-chips::-webkit-scrollbar{display:none;}
.device-chip{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14px;color:var(--ink);
  white-space:nowrap;
}
.device-chip svg{width:17px;height:17px;}
.device-chip.active{
  background:var(--accent-soft);
  border-color:transparent;
  color:var(--accent);
  font-weight:500;
}

.score-block{
  display:flex;align-items:center;gap:24px;
  margin-top:20px;
}
.score-num{font-size:52px;font-weight:400;color:var(--ink);line-height:1;flex:0 0 auto;}
.score-stars{margin-top:6px;display:flex;gap:2px;color:var(--accent);}
.score-stars svg{width:16px;height:16px;}
.score-count{margin-top:4px;font-size:13px;color:var(--ink-soft);}

.rating-bars{flex:1;min-width:0;}
.rating-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.rating-bar-row span{font-size:13px;color:var(--ink-soft);width:8px;flex:0 0 auto;}
.rating-bar{flex:1;height:8px;border-radius:4px;background:var(--track);overflow:hidden;}
.rating-bar div{height:100%;background:var(--accent);border-radius:4px;}

/* ---------- review cards ---------- */
.review-list{margin-top:22px;display:flex;flex-direction:column;gap:22px;}
.review-list.is-hidden{display:none;}

.reviews-loader{display:none;align-items:center;justify-content:center;padding:40px 0;}
.reviews-loader.open{display:flex;}
.reviews-loader .spinner{
  width:28px;height:28px;
  border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  animation:reviews-spin .8s linear infinite;
}
@keyframes reviews-spin{to{transform:rotate(360deg);}}
.review-card__head{display:flex;align-items:center;gap:12px;}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:600;
  background:var(--avatar-bg,#888);
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.btn-install:disabled{opacity:.55;pointer-events:none;}
.avatar--squiggle{
  background:none;
  color:var(--ink-muted);
}
.avatar--squiggle svg{width:28px;height:14px;}
.review-card__name{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink);}
.review-meta{display:flex;align-items:center;gap:10px;margin-top:8px;}
.review-stars{display:flex;gap:2px;color:var(--accent);}
.review-stars svg{width:13px;height:13px;}
.review-more{width:20px;height:20px;color:var(--ink-muted);}
.review-date{font-size:12.5px;color:var(--ink-soft);}
.review-text{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink);}
.helpful-count{margin:10px 0 0;font-size:13px;color:var(--ink-soft);}
.helpful-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--ink-soft);}
.helpful-btn{
  padding:6px 16px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--ink);
}
.helpful-btn.active{background:var(--accent-soft);border-color:transparent;color:var(--accent);}
.dev-reply{
  margin:12px 0 0 52px;
  padding:12px 14px;
  background:var(--card-bg);
  border-radius:12px;
}
.dev-reply__head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:500;color:var(--ink);}
.dev-reply__head span{font-weight:400;color:var(--ink-soft);}
.dev-reply p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}

.see-all-link{
  display:inline-block;margin-top:20px;
  font-size:14px;font-weight:500;color:var(--accent);
}

/* ---------- whats new ---------- */
.whatsnew-list{margin:14px 0 0;padding:0;list-style:none;}
.whatsnew-list li{
  position:relative;padding-left:16px;
  font-size:14px;line-height:1.6;color:var(--ink);
}
.whatsnew-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--ink-soft);
  transform:rotate(45deg);
}

/* ---------- support / developer / footer rows ---------- */
.support-rows{margin-top:16px;display:flex;flex-direction:column;gap:20px;}
.support-row{display:flex;gap:14px;}
.support-row svg{width:20px;height:20px;color:var(--ink-soft);margin-top:2px;}
.support-row__title{margin:0;font-size:14.5px;font-weight:500;color:var(--ink);}
.support-row__sub{margin:2px 0 0;font-size:13.5px;color:var(--accent);}

.developer-text{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
.flag-row{
  display:flex;align-items:center;gap:12px;
  margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--ink);
}
.flag-row svg{width:19px;height:19px;color:var(--ink-soft);}

.kids-links{margin-top:14px;display:flex;flex-direction:column;gap:14px;}
.kids-links a{font-size:14px;color:var(--ink);}

/* ---------- legal footer row (static Google Play boilerplate) ---------- */
.legal-footer{
  display:flex;flex-wrap:wrap;gap:18px;
  padding:16px 16px 20px;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-muted);
}
.legal-footer a{color:var(--accent);}

/* ---------- bottom tab bar ---------- */
.tab-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:560px;
  display:flex;
  background:var(--bg);
  border-top:1px solid var(--line);
  z-index:30;
}
.tab-bar__item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 0 10px;
  color:var(--ink-muted);
  font-size:11.5px;
}
.tab-bar__item svg{width:23px;height:23px;}
.tab-bar__item.active{color:var(--accent);}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox-img{max-width:88vw;max-height:82vh;border-radius:12px;object-fit:contain;}
#lightboxVideo{display:none;}
.lightbox-close{
  position:absolute;top:20px;right:20px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-close svg{width:18px;height:18px;}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-nav svg{width:22px;height:22px;}
.lightbox-nav--prev{left:16px;}
.lightbox-nav--next{right:16px;}

/* ---------- overlays (centered dialog, matches real Play Store modals) ---------- */
.overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(0,0,0,.5);
  display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease;
}
.overlay.open{opacity:1;visibility:visible;}
.overlay__dialog{
  width:100%;max-width:420px;
  max-height:100%;
  background:var(--bg);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.overlay__bar{
  flex:0 0 auto;
  display:flex;align-items:flex-start;gap:14px;
  padding:20px 20px 16px;
}
.overlay__icon{width:40px;height:40px;border-radius:10px;flex:0 0 auto;}
.overlay__heading{flex:1;min-width:0;}
.overlay__heading h2{margin:0;font-size:19px;font-weight:500;color:var(--ink);}
.overlay__heading p{margin:2px 0 0;font-size:14px;color:var(--ink-soft);}
.overlay__close{width:20px;height:20px;color:var(--ink-soft);flex:0 0 auto;margin-top:4px;}
.overlay__body{overflow-y:auto;padding:0 20px 24px;scrollbar-width:none;}
.overlay__body::-webkit-scrollbar{display:none;}
.overlay__desc{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--ink);}
.overlay__desc p{margin:0 0 14px;}
.overlay__desc p:last-child{margin-bottom:0;}

.filter-chips{display:flex;gap:8px;overflow-x:visible;flex-wrap:wrap;margin-bottom:14px;}
.filter-dropdown{position:relative;flex:0 0 auto;}
.filter-chip{
  display:flex;align-items:center;gap:6px;
  flex:0 0 auto;padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--ink);white-space:nowrap;
}
.filter-chip svg{width:12px;height:10px;flex:0 0 auto;color:var(--ink-soft);}
.filter-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:10;
  min-width:190px;
  background:var(--bg);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  padding:6px;
  display:none;
}
.filter-menu.open{display:block;}
.filter-menu__item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:10px 12px;
  border-radius:8px;
  font-size:14px;color:var(--ink);text-align:left;
}
.filter-menu__item:hover{background:var(--chip-bg);}
.filter-menu__item svg:not(.check){width:18px;height:18px;color:var(--ink-soft);flex:0 0 auto;}
.filter-menu__item span{flex:1;min-width:0;}
.filter-menu__item .check{width:16px;height:16px;color:var(--ink);flex:0 0 auto;visibility:hidden;}
.filter-menu__item.active .check{visibility:visible;}
.sort-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:18px;
  font-size:13.5px;color:var(--ink-soft);
}
.sort-row span:last-child{display:flex;align-items:center;gap:4px;color:var(--accent);}
.sort-row svg{width:15px;height:15px;}

.info-rows{margin-top:6px;}
.info-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14px;
}
.info-row:last-child{border-bottom:none;}
.info-row span{color:var(--ink-soft);flex:0 0 auto;}
.info-row strong{font-weight:500;color:var(--ink);text-align:right;}

@media (max-width:380px){
  .app-icon{width:72px;height:72px;}
  .score-num{font-size:44px;}
}