:root {
  --bg:        #0a0a12;
  --surface:   #12121e;
  --card:      #1a1a2e;
  --border:    #2a2a4a;
  --accent:    #00e5ff;
  --accent2:   #ff4081;
  --accent3:   #b2ff59;
  --warn:      #ffd740;
  --text:      #e8e8f0;
  --text-dim:  #8a8ab8;
  --pixel:     'DotGothic16', monospace;
  --body:      'Noto Sans JP', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--accent); }

/* ── スキャンライン背景 ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  pointer-events: none;
  z-index: 0;
}

/* ── ヘッダー ── */
header {
  position: relative;
  padding: 2.5rem 1rem 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}
.header-pixel {
  font-family: var(--pixel);
  font-size: clamp(1.3rem, 5vw, 2rem);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,229,255,0.6), 0 0 40px rgba(0,229,255,0.3);
  letter-spacing: 0.1em;
  animation: glow-pulse 3s ease-in-out infinite;
}
.header-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  letter-spacing: 0.1em;
}
#last-updated {
  font-size: 0.72rem;
  color: var(--accent3);
  margin-top: 0.6rem;
  font-family: var(--pixel);
}
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(0,229,255,0.6), 0 0 40px rgba(0,229,255,0.3); }
  50%      { text-shadow: 0 0 30px rgba(0,229,255,0.9), 0 0 60px rgba(0,229,255,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .header-pixel { animation: none; }
}

/* ── メインレイアウト ── */
main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ── 検索バー ── */
.search-wrap { position: relative; margin-bottom: 1.2rem; }
#search-input {
  width: 100%;
  padding: 0.9rem 1.2rem 0.9rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,255,0.12); }
#search-input::placeholder { color: var(--text-dim); }
.search-icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}

/* ── 機種フィルター ── */
.filter-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.filter-btn {
  padding: 0.45rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--pixel);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active {
  background: rgba(0,229,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(0,229,255,0.2);
}

/* ── ジャンル ── */
.tag-wrap { margin-top: -0.4rem; }
.tag-btn { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
.sort-wrap { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; }
.sort-label { font-size: 0.72rem; color: var(--text-dim); }
.kana-wrap { display: none; flex-wrap: wrap; gap: 0.35rem; margin: -0.3rem 0 0.9rem; }
.kana-wrap.show { display: flex; }
.kana-btn { min-width: 2.3rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.sort-btn { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
.tag-btn.active { border-color: var(--accent3); color: var(--accent3); background: rgba(178,255,89,0.08); box-shadow: none; }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: -0.5rem 0 0.8rem; }
.tag {
  padding: 0.05rem 0.45rem;
  border: 1px solid rgba(178,255,89,0.5);
  border-radius: 3px;
  color: var(--accent3);
  font-size: 0.65rem;
}

/* ── 見方の説明 ── */
.guide {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.guide b { color: var(--text); font-weight: 700; }
.guide summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.guide[open] summary { margin-bottom: 0.4rem; }

.result-meta { font-family: var(--pixel); font-size: 0.75rem; color: var(--text-dim); margin-bottom: 1rem; }
.result-meta span { color: var(--accent); }

/* ── カードグリッド ── */
#cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* ── カード ── */
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity 0.15s;
}
.price-card:hover { border-color: rgba(0,229,255,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.price-card:hover::before { opacity: 1; }

.card-platform { font-family: var(--pixel); font-size: 0.7rem; color: var(--accent2); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.card-title { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.9rem; }
.card-title a { color: inherit; text-decoration: none; }
.detail-link { display: block; margin-top: 0.8rem; text-align: center; padding: 0.55rem; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.detail-link:hover { background: rgba(0,229,255,0.1); }

.label { font-family: var(--pixel); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.05em; }
.fair-price-value {
  font-family: var(--pixel);
  font-size: 2rem;
  color: var(--accent3);
  text-shadow: 0 0 12px rgba(178,255,89,0.4);
  line-height: 1.1;
}
.fair-price-value small { font-size: 0.9rem; color: var(--text-dim); margin-left: 0.2rem; }
.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--warn);
  border-radius: 3px;
  color: var(--warn);
  font-family: var(--pixel);
  font-size: 0.62rem;
  vertical-align: middle;
}
.range-row { font-size: 0.8rem; color: var(--text-dim); margin: 0.2rem 0 0.8rem; }
.range-row em { color: var(--text); font-style: normal; font-weight: 700; }

.cheapest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.8rem;
}
.cheapest-price { font-family: var(--pixel); font-size: 1.1rem; color: var(--text); }
.cheapest-note { font-size: 0.68rem; color: var(--text-dim); }
.btn-link {
  flex-shrink: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn-link:hover { background: rgba(0,229,255,0.1); }

/* ── タップで開く一覧 ── */
.sub-list { margin-bottom: 0.6rem; font-size: 0.8rem; }
.sub-list > .label { margin-bottom: 0.2rem; }
.expand { border-top: 1px dashed var(--border); }
.expand summary {
  display: grid;
  grid-template-columns: 1fr auto 3.8em;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  cursor: pointer;
  list-style: none;
}
.expand summary::-webkit-details-marker { display: none; }
.e-label { color: var(--text-dim); }
.e-label::before { content: '▶'; display: inline-block; width: 1.2em; font-size: 0.65rem; color: var(--accent); transition: transform 0.15s; }
.expand[open] .e-label::before { transform: rotate(90deg); }
.e-num { font-family: var(--pixel); color: var(--text); text-align: right; }
.e-cnt { color: var(--text-dim); font-size: 0.72rem; text-align: right; }
.expand summary:hover .e-label, .expand[open] .e-label { color: var(--accent); }
.listings { list-style: none; margin: 0 0 0.5rem 1.2em; }
.listings li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px dotted rgba(255,255,255,0.06);
}
.l-price { font-family: var(--pixel); color: var(--text); }
.l-note { font-size: 0.68rem; color: var(--text-dim); line-height: 1.4; overflow-wrap: anywhere; }
.btn-link.small { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

.bookoff {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
}
.bookoff .bo-price { font-family: var(--pixel); color: #e040fb; font-size: 1rem; }
.bookoff .bo-none { color: var(--text-dim); font-size: 0.75rem; }
.btn-link.bo { border-color: #e040fb; color: #e040fb; }
.btn-link.bo:hover { background: rgba(224,64,251,0.1); }

/* ── ブックオフのみのカード（小さめ・控えめ） ── */
.bo-card { padding: 0.9rem 1.2rem; }
.bo-card .card-title { font-size: 0.92rem; margin-bottom: 0.2rem; }
.bo-card .bookoff { margin-top: 0.5rem; padding-top: 0.5rem; }
.bo-badge { border-color: #e040fb; color: #e040fb; margin-left: 0.5rem; }

.more-btn {
  display: none;
  margin: 1.5rem auto 0;
  padding: 0.8rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--pixel);
  font-size: 0.85rem;
  cursor: pointer;
}
.more-btn:hover { background: rgba(0,229,255,0.1); }

/* ── 参考（転載型の出品のみ） ── */
.ref-price { font-family: var(--pixel); font-size: 1.4rem; color: var(--text-dim); line-height: 1.2; }
.ref-note { font-size: 0.72rem; color: var(--text-dim); margin: 0.3rem 0 0.6rem; line-height: 1.6; }

.sample-count { margin-top: 0.7rem; font-family: var(--pixel); font-size: 0.62rem; color: var(--text-dim); text-align: right; }

#empty-state, #error-state {
  display: none;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-dim);
  font-family: var(--pixel);
  font-size: 0.85rem;
  line-height: 2;
}

/* ── フッター ── */
footer {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.9;
}
footer .inner { max-width: 1080px; margin: 0 auto; }
footer p + p { margin-top: 0.4rem; }
.ad-note { margin-top: 0.5rem; font-size: 0.7rem; color: var(--text-dim); }

@media (max-width: 540px) {
  #cards-grid { grid-template-columns: 1fr; }
  .fair-price-value { font-size: 1.7rem; }
}

/* ── ソフト1本ごとのページ（build_pages.py が index.html の CSS のあとに付け足す） ── */
.header-pixel a { color: inherit; text-decoration: none; }
.page { max-width: 640px; margin: 0 auto; padding: 1rem; }
.crumb { font-size: 0.72rem; color: var(--text-dim); margin: 0.4rem 0 0.8rem; }
.crumb a { color: var(--text-dim); }
h1.soft-title { font-size: 1.3rem; line-height: 1.4; margin: 0.2rem 0 0.3rem; }
.updated { font-size: 0.72rem; color: var(--text-dim); margin: 0.4rem 0 0.8rem; }
.sec { margin-top: 1.4rem; }
.sec h2 { font-size: 0.95rem; color: var(--accent); border-left: 3px solid var(--accent); padding-left: 0.5rem; margin-bottom: 0.6rem; }
.hitokoto { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; background: rgba(178,255,89,0.08); border: 1px solid rgba(178,255,89,0.4); border-radius: 4px; padding: 0.15rem 0.5rem; }
.hitokoto .down { color: var(--accent); font-weight: 700; }
.hitokoto .up { color: var(--accent2); font-weight: 700; }
.rel { list-style: none; }
.rel li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px dotted var(--border); font-size: 0.85rem; }
.rel .num { font-family: var(--pixel); color: var(--accent3); white-space: nowrap; }
.backtop { display: block; text-align: center; margin: 1.5rem 0; }