/* ==========================================================================
   u7777 game — Download page
   App hero · install steps · requirements · QR panel · troubleshooting
   ========================================================================== */

.dl-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 1.8rem + 2.4vw, 4rem) clamp(2.75rem, 2rem + 3vw, 4.75rem);
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-border);
}
.dl-hero .container { position: relative; z-index: var(--z-content); }

.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.25rem);
  align-items: center;
}

.dl-appbar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.15rem;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: rgba(19, 26, 46, 0.75);
  box-shadow: var(--shadow-card);
}
.dl-appbar img {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.dl-appbar__meta { min-width: 0; }
.dl-appbar__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.dl-appbar__meta span { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.dl-appbar__stars { color: var(--color-accent); letter-spacing: 0.12em; font-size: 0.8rem; }

/* Store-style buttons */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--color-slate);
  background: rgba(26, 35, 64, 0.7);
  color: var(--color-text-primary);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.store-btn:hover {
  color: var(--color-text-primary);
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow-gold);
}
.store-btn svg { flex: none; color: var(--color-accent); }
.store-btn span { display: block; line-height: 1.25; }
.store-btn small { display: block; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
.store-btn b { font-size: var(--fs-sm); font-weight: 700; }

/* QR panel */
.qr-panel {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px dashed rgba(212, 175, 55, 0.42);
  background: rgba(19, 26, 46, 0.6);
}
.qr-code {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent),
    repeating-conic-gradient(from 0deg, rgba(91, 109, 150, 0.22) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
  color: var(--color-accent);
  text-align: center;
}
.qr-code span {
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-xs);
  background: rgba(10, 14, 26, 0.86);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qr-panel p { margin: 0; font-size: var(--fs-sm); }
.qr-panel h3 { margin: 0 0 0.4rem; font-family: var(--font-body); font-size: var(--fs-h4); }

/* Numbered install steps */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-4);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: var(--gradient-surface);
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.step:hover { border-color: rgba(212, 175, 55, 0.5); transform: translateX(4px); }
.step__num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.03));
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-accent);
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin: 0 0 0.4rem; font-family: var(--font-body); font-size: var(--fs-h4); }
.step p { margin: 0; font-size: var(--fs-sm); }
.step p + p { margin-top: 0.6rem; }

/* Platform switch cards */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-5);
}

/* Version / changelog list */
.changelog { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.changelog li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: rgba(19, 26, 46, 0.55);
  font-size: var(--fs-sm);
}
.changelog b {
  font-family: var(--font-display);
  color: var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-visual { order: -1; }
}

@media (max-width: 560px) {
  .qr-panel { flex-direction: column; align-items: flex-start; }
  .step { grid-template-columns: 44px minmax(0, 1fr); padding: var(--sp-4); }
  .step__num { width: 44px; height: 44px; font-size: 1.1rem; }
}