:root{
  /* Ð“Â¤Ð’Ñ‘Ð’Â»Ð“Â©Ð’ÑžÐ›ÑšÐ“ÐÐ²Ð‚Â°Ð’Ð†Ð“Â¤Ð’Ñ‘Ð•Ð…Ð“ÒÐ•Ñ‘Ð’Ñ”Ð“Â§Ð’ÐŽÐ²â€šÂ¬Ð“ÒÐ’ÐÐ›ÑšÐ“Â©Ð²Ð‚ÐŽÐ’Ð */
  --play-green:#00A86B; --play-green-press:#079a62;
  --ink:#0b1020; --muted:#5f6b7a;
  --card:#ffffff; --stroke:rgba(10,20,35,.10);

  --chip:#f7f8fa; --chip-border:#e7ecf1;

  /* Ð“Â§Ð’Â»Ð•Ñ‘Ð“Â¤Ð’Ñ‘Ð²â€šÂ¬Ð“Â§Ð•ÐŽÐ²Ð‚Ñ›Ð“ÑžÐ²â€šÂ¬Ð•â€œÐ“Â§Ð’Â«Ð²Ð‚â€œÐ“ÒÐ²Ð‚Ñ”Ð’Ñ•Ð“ÑžÐ²â€šÂ¬Ð’ÑœÐ“ÒÐ’Â®Ð’Ð…Ð“ÒÐ’Ñ”Ð’Â¦Ð“Ð‡Ð’Ñ˜Ð›â€ Ð“Â¤Ð’Ñ˜Ð•ÐŽÐ“Â©Ð•ÐŽÐ’ÐÐ“ÒÐ’Â±Ð’ÐÐ“ÒÐ’â„–Ð²Ð‚ÑžÐ“ÐÐ²Ð‚ÐŽÐ’Ð„Ð“ÒÐ• Ð’ÐÐ“ÒÐ’Â¤Ð’â„–Ð“ÒÐ’ÐÐ²Ð‚â€œÐ“Ð‡Ð’Ñ˜Ð²Ð‚Â°Ð“Ð‡Ð’Ñ˜Ð•â€™Ð“Â¦Ð’ÐÐ’Ð„Ð“ÒÐ²Ð‚Ñ”Ð’Ñ•Ð“ÐÐ’Â§Ð’Ðƒ .shot.landscape */
  --shot-w: clamp(160px, 40vw, 280px);

  /* Ð“Â¦Ð²Ð‚â€œÐ’Â°Ð“ÒÐ’ÑžÐ•Ñ•Ð“Ð‡Ð’Ñ˜Ð•ÐŽÐ“Â¦Ð•Ð…Ð²Ð‚â„¢Ð“Â§Ð²Ð‚Â°Ð›â€ Ð“ÐÐ• Ð²Ð‚Ñ™Ð“ÒÐ’ÒÐ’ÐÐ“Â¤Ð’Ñ‘Ð•Ð…Ð“ÒÐ•â€œÐ²Ð‚ Ð“ÐÐ’Â§Ð²Ð‚â„¢ */
  --sp-1: 8px;   --sp-2: 12px;  --sp-3: 16px;  --sp-4: 20px;  --sp-5: 24px;
  --radius: 12px;
}

/* ===== Ð“ÒÐ•Ñ‘Ð’Ñ”Ð“Â§Ð’ÐŽÐ²â€šÂ¬ ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
}
a{color:inherit}

/* ===== Ð“Â©Ð’ÐŽÐ’Â¶Ð“Â¦ Ð’ÐÐ“Ð‡Ð’Ñ˜Ð›â€ Ð“Â¦Ð’Ð‡Ð²Ð‚Ñ”Ð“Â§Ð•Ð…Ð’Â»Ð“Â§Ð²Ð‚â„¢Ð–â€™Ð“Ð‡Ð’Ñ˜Ð²Ð‚Â° ===== */
.appbar{position:fixed; inset:0 0 auto 0; height:56px; z-index:1000; background:transparent}
.appbar::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.appbar-inner{
  position:relative; z-index:1; height:56px; max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-2);
}
.gp-brand{display:flex; align-items:center; gap:10px; font-weight:700}
.gp-logo-img{width:200px; height:50px; object-fit:contain; display:block}
.gp-actions{display:flex; align-items:center; gap:6px; margin-left:auto}
.gp-actions .gp-avatar{order:99}
.gp-icon-btn{width:36px; height:36px; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; border-radius:8px}
.gp-icon-btn:hover{background:#f3f4f6}
.gp-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid #e5e7eb; box-shadow:0 0 0 2px rgba(255,255,255,.95); background:#eee}

.appbar + .wrap{padding-top:68px}

/* ===== Ð“Â©Ð’ÐŽÐ’ÂµÐ“Â©Ð’ÑœÐ’Ñž & Ð“ÒÐ’ÐŒÐ’ÐŽÐ“Â§Ð²Ð‚Â°Ð²Ð‚ÐŽÐ“ÒÐ’Â®Ð’â„–Ð“ÒÐ²â€žÑžÐ’Ð ===== */
.wrap{min-height:100%; display:flex; justify-content:center; padding:68px var(--sp-2) 80px}
.page{width:100%; max-width:600px}

/* Ð“Â¦Ð²Ð‚ÑžÐ’Ò‘Ð“Â¤Ð’Ð…Ð²Ð‚ÑšÐ“ÒÐ’ÐŒÐ’ÐŽÐ“Â§Ð²Ð‚Â°Ð²Ð‚ÐŽÐ“Â¦Ð²Ð‚Ñ”Ð’Ò‘Ð“ÒÐ’â„–Ð’Ð†Ð“ÒÐ²Ð‚ÐŽÐ²â€šÂ¬Ð“Ð‡Ð’Ñ˜Ð•ÐŽÐ“Â§Ð’Â»Ð•Ñ‘Ð“Â¤Ð’Ñ‘Ð²â€šÂ¬Ð“ÒÐ•â€œÐ²Ð‚ Ð“ÐÐ’Â§Ð²Ð‚â„¢Ð“ÐˆÐ²â€šÂ¬Ð’ÐƒÐ“Â©Ð›ÑšÐ’Ò‘Ð“ÒÐ’Ð…Ð’Â±Ð“ÒÐ²Ð‚â„¢Ð•â€™Ð“ÒÐ›â€ Ð²Ð‚ Ð“ÒÐ•â€™Ð’Ñ”Ð“Â©Ð²Ð‚â€Ð’Ò‘Ð“ÐÐ’Â·Ð’Ñœ */
.card{
  background:var(--card);
  border:1px solid rgba(10,20,35,.06);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

/* Ð“Â¦Ð’Ð‡Ð’ÐÐ“Â¤Ð’Ñ‘Ð’Ð„Ð“ÒÐ›â€ Ð²Ð‚ Ð“ÒÐ•â€™Ð’Ñ”Ð“Â§Ð’Â»Ð•Ñ‘Ð“Â¤Ð’Ñ‘Ð²â€šÂ¬Ð“ÑžÐ²â€šÂ¬Ð•â€œÐ“Â¤Ð’Ñ‘Ð• Ð“ÐÐ’Ñ•Ð’â„–Ð“Â§Ð’Ñ”Ð’Ñ— + Ð“ÒÐ²Ð‚ Ð²Ð‚Â¦Ð“ÐÐ’Ñ•Ð’â„–Ð“ÐÐ’Â·Ð’ÑœÐ“ÑžÐ²â€šÂ¬Ð’Ñœ */
.card > .header,
.card > .kpis,
.card > .actions,
.card > .section{
  padding: var(--sp-3) var(--sp-3);
}
.card > :not(:first-child){
  border-top:1px solid var(--stroke);
}

/* ===== Ð“ÒÐ’Â¤Ð’Ò‘Ð“Â©Ð–â€™Ð’ÐÐ“Â¤Ð’Ñ—Ð’ÐŽÐ“Â¦Ð’ÐƒÐ’Ð‡Ð“Â¦Ð²Ð‚Ñ”Ð’Ò‘Ð“Â§Ð’ÐÐ’Ñ–Ð“Ð‡Ð’Ñ˜Ð•ÐŽÐ“ÒÐ²Ð‚Ñ”Ð’Ñ•Ð“Â¦ Ð²Ð‚ÐŽ+Ð“Â¦Ð²Ð‚â€œÐ²Ð‚ÐŽÐ“Â¦Ð’ÐŽÐ›â€ +Ð“Â¦Ð•â€™Ð²Ð‚Â°Ð“Â©Ð²Ð‚â„¢Ð’Â® ===== */
.header{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:14px; align-items:center;
}
.icon{
  width:72px; height:72px; border-radius:16px; overflow:hidden;
  border:1px solid var(--stroke); display:grid; place-items:center; background:#fff;
}
.icon img{width:100%; height:100%; object-fit:contain; display:block}
.title{font-size:20px; font-weight:800}
.developer{color:var(--muted); font-size:13px; margin-top:2px}
.install{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.btn{appearance:none; border:0; cursor:pointer; padding:12px 18px; border-radius:12px; font-size:15px; font-weight:800; transition:.18s}
.btn-install{background:var(--play-green); color:#fff; box-shadow:0 10px 22px rgba(0,0,0,.12)}
.btn-install:hover{background:var(--play-green-press)}
.compat{font-size:12px; color:var(--muted)}

/* ===== Ð“Â¦ Ð’Ñ‘Ð“ÒÐ’Ñ—Ð–â€™Ð“Â¦Ð•â€™Ð²Ð‚ÐŽÐ“Â¦ Ð²Ð‚ÐŽÐ“Ð‡Ð’Ñ˜Ð•ÐŽÐ“Â¦Ð²Ð‚Ñ”Ð’Ò‘Ð“Â¦Ð²Ð‚ÑžÐ’Ò‘Ð“Â©Ð’Ð…Ð’Ñ’Ð“Â§Ð•ÐŽÐ²Ð‚Ñ›Ð“Â§Ð’Ð…Ð²Ð‚Â˜Ð“Â¦ Ð’Ñ˜ + Ð“ÐÐ–â€™Ð•â€™Ð“Â¦Ð²â€žÑžÐ’Ð‡Ð“ÐÐ–â€™Ð’Â¶Ð“ÒÐ²Ð‚Ñ”Ð•  ===== */
.kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-1);
  background:#f8fafc; border-radius:10px; padding: var(--sp-2);
}
.kpi{padding:6px 8px}
.kpi .v{font-weight:800}
.kpi .l{font-size:12px; color:var(--muted)}
@media (max-width:640px){ .kpis{grid-template-columns:repeat(2,1fr)} }

/* ===== Ð“Â¦Ð²Ð‚ÑšÐ’ÐŒÐ“Â¤Ð’Ð…Ð•â€œÐ“ÐÐ’ÐŽÐ•â€™Ð“Ð‡Ð’Ñ˜Ð•ÐŽÐ“ÒÐ²Ð‚Â¦Ð’ÐƒÐ“ÐÐ’Â®Ð’Ñ‘Ð“Â¦Ð’ÐŒÐ’ÑžÐ“ÐÐ’ÐŽÐ•â€™Ð“Ð‡Ð’Ñ˜Ð•â€™Ð“Â©Ð’ÐƒÐ’Ñ—Ð“ÒÐ²Ð‚Â¦Ð’ÐŒÐ“Â¦Ð•â€™Ð’Â¤Ð“ÒÐ•Ð…Ð²Ð‚â„– ===== */
.actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.act{display:flex; align-items:center; gap:6px; color:#117a37; font-size:14px; padding:6px 10px; border-radius:999px; background:#f6fffa; border:1px solid #d5f5e6}
.device-tip{margin-left:auto; color:#8893a1; font-size:13px}
@media (max-width:640px){ .device-tip{flex:1 0 100%} }

/* ===== Ð“ÒÐ›â€ Ð²Ð‚ Ð“ÒÐ•â€™Ð’Ñ”Ð“Â¦ Ð²Ð‚ÐŽÐ“Â©Ð’ÑžÐ›Ñš ===== */
.section h3{
  margin:4px 0 10px; font-size:16px; font-weight:800;
}

/* ===== Ð“Â¦Ð›â€ Ð’Ð„Ð“ÒÐ²Ð‚Ñ”Ð’Ñ•Ð“ÒÐ•â€™Ð’Ñ”Ð“Ð‡Ð’Ñ˜Ð•ÐŽÐ“Â¦Ð²Ð‚ÑžÐ’Ò‘Ð“Â©Ð’Ð…Ð’Ñ’Ð“ÐˆÐ²â€šÂ¬Ð’ÐƒÐ“Â¦Ð²Ð‚â€ Ð“ÒÐ’Â·Ð’Â¦Ð“Â§Ð’Â©Ð’Ñ”Ð“Â§Ð²â€žÑžÐ’Ð…Ð“ÐˆÐ²â€šÂ¬Ð’ÐƒÐ“Â¦Ð’Â»Ð•ÐŽÐ“ÒÐ• Ð’ÐÐ“Â¦Ð’ÐÐ’Ñ’Ð“Â§Ð’Â¤Ð’Ñ” ===== */
.shots{
  display:flex; gap:10px; overflow-x:auto;
  padding: 2px 4px 10px;   /* Ð“ÐÐ’Ñ•Ð–â€™Ð“ÒÐ’Â°Ð’ÐÐ“Â§Ð•ÐŽÐ²Ð‚Ñ›Ð“ÒÐ²Ð‚ Ð²Ð‚Â¦Ð“ÐÐ’Ñ•Ð’â„–Ð“ÐÐ’Â·Ð’ÑœÐ“Ð‡Ð’Ñ˜Ð•â€™Ð“Â¦Ð²Ð‚ÑœÐ’Â¶Ð“Â§Ð’Ò‘Ð’Â§Ð“ÒÐ’Ñ‘Ð–â€™Ð“ÒÐ’Â±Ð²â€šÂ¬ */
  scroll-behavior:smooth; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

/* Ð“ÒÐ’ÐŒÐ²Ð‚ÑžÐ“ÒÐ’Ñ˜ Ð“ÒÐ’ÐŒÐ’ÐŽÐ“Â§Ð²Ð‚Â°Ð²Ð‚ÐŽÐ“Ð‡Ð’Ñ˜Ð›â€ Ð“Â©Ð’Â»Ð›ÑšÐ“ÐÐ’Â®Ð’Â¤Ð“Â§Ð’Â«Ð²Ð‚â€œÐ“ÒÐ²Ð‚Ñ”Ð’Ñ• 9:16Ð“Ð‡Ð’Ñ˜Ð²Ð‚Â° */
.shot{
  flex:0 0 var(--shot-w);
  width:var(--shot-w); aspect-ratio: 9 / 16;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--stroke); background:#0f172a;
  scroll-snap-align:start;
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}

/* Ð“Â¦Ð’ÐÐ’Ð„Ð“ÒÐ²Ð‚Ñ”Ð’Ñ•Ð“ÒÐ’ÐÐ’Ð‡Ð“ÒÐ•  Ð“Â§Ð’Â±Ð’Â» .landscape */
.shot.landscape{
  flex-basis: clamp(240px, 70vw, 560px);
  width: clamp(240px, 70vw, 560px);
  aspect-ratio: 16 / 9;
}

/* ===== Ð“Â§Ð’Â®Ð²â€šÂ¬Ð“Â¤Ð’Â»Ð²Ð‚â„– + Ð“Â¦ Ð²Ð‚ÐŽÐ“Â§Ð’Â­Ð’Ñ• ===== */
.desc{color:#2b3442}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.chip{
  font-size:12px; background:var(--chip); border:1px solid var(--chip-border);
  padding:6px 10px; border-radius:999px;
}

/* ===== Ð“Â¦Ð²Ð‚ÑžÐ’Â°Ð“Â¦Ð’ÐŒÐ’Â®Ð“ÒÐ’Â®Ð²Ð‚Â°Ð“ÒÐ²Ð‚Â¦Ð’Ð ===== */
.ds-item{
  border:1px dashed var(--stroke); border-radius:12px;
  background:#fff; padding:12px; margin-top:8px
}
.ds-item b{display:block; margin-bottom:4px}

/* ===== Ð“ÐÐ’Ð‡Ð²Ð‚Ñ›Ð“ÒÐ›â€ Ð²Ð‚ Ð“Â¤Ð’Ñ‘Ð•Ð…Ð“ÐÐ’Ð‡Ð²Ð‚Ñ›Ð“Â¤Ð’Â»Ð’Â· ===== */
.rating-wrap{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center}
.big-score{font-size:44px; font-weight:300}
.bars{display:flex; flex-direction:column; gap:6px}
.bar{display:grid; grid-template-columns:18px 1fr 40px; gap:8px; align-items:center; font-size:12px; color:var(--muted)}
.bar-track{height:6px; background:#e8edf3; border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:#34a853; border-radius:999px; width:0%}
.review{border-top:1px solid #f0f3f6; padding:12px 0}
.rv-head{display:flex; align-items:center; gap:8px}
.avatar{width:28px; height:28px; border-radius:50%; background:#c7d2fe; display:grid; place-items:center; font-weight:700; color:#334155}
.rv-name{font-weight:700}
.rv-meta{font-size:12px; color:var(--muted)}
.rv-text{margin:8px 0}

/* ===== Ð“Â¦Ð’ÐÐ’Ð„Ð“Â¦Ð’Â»Ð²Ð‚Â˜Ð“ÒÐ’Ñ”Ð²Ð‚ÑœÐ“Â§Ð²Ð‚ÑœÐ’ÐÐ“ÒÐ’ÐŒÐ’ÐŽÐ“Â§Ð²Ð‚Â°Ð²Ð‚ÐŽÐ“Ð‡Ð’Ñ˜Ð›â€ Ð“Â§Ð’Â±Ð’Â»Ð“Â¤Ð’Ñ˜Ð’Ñ˜Ð“Â©Ð’ÐŽÐ’â„–Ð“Ð‡Ð’Ñ˜Ð²Ð‚Â° ===== */
.hlist{display:flex; gap:6px; overflow:auto; padding:0 2px 6px}
.appcard{
  flex:none; width:140px; border:1px solid var(--stroke);
  border-radius:12px; background:#f6f7f9; overflow:hidden; cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.appcard .ic{height:150px; background:#111; display:block}
.appcard .ic img{width:100%; height:100%; object-fit:cover; display:block}
.appcard .nm{font-weight:700; font-size:13px; padding:8px 8px 0}
.appcard .dev,.appcard .rate{font-size:12px; color:#666; padding:0 8px 8px}

/* ===== Ð“ÒÐ’Ñ”Ð²Ð‚ÑžÐ“Â©Ð–â€™Ð’ÐÐ“ÒÐ’Ð‡Ð’Ñ˜Ð“ÐÐ›â€ Ð’Ð„ ===== */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; height:60px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--stroke);
  display:flex; justify-content:space-around; align-items:center; z-index:2;
}
.bn-item{display:flex; flex-direction:column; align-items:center; font-size:11px; color:#64748b}
.bn-item.active{color:#117a37}

/* ===== Ð“ÒÐ’Â°Ð’ÐÐ“ÒÐ’Â±Ð’ÐÐ“Â¤Ð’Ñ˜Ð›ÑšÐ“ÒÐ•â€™Ð²Ð‚â€œ ===== */
@media (max-width:640px){
  .header{grid-template-columns:72px 1fr auto}
  .title{font-size:20px}
  .rating-wrap{grid-template-columns:1fr}
}