:root {
  --font-sans: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --type-size-caption: 0.625rem;
  --type-size-label: 0.75rem;
  --type-size-body-sm: 0.875rem;
  --type-size-meta: 0.8125rem;
  --type-size-body: 1rem;
  --type-size-body-lg: 1.125rem;
  --type-size-title-card: 1rem;
  --type-size-title-panel: 1.25rem;
  --type-size-title-section: 1.5rem;
  --type-size-title-page: 2rem;
  --type-size-display: clamp(3rem, 6vw, 4.5rem);
  --type-line-tight: 1.2;
  --type-line-body: 1.6;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--type-size-body);
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2,
h3,
strong,
th {
  text-wrap: balance;
}

.nav a,
.header-actions a,
.button,
.auth-submit,
.auth-back,
.auth-heading p,
.app-id-row,
.store-description {
  font-size: var(--type-size-body-sm);
}

.auth-field label,
.field label,
.section-copy,
.status-dot,
.metric span,
.detail-nav a,
.section-title p,
.site-footer,
.profile-role,
.notice {
  font-size: var(--type-size-label);
}

th {
  font-size: var(--type-size-meta);
}

td,
.metadata-row dt,
.metadata-row dd {
  font-size: var(--type-size-body-sm);
}

.auth-field-hint,
.field-error,
.auth-terms,
.verification-state p,
.heading-badges span,
.taxonomy span,
.overview-item span,
.depot-head p,
.depot-head span,
.game-info p {
  font-size: var(--type-size-label);
}

.game-type,
.relation-card span {
  font-size: var(--type-size-caption);
}

.versions-summary,.versions-toolbar label,.versions-table-panel th,.versions-table-panel td,
.privacy-meta,.privacy-content p,.privacy-content li,
.depot-head p,.depot-head span,.notice,.content-card p {
  font-size: var(--type-size-meta);
}

.auth-heading h1,
.profile-head h1,
.privacy-hero h1,
.versions-heading h1,
.admin-shell h1 {
  font-size: var(--type-size-title-page);
  line-height: var(--type-line-tight);
}

.section h2,
.section-title h2,
.privacy-content h2 {
  font-size: var(--type-size-title-section);
  line-height: var(--type-line-tight);
}

.profile-main h2,
.hero-card-top strong {
  font-size: var(--type-size-title-panel);
  line-height: var(--type-line-tight);
}

.game-info h3,
.depot-head h3,
.relation-card strong {
  font-size: var(--type-size-title-card);
  line-height: var(--type-line-tight);
}

.hero h1 {
  font-size: var(--type-size-display);
}

.app-heading h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--type-size-title-panel);
  line-height: var(--type-line-tight);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead {
  font-size: var(--type-size-body-lg);
  line-height: var(--type-line-body);
}

@media (max-width: 620px) {
  .hero h1 { font-size: 2.5rem; }
}