/* =============================================
   pages.css — Dragon Tools ページ固有スタイル
   ============================================= */

/* ── Home: Stats bar ── */
.home-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-8) 0;
}
@media (min-width: 640px)  { .home-stats { grid-template-columns: repeat(4, 1fr); } }
.home-stat { text-align: center; }
.home-stat__value { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--color-primary-light); display: block; }
.home-stat__label { font-size: var(--text-xs); color: var(--color-text-3); margin-top: var(--space-1); }

/* ── Tool page ── */
.tool-form-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.tool-form-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.tool-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* ── Games page ── */
.games-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .games-grid { grid-template-columns: repeat(3, 1fr); } }

.game-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
}
.game-card:hover { border-color: var(--color-border-accent); background: var(--color-bg-card-hover); }
.game-card.is-owned { border-color: rgba(74,222,128,0.25); background: rgba(74,222,128,0.03); }
.game-card__info { flex: 1; min-width: 0; }
.game-card__title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.game-card__meta  { font-size: var(--text-xs); color: var(--color-text-3); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.game-card__genre { display: inline-block; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 11px; color: var(--color-primary-light); }
.game-card__rarity-rare   { color: var(--color-warning); }
.game-card__rarity-uncommon{ color: var(--color-accent-2); }

/* ── Stats progress bar ── */
.progress-track { background: rgba(255,255,255,0.08); border-radius: var(--radius-full); height: 8px; overflow: hidden; }
.progress-fill  { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: var(--radius-full); transition: width var(--transition-slow); }

/* ── Article page ── */
.article-header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.article-header__title { font-size: clamp(var(--text-2xl), 4vw, 40px); font-weight: var(--weight-extrabold); line-height: 1.2; margin-bottom: var(--space-4); }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-3); align-items: center; }
.article-header__author { display: flex; align-items: center; gap: var(--space-2); }

/* ── Ranking page ── */
.ranking-header { margin-bottom: var(--space-8); }
.ranking-criteria { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.ranking-criterion { padding: 4px 12px; background: rgba(124,58,237,0.1); border: 1px solid var(--color-border-accent); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--color-primary-light); }

/* ── Category page ── */
.category-header { padding: var(--space-10) 0 var(--space-8); }

/* ── About page ── */
.about-section { max-width: var(--width-narrow); }
.about-section h2 { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); margin: var(--space-8) 0 var(--space-4); }
.about-section p  { color: var(--color-text-2); line-height: var(--leading-loose); margin-bottom: var(--space-4); }

/* ── Privacy page ── */
.privacy-section { max-width: var(--width-narrow); }
.privacy-section h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.privacy-section h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-primary-light); margin: var(--space-5) 0 var(--space-2); }
.privacy-section p, .privacy-section li { color: var(--color-text-2); line-height: var(--leading-loose); margin-bottom: var(--space-3); }
.privacy-section ul { padding-left: var(--space-5); list-style: disc; }
.privacy-section a { color: var(--color-primary-light); }

/* ── Contact page ── */
.contact-form {
  max-width: 560px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.contact-info { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }

/* ── POP Generator page ── */
.pop-preview {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #111;
  font-family: "Hiragino Kaku Gothic Pro", sans-serif;
  position: relative;
  overflow: hidden;
}
.pop-preview__price { font-size: 4rem; font-weight: 900; color: #e00; line-height: 1; }
.pop-preview__unit  { font-size: 1.5rem; font-weight: 700; color: #e00; }
.pop-preview__name  { font-size: 2rem; font-weight: 800; margin-top: 0.5rem; }
.pop-preview__origin{ font-size: 1rem; color: #555; margin-top: 0.25rem; }
.pop-preview__tax   { font-size: 0.75rem; color: #888; margin-top: 0.5rem; }

/* ── 404 ── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: var(--space-8);
}
.error-page__code { font-size: 8rem; font-weight: var(--weight-extrabold); line-height: 1; background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.error-page__title { font-size: var(--text-2xl); margin: var(--space-4) 0; }
.error-page__desc  { color: var(--color-text-3); margin-bottom: var(--space-8); }