/* ============ Shared components: buttons, stars, rows, shelves ============ */

/* ---------- GET button ---------- */
.get-btn {
  min-width: 72px; height: 30px; padding: 0 12px;
  border-radius: 15px;
  background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.14s ease, background-color 0.14s ease, color 0.2s ease, border-color 0.2s ease, min-width 0.28s ease;
  user-select: none;
}
.get-btn:active { transform: scale(0.94); background: var(--blue-press); }
.get-btn.is-open {
  background: transparent; color: var(--blue);
  box-shadow: inset 0 0 0 1.6px var(--blue);
}
.get-btn.is-open:active { background: rgba(0, 122, 255, 0.08); }
.get-btn.is-progress {
  min-width: 30px; width: 30px; padding: 0;
  background: rgba(0, 122, 255, 0.14);
}
.get-btn.is-progress .ring { width: 22px; height: 22px; animation: ringspin 0.9s linear infinite; }
.get-btn .ring-track { fill: none; stroke: rgba(0, 122, 255, 0.25); stroke-width: 3; }
.get-btn .ring-fill { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40 36; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.get-btn-lg { height: 34px; min-width: 84px; border-radius: 17px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .get-btn.is-progress .ring { animation-duration: 1.6s; } }

/* ---------- Stars ---------- */
.stars { position: relative; display: inline-flex; line-height: 0; }
.stars svg { display: block; }
.stars-bg, .stars-fill { display: inline-flex; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.stars-fill svg { flex: none; }

/* ---------- App rows ---------- */
.app-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background-color 0.12s ease;
}
.app-row:active { background: var(--fill); }
.app-row.ranked { padding-left: 2px; }
.rank {
  width: 26px; flex: none; text-align: center;
  font-size: 15px; font-weight: 500; color: var(--secondary);
  font-variant-numeric: tabular-nums;
}
.row-icon { width: 60px; height: 60px; flex: none; border-radius: 13.4px; overflow: hidden; box-shadow: var(--shadow-card); }
.row-icon svg { width: 100%; height: 100%; display: block; }
.row-info { flex: 1; min-width: 0; }
.row-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 14px; color: var(--secondary); white-space: nowrap; overflow: hidden; }
.row-sub .stars { flex: none; }
.row-sub-num { font-size: 13px; color: var(--secondary); }
.app-row.ranked .row-sub { font-size: 13.5px; }
.row-right { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; width: 96px; }
.row-iap { font-size: 11px; color: var(--tertiary); white-space: nowrap; }

/* ---------- Section headers ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.section-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; }
.see-all { font-size: 15px; font-weight: 600; color: var(--blue); padding: 4px 2px; border-radius: 6px; }
.see-all:active { opacity: 0.5; }

/* ---------- Horizontal shelves ---------- */
.today-shelf { margin: 0 -16px; }
.shelf-rail {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 16px 8px;
  scrollbar-width: none;
}
.shelf-rail::-webkit-scrollbar { display: none; }

/* Large app card */
.big-card {
  position: relative; flex: none;
  width: 264px; scroll-snap-align: start;
  border-radius: 14px; overflow: hidden;
  background: var(--bg-elev);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.big-card-art { width: 100%; height: 146px; }
.big-card-art svg { width: 100%; height: 100%; display: block; }
.big-card-meta { display: flex; align-items: center; gap: 10px; padding: 9px 12px 11px; }
.big-card-icon { width: 52px; height: 52px; flex: none; border-radius: 11.6px; overflow: hidden; }
.big-card-icon svg { width: 100%; height: 100%; display: block; }
.big-card-title { font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.big-card-sub { font-size: 12.5px; color: var(--secondary); margin-top: 2px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.big-card-btn { position: absolute; right: 10px; bottom: 12px; }
.big-card-btn .get-btn { min-width: 62px; height: 28px; font-size: 14px; border-radius: 14px; }

/* Small tiles */
.app-tile { width: 84px; flex: none; text-align: center; cursor: pointer; }
.tile-icon { width: 72px; height: 72px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.tile-icon svg { width: 100%; height: 100%; }
.tile-name { margin-top: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-get { margin-top: 5px; }
.tile-get .get-btn { min-width: 62px; height: 27px; font-size: 14px; border-radius: 13.5px; }
.get-btn.sm { min-width: 62px; height: 28px; font-size: 14px; border-radius: 14px; }