/*
  カテゴリー帯(横スクロールのカテゴリーナビ)共通スタイル。
  カテゴリー一覧ページ・図鑑ページから共通で読み込む。
  色は各ページの :root で定義済みの --amber / --moonlight 等のトークンを使うため、
  このファイル単体では色を再定義しない(既存デザインに馴染ませるため)。
*/
.cat-strip-outer{ background:#0C1C18; border-top:1px solid var(--line); }
.cat-strip-wrap{ position:relative; max-width:1200px; margin:0 auto; }

.cat-strip{
  display:flex; gap:8px; overflow-x:auto;
  padding:10px 28px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar{ display:none; }

.cat-item{
  flex:0 0 auto; scroll-snap-align:center;
  padding:6px 14px; border-radius:999px;
  font-family:"Space Mono",monospace; font-size:11px; line-height:1.3; letter-spacing:.03em;
  white-space:nowrap;
  color:rgba(234,242,233,.65);
  background:rgba(234,242,233,.04);
  border:1px solid rgba(234,242,233,.15);
  transition:background .2s,color .2s,border-color .2s;
}
.cat-item:hover{ color:var(--moonlight); border-color:rgba(234,242,233,.32); }
.cat-item.current{
  color:var(--bark); background:var(--amber); border-color:var(--amber);
  font-weight:700; cursor:default; pointer-events:none;
}
.cat-item.soon{
  color:rgba(234,242,233,.35); background:transparent;
  border-style:dashed; border-color:rgba(234,242,233,.25); cursor:default;
}

.fade-right{
  position:absolute; top:0; right:0; bottom:0; width:44px;
  background:linear-gradient(to right, transparent, #0C1C18 85%);
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.fade-right.show{ opacity:1; }

.scroll-hint{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--amber); color:var(--bark);
  font-size:13px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s; cursor:pointer; pointer-events:none;
  animation:cat-strip-nudge 1.4s ease-in-out infinite;
}
.scroll-hint.show{ opacity:1; pointer-events:auto; }
@keyframes cat-strip-nudge{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(3px); }
}

@media(max-width:760px){
  .cat-strip{ padding:10px 18px; }
  .cat-item{ font-size:10px; padding:5px 12px; }
}