/* ===== JL.BET landing — Play Store 风格（参照 33AG），纯样式、移动优先 ===== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #f1f3f4;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #5f6368;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  padding: 24px 20px 40px;
}

/* ---------- header ---------- */
.header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.header__icon--img {
  width: 72px; height: 72px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.header__info { flex: 1; min-width: 0; }
.header__info-title {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 700; color: #202124;
  line-height: 1.2;
}
.header__info-play {
  display: flex; align-items: center; gap: 5px;
  margin: 0; font-size: 12px; color: #01875f; font-weight: 500;
}
.header__info-play .ic_dun { width: 15px; height: 15px; flex: 0 0 15px; }

/* ---------- info row ---------- */
.info {
  display: flex; justify-content: space-between; align-items: stretch;
  text-align: center; padding: 4px 0 22px;
  border-bottom: 1px solid #e8eaed;
}
.info__view { flex: 1; position: relative; }
.info__view:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 32px; background: #e8eaed;
}
.info__view-value { font-size: 16px; font-weight: 700; color: #202124; }
.info__view-sui {
  display: inline-block; font-size: 16px; font-weight: 700; color: #202124;
  border: 1px solid #dadce0; border-radius: 6px; padding: 1px 8px;
}
.info__view-label { font-size: 12px; color: #5f6368; margin-top: 4px; }

/* ---------- install button ---------- */
.install-btn {
  position: relative; overflow: hidden;
  margin: 22px 0 18px;
  height: 48px; border-radius: 8px;
  background: #01875f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.install-btn:active { background: #017058; }
.install-btn__install { position: relative; z-index: 2; }

/* 流光动画（shiny-btn） */
.shiny-btn::after {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 28px; height: 220%;
  background: rgba(255,255,255,.55);
  transform: rotate(22deg);
  animation: shiny-btn-anim 4.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes shiny-btn-anim {
  0%   { left: -30%; opacity: 0; }
  10%  { opacity: .9; }
  30%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* ---------- share row ---------- */
.share-row { display: flex; justify-content: space-around; padding: 8px 0 22px; }
.share-row__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #01875f; font-size: 12px; font-weight: 500;
}
.share-row__item svg { width: 22px; height: 22px; }

/* ---------- image scroll ---------- */
.img-scroll { margin: 0 -20px 22px; }
.img-scroll__list {
  display: flex; gap: 10px; padding: 0 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.img-scroll__list::-webkit-scrollbar { display: none; }
.img-scroll__view {
  flex: 0 0 auto; scroll-snap-align: center;
  height: 220px; border-radius: 10px; overflow: hidden;
}
.img-scroll__view img { height: 100%; width: auto; display: block; border-radius: 10px; }

/* ---------- description blocks ---------- */
.description { margin-bottom: 22px; }
.description__title {
  font-size: 17px; font-weight: 700; color: #202124;
  margin-bottom: 8px;
}
.description__content { font-size: 14px; color: #5f6368; line-height: 1.6; word-break: break-word; }

.description__data-safety {
  margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.description__data-safety__item { display: flex; gap: 12px; align-items: flex-start; }
.description__data-safety__item .item-icon { width: 22px; flex: 0 0 22px; color: #5f6368; margin-top: 1px; }
.description__data-safety__item .item-icon svg { width: 22px; height: 22px; }
.description__data-safety__item p { margin: 0; font-size: 13px; color: #202124; line-height: 1.5; }
.description__data-safety__item .item-sub { color: #5f6368; margin-top: 2px; }

/* ---------- comments ---------- */
.comments__title { font-size: 17px; font-weight: 700; color: #202124; margin-bottom: 6px; }
.comments__tips { font-size: 12px; color: #5f6368; margin-bottom: 18px; }

.comments__scoring { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.comments__scoring-num { text-align: center; flex: 0 0 auto; }
.comments__scoring-points { font-size: 40px; font-weight: 500; color: #202124; line-height: 1; }
.comments__scoring-star { display: flex; justify-content: center; margin-top: 4px; }
.comments__scoring-star .star { width: 13px; height: 13px; margin: 0 1px; }

.comments__scoring-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.comments__scoring-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5f6368; }
.comments__scoring-item .progress {
  flex: 1; height: 6px; background: #e3e3e3; border-radius: 4px; overflow: hidden;
}
.comments__scoring-item .progress-bar {
  height: 100%; background: #028760; border-radius: 4px; width: 0;
}
.comments__scoring-item .progress-bar.run { animation: bar-grow 1.4s ease-out forwards; }
@keyframes bar-grow { from { width: 0; } to { width: var(--w); } }

.comments__list { display: flex; flex-direction: column; gap: 18px; }
.comments__list-item { border-top: 1px solid #e8eaed; padding-top: 16px; }
.comments__list-header { display: flex; align-items: center; gap: 10px; }
.comments__list-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.comments__list-name { font-size: 14px; font-weight: 500; color: #202124; }
.comments__list-stars { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.comments__list-stars .stars-row { display: flex; }
.comments__list-stars .star { width: 12px; height: 12px; margin-right: 2px; }
.comments__list-date { font-size: 12px; color: #5f6368; }
.comments__list-detail { font-size: 14px; color: #202124; margin-top: 6px; line-height: 1.5; }

/* ---------- footer ---------- */
.footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid #e8eaed; text-align: center; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.footer__links span { font-size: 13px; color: #01875f; cursor: pointer; }
.footer__copy { margin-top: 14px; font-size: 13px; color: #9aa0a6; }

/* ---------- 桌面端收敛 ---------- */
@media (min-width: 481px) {
  body { padding: 16px 0; }
  .container { min-height: auto; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
}