/* GeekJack Music Guide
   ─────────────────────────────────────────────────────────
   題材は「暗いアーケードとクラブで光るジャケット」。
   最大の資産は447枚のジャケット画像なので、色を持つのは常に作品側で、
   UIは黒衣に徹する。差し色はSDVX由来のシアン×マゼンタのレーザー。
   金色は「収録あり」だけに使う ── このサイトの成果そのものだから。

   ダークテーマ単一。ジャケットが最も映える地を選んだ意図的な決定であり、
   ライトテーマの省略ではない。
   ───────────────────────────────────────────────────────── */

:root {
  /* 地。純黒ではなく紫に寄せた黒＝暗いフロアの色 */
  --ink:      #08060f;
  --panel:    #120e1e;
  --panel-2:  #1b1530;
  --line:     #2e2547;
  --line-hot: #453868;

  --text:     #f4efff;   /* 紫寄りの白 */
  --dim:      #9d92b8;
  --faint:    #6b6088;

  /* レーザー。2色で1つの意味を成すので単独では使わない */
  --laser:    #22e8ff;
  --neon:     #ff2f7e;
  --beam: linear-gradient(100deg, var(--laser), var(--neon));

  /* 成果の色。「その曲が入っている」にだけ使う */
  --gold:     #ffd166;

  --ok:       #35d6a4;

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
          "Noto Sans JP", "Noto Sans SC", "Microsoft YaHei",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas",
          "Roboto Mono", monospace;

  --maxw: 1180px;
  --cut: 10px;           /* 角の切り落とし量。筐体UIの語彙 */
}

* { box-sizing: border-box; }

/* width/height属性は正しい比率をブラウザに伝えてレイアウトのガタつきを防ぐためのもので、
   描画サイズの指定ではない。CSSで幅を与えたら高さは必ず auto に戻す。
   これを怠ると属性の高さが効いて画像が潰れる。 */
img { max-width: 100%; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 地の色は html に置く。body に不透明の背景を敷くと、下の ::before/::after
   （z-index が負の演出レイヤー）がその裏に回って見えなくなる */
html { background: var(--ink); }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ── 地の演出 ──────────────────────────────────────────────
   ページの下のほうへ行くと真っ黒な板が続くだけだったので、フロアの奥行きを
   画面に固定して敷く。position:fixed なので、スクロールしてもレーザーは
   同じ場所で光り続ける ── 会場の照明が動かないのと同じ。
   ジャケットより前に出ないよう、いずれも数%の濃度に留める。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 10% -6%,  rgba(34,232,255,.13), transparent 62%),
    radial-gradient(950px 500px at 92% -2%,   rgba(255,47,126,.11), transparent 60%),
    radial-gradient(900px 520px at 50% 108%,  rgba(34,232,255,.07), transparent 62%),
    radial-gradient(700px 420px at 100% 62%,  rgba(255,47,126,.05), transparent 60%);
}
/* 筐体の格子とスキャンライン。上ほど濃く、下に向けて溶ける */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 104, 214, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 104, 214, .085) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  background-size: 54px 54px, 54px 54px, 100% 3px;
  -webkit-mask-image: radial-gradient(ellipse 150% 120% at 50% -14%, #000 30%, transparent 88%);
          mask-image: radial-gradient(ellipse 150% 120% at 50% -14%, #000 30%, transparent 88%);
}
@media (prefers-reduced-motion: reduce) {
  body::after { background-image: none; }
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--laser); }
:focus-visible {
  outline: 2px solid var(--laser);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ── header ───────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8, 6, 15, .78);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.site-head::after {   /* 天井のレーザー1本 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--beam); opacity: .55;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px; flex-wrap: wrap;
}
.brand {
  font-weight: 800; font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.site-nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.site-nav a {
  color: var(--dim); font-size: 13px; position: relative; padding: 4px 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--beam); transition: right .25s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { right: 0; }

.lang-switch { display: flex; gap: 4px; }
.lang-switch a {
  font-family: var(--mono);
  font-size: 11px; padding: 4px 10px; color: var(--faint);
  border: 1px solid var(--line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.lang-switch a:hover { color: var(--text); border-color: var(--line-hot); }
.lang-switch a[aria-current] {
  color: var(--ink); background: var(--laser); border-color: var(--laser);
  font-weight: 700;
}

/* ── hero ─────────────────────────────────────────────── */
.hero { padding: 68px 0 30px; position: relative; }
.hero h1 {
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 900;
  margin: 0 0 14px; text-wrap: balance; max-width: 18ch;
}
.hero p {
  color: var(--dim); margin: 0; max-width: 60ch; font-size: 15px;
}
.hero .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--laser);
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
}
.hero .eyebrow::after {
  content: ""; height: 1px; flex: 1; background: var(--beam); opacity: .5;
}

/* ジャケットの帯。実物の作品そのものが主役なので、装飾ではなく中身を流す */
.marquee {
  margin: 34px 0 8px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 12px; width: max-content;
  animation: slide 68s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img {
  width: 118px; height: 118px; object-fit: cover; display: block;
  border: 1px solid var(--line);
  filter: saturate(.75) brightness(.68);
  transition: filter .3s ease, transform .3s ease;
}
.marquee img:hover { filter: none; transform: scale(1.06); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── sections ─────────────────────────────────────────── */
section { padding: 44px 0; }
section > h2 {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 8px; display: flex; align-items: center; gap: 12px;
}
section > h2::before {
  content: ""; width: 4px; height: 22px; background: var(--beam); flex: none;
}
section > .lead {
  color: var(--dim); margin: 0 0 24px; font-size: 14px; max-width: 68ch;
}

/* ── grids ────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; }
.grid.games  { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.grid.cards  { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid.people { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }

/* 角を切った板。丸角ではなく筐体UIの語彙 */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px; display: block; position: relative;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .2s ease, transform .2s ease;
}
.card::before {   /* 左のレーザーレール。hoverで点灯 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--beam); opacity: 0; transition: opacity .2s ease;
}
.card:hover {
  background: var(--panel-2); transform: translateY(-3px); color: var(--text);
}
.card:hover::before { opacity: 1; }
.card h3 {
  margin: 0 0 6px; font-size: 14.5px; font-weight: 700;
  line-height: 1.5; letter-spacing: -.01em;
  /* 作品名には途中で折れない綴りが混じる（TatshMusicCircle、PLANET//SHAPER）。
     カードが狭くなるほど溢れるので、行き場が無いときは綴りの途中でも折る。
     通常の単語は従来どおり単語単位で折れる */
  overflow-wrap: anywhere;
}
.card .meta {
  color: var(--faint); font-size: 11.5px; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ゲーム＝筐体のネームプレート */
.card.game h3 { font-size: 16px; }
.card.game .pub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}

/* ── CD card ──────────────────────────────────────────── */
.cd-card { padding: 0; border: 1px solid var(--line); }
.cd-card .thumb {
  aspect-ratio: 1; overflow: hidden; background: var(--panel-2); position: relative;
}
.cd-card .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .3s ease;
  filter: saturate(.92);
}
.cd-card:hover .thumb img { transform: scale(1.05); filter: saturate(1.1); }
.cd-card .body { padding: 13px 14px 15px; }
.cd-card .creator {
  color: var(--laser); font-size: 11px; margin-bottom: 4px;
  font-family: var(--mono); letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-card h3 { font-size: 13px; line-height: 1.5; }
.cd-card .meta { margin-top: 8px; font-size: 13px; color: var(--text); font-weight: 700; }
.cd-card .meta.sold { color: var(--faint); font-weight: 400; }

/* ── person card ──────────────────────────────────────
   GeekJack提供のアーティストビジュアル。名前だけの箱より圧倒的に強い。
   ジャケットと同じく、色を持つのは作品/本人側でUIは黒衣に徹する。 */
.person-card { padding: 0; }
.person-card .face {
  aspect-ratio: 1; overflow: hidden; background: var(--panel-2);
}
.person-card .face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.88) brightness(.9);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .3s ease;
}
.person-card:hover .face img {
  transform: scale(1.06); filter: saturate(1.05) brightness(1);
}
.person-card .body { padding: 12px 14px 14px; }
.person-card h3 { font-size: 13.5px; margin: 0 0 3px; }

/* ── artist banner ────────────────────────────────────
   GeekJackのクリエイターページ上部にある看板(1600x188)。全幅の帯で敷く。 */
.artist-banner {
  width: 100%; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.artist-banner img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1600 / 188; object-fit: cover;
}
.artist-banner::after {   /* 帯の下端をフロアの闇に馴染ませる */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(transparent, rgba(8,6,15,.85));
  pointer-events: none;
}

/* ── SNS ──────────────────────────────────────────────
   ブランドアイコンは持ち込まず等幅の文字で統一する。
   デザインの語彙に合い、各社アイコンの利用条件も踏まない。 */
.sns-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 0; }
.sns {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  padding: 5px 12px; color: var(--dim);
  border: 1px solid var(--line); background: var(--panel);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.sns:hover { color: var(--text); border-color: var(--laser); background: var(--panel-2); }
.sns--official {
  color: var(--laser); border-color: rgba(34,232,255,.45); font-weight: 700;
}
.sns--official:hover { background: rgba(34,232,255,.1); }

/* ── artist hero（クリエイター / VTuber ページの顔）──── */
.artist-hero {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px;
  align-items: center; padding: 38px 0 34px;
}
@media (max-width: 780px) {
  .artist-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; }
}
.artist-face {
  position: relative; align-self: start;
  border: 1px solid var(--line); background: var(--panel-2);
}
.artist-face::before {   /* 光は本人の外に置く。写真の色には触れない */
  content: ""; position: absolute; inset: -14px; z-index: -1;
  background: var(--beam); opacity: .28; filter: blur(26px);
}
.artist-face img { width: 100%; height: auto; display: block; position: relative; }
.artist-info h1 {
  font-size: clamp(26px, 4vw, 44px); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.12; margin: 0 0 12px;
  text-wrap: balance;
}
.artist-info > p { color: var(--dim); font-size: 14.5px; margin: 0 0 18px; max-width: 56ch; }
.artist-info .chips { margin-bottom: 0; }

/* ── badges ───────────────────────────────────────────── */
.badge {
  display: inline-block; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; padding: 3px 9px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
/* 「この曲を収録」＝このサイトが存在する理由。ここにだけ金を使う */
.badge.ok {
  color: var(--gold); border-color: rgba(255,209,102,.5);
  background: rgba(255,209,102,.09); font-weight: 700;
}
.badge.hot {
  color: var(--neon); border-color: rgba(255,47,126,.5);
  background: rgba(255,47,126,.09);
}
.badge.dim { color: var(--faint); }

/* ── song rows（アーケードの選曲画面）────────────────── */
.songrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border: 1px solid transparent;
  border-bottom-color: var(--line); position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.songrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold); opacity: 0; transition: opacity .18s ease;
}
.songrow:hover {
  background: var(--panel); border-color: var(--line-hot);
}
.songrow:hover::before { opacity: 1; }
.songrow .song {
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}
.songrow .arrow { color: var(--faint); font-family: var(--mono); }
.songrow .to { font-size: 13.5px; color: var(--laser); }
.songrow .to:hover { text-decoration: underline; }
.songrow .meta { color: var(--faint); font-size: 11.5px; font-family: var(--mono); }

/* ── detail ───────────────────────────────────────────── */
.detail { display: grid; grid-template-columns: 330px 1fr; gap: 44px; padding: 52px 0 20px; }
@media (max-width: 800px) { .detail { grid-template-columns: 1fr; gap: 28px; } }
.detail .cover {
  position: relative; align-self: start;
  background: var(--panel-2); border: 1px solid var(--line);
}
/* 光はジャケットの「外」に置く。作品の色に手を触れない。
   ジャケットが光源で、UIはその光を受ける側という関係にする */
.detail .cover::before {
  content: ""; position: absolute; inset: -16px; z-index: -1;
  background: var(--beam); opacity: .3; filter: blur(28px);
}
.detail .cover img { width: 100%; height: auto; display: block; position: relative; }
.detail h1 {
  font-size: clamp(22px, 3.2vw, 32px); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.25; margin: 0 0 8px;
  text-wrap: balance;
}
.detail .by {
  font-family: var(--mono); font-size: 13px; margin: 0 0 22px;
  letter-spacing: .04em;
}
.detail .by a { color: var(--laser); }

/* ── buy ──────────────────────────────────────────────── */
.price {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.price .cur { font-size: 13px; color: var(--faint); font-weight: 400; letter-spacing: .1em; }
.buy {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; font-weight: 800; font-size: 15px;
  color: var(--ink); background: var(--beam);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: filter .2s ease, transform .2s ease;
}
.buy:hover { color: var(--ink); filter: brightness(1.14); transform: translateY(-2px); }
.buy-note { color: var(--faint); font-size: 11.5px; margin: 10px 0 0; }

/* ── tracklist ────────────────────────────────────────── */
.tracks { list-style: none; padding: 0; margin: 0; }
.tracks li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.tracks li:last-child { border-bottom: 0; }
.tracks .no {
  color: var(--faint); font-size: 11px; min-width: 24px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.tracks .t-artist { color: var(--dim); font-size: 12px; font-family: var(--mono); }
.tracks .disc-head {
  border-bottom: 0; padding: 20px 0 6px; color: var(--laser);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── link list ────────────────────────────────────────── */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li {
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.linklist li:last-child { border-bottom: 0; }
.linklist a { color: var(--laser); }
.linklist .sub { color: var(--faint); font-size: 12px; font-family: var(--mono); }

/* ── chips ────────────────────────────────────────────── */
.chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 0; list-style: none;
}
.chips li {
  font-family: var(--mono); font-size: 11.5px; padding: 4px 11px;
  background: var(--panel); border: 1px solid var(--line); color: var(--dim);
}
.chips li:first-child {
  background: none; border-color: transparent; color: var(--faint);
  letter-spacing: .14em; text-transform: uppercase; font-size: 10px;
  padding-left: 0;
}
.chips a { color: var(--laser); }

/* ── footer ───────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line); margin-top: 60px;
  padding: 32px 0 60px; color: var(--faint); font-size: 12px;
  position: relative;
}
.site-foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: 1px; background: var(--beam); opacity: .3;
}
.site-foot p { margin: 0 0 9px; max-width: 76ch; line-height: 1.7; }
.site-foot a { color: var(--laser); }

.note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--laser);
  padding: 13px 17px; font-size: 13px; color: var(--dim); margin: 0 0 20px;
}
.sources { font-size: 11px; color: var(--faint); margin-top: 6px; }
.sources a { color: var(--faint); text-decoration: underline; }


/* ── イベントLP ─────────────────────────────────────────────
   即売会の特集ページ。スペース番号は「会場で列を探すための情報」なので
   等幅で大きく、装飾より先に読めるようにする。
   金色は「収録あり」専用の色なので、ここでは使わない。 */

.event-banner {
  display: grid;
  gap: 4px;
  margin: 8px 0 34px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line-hot);
  border-radius: var(--cut);
  position: relative;
  overflow: hidden;
}
.event-banner::before {   /* レーザーの帯。左端に立てて「今だけ」を示す */
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--beam);
}
.event-banner:hover { border-color: var(--laser); background: var(--panel-2); }
.event-banner .eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--laser); font-family: var(--mono);
}
.event-banner strong { font-size: 20px; line-height: 1.4; }
.event-banner .sub { color: var(--dim); font-size: 14px; }
.event-banner .cta { color: var(--laser); font-size: 13px; margin-top: 6px; }

.event-hero { padding-bottom: 8px; }
.event-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  margin: 22px 0 0; max-width: 560px;
}
.event-meta dt {
  color: var(--faint); font-size: 12px; font-family: var(--mono);
  letter-spacing: .06em; align-self: center;
}
.event-meta dd { margin: 0; font-size: 15px; }
.event-hero .sns { margin-top: 18px; display: inline-block; }

.day-head {
  margin: 54px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 15px; letter-spacing: .1em;
  color: var(--dim); font-family: var(--mono); font-weight: 600;
}

.circle {
  margin: 0 0 44px;
  padding: 22px 24px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--cut);
}
.circle-head {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .circle { padding: 18px 16px 20px; }
  .circle-head { grid-template-columns: 1fr; gap: 12px; }
}
.circle .space {
  display: grid; gap: 2px; justify-items: center;
  padding: 10px 14px; min-width: 108px;
  background: var(--panel-2); border: 1px solid var(--line-hot);
  border-radius: 6px;
}
.circle .space .hall { font-size: 11px; color: var(--dim); }
.circle .space .no {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--laser); letter-spacing: .04em;
}
.circle-name h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.circle-name .note { margin: 6px 0 0; color: var(--dim); font-size: 14px; }
.circle-members { margin-top: 6px; color: var(--faint); font-size: 13px; }

.event-artist { padding-top: 26px; }
.event-artist + .event-artist { border-top: 1px dashed var(--line); margin-top: 30px; }
.artist-intro { display: grid; grid-template-columns: 160px 1fr; gap: 24px; }
@media (max-width: 640px) {
  .artist-intro { grid-template-columns: 1fr; gap: 16px; }
  .event-artist .artist-face { max-width: 200px; }
}
.event-artist .artist-info h3 { margin: 0 0 8px; font-size: 20px; }
.event-artist .artist-info h3 a { color: inherit; text-decoration: none; }
.event-artist .artist-info h3 a:hover { color: var(--laser); }
.event-artist .artist-info p { margin: 0; color: var(--dim); font-size: 14px; }
.more-link { display: inline-block; margin-top: 12px; color: var(--laser); font-size: 13px; }

.artist-games, .artist-latest, .artist-past { margin-top: 26px; }
.artist-games h4, .artist-latest h4, .artist-past h4 {
  margin: 0 0 12px; font-size: 12px; letter-spacing: .12em;
  color: var(--faint); font-family: var(--mono); font-weight: 600;
}
.songlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.songlist li { font-size: 14px; }
.songlist .g { color: var(--dim); font-size: 12px; margin-right: 8px; }
.songlist .more { color: var(--faint); font-size: 12px; }
/* 最新作は1枚だけなので、縦積みのカードのままだと右が空いて弱く見える。
   横長にしてジャケットとタイトルを一息で読ませ、枠を点けて過去作と差をつける */
.artist-latest .grid.cards { grid-template-columns: minmax(0, 560px); }
.artist-latest .cd-card {
  display: grid; grid-template-columns: 168px 1fr; align-items: center;
  border-color: var(--line-hot);
}
.artist-latest .cd-card::before { opacity: .55; }   /* レーザーレールを常時点灯 */
.artist-latest .cd-card .body { padding: 16px 20px; }
.artist-latest .cd-card h3 { font-size: 15px; }
.artist-latest .cd-card .meta { font-size: 15px; }
@media (max-width: 520px) {
  .artist-latest .cd-card { grid-template-columns: 1fr; }
}

.event-notes { margin-top: 40px; }
.event-notes ul { padding-left: 1.1em; margin: 0 0 18px; }
.event-notes li { color: var(--dim); font-size: 14px; margin-bottom: 6px; }
.event-notes .src-label {
  margin: 0 0 6px; color: var(--faint); font-size: 12px; font-family: var(--mono);
}
.srclist { list-style: none; padding: 0; margin: 0; }
.srclist li { margin-bottom: 4px; }
.srclist a { color: var(--faint); font-size: 12px; word-break: break-all; }
.srclist a:hover { color: var(--laser); }


/* ── 日本語・中国語の行末処理 ────────────────────────────────
   日本語は単語の切れ目が無いぶん、ブラウザは任意の位置で行を折る。
   その結果「7サ／ークル」「会場／に行く人も」のように語や音を割った
   改行が出る。auto-phrase は文節で折り、strict は長音符・小書き仮名・
   句読点を行頭／行末に落とさない（禁則処理）。
   auto-phrase 未対応のブラウザでは従来の折り返しに戻るだけで、害はない。 */
html[lang="ja"] body, html[lang="zh-Hans"] body { line-break: strict; }
html[lang="ja"] body { word-break: auto-phrase; }
/* 見出しには text-wrap を足さない。ここで pretty を当てると
   特異度(0,1,2)が .hero h1 等(0,1,1)に勝ってしまい、意図した balance が
   日本語ページだけ無効になる。見出しの折り返しは既存の balance に任せる */
/* URLは語ではないので、ここだけは従来どおり任意の位置で折る */
.srclist a { word-break: break-all; line-break: auto; }

/* 1行が長いほど、折り返し位置の粗さは目立つ。本文は行長を抑える */
.event-artist .artist-info p { max-width: 62ch; }
.circle-name .note { max-width: 72ch; }
.event-notes li { max-width: 78ch; }


/* ── 試聴プレーヤー ──────────────────────────────────────────
   聴けることは分かるが、ジャケットより目立ってはいけない。
   再生中だけレーザー色を点ける。 */
.play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; margin-left: 8px;
  font-family: var(--font); font-size: 12px; line-height: 1.6;
  color: var(--dim); background: var(--panel-2);
  border: 1px solid var(--line-hot); border-radius: 999px;
  cursor: pointer; vertical-align: middle;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.play:hover { color: var(--text); border-color: var(--laser); }
.play .tri {
  width: 0; height: 0; flex: none;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.play.playing {
  color: var(--ink); background: var(--laser); border-color: var(--laser);
  font-weight: 700;
}
.play--sm { padding: 2px 9px 2px 7px; font-size: 11px; }
.play--sm .tri { border-left-width: 6px; border-top-width: 4px; border-bottom-width: 4px; }

/* CDカードは <a> なので、ボタンは中に入れず重ねる */
.cd-item { position: relative; display: flex; flex-direction: column; }
.cd-item > .card { flex: 1; }
.cd-item > .play {
  position: absolute; right: 10px; top: 10px; margin: 0;
  background: rgba(8, 6, 15, .82); backdrop-filter: blur(6px);
}
.artist-latest .cd-item > .play { right: 14px; top: 14px; }

.player { margin: 12px 0 18px; max-width: 560px; }
.player-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--line-hot);
}
.player-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.player-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; color: var(--faint); font-size: 11px;
}
.player-close {
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--font); font-size: 11px; padding: 2px 10px; cursor: pointer;
}
.player-close:hover { color: var(--text); border-color: var(--laser); }
/* 楽曲リストの中で開いたときは行と揃える */
.songlist .player, .linklist .player { margin-left: 0; }
/* カードのグリッドの中に挿し込むと1セル分の幅（210px前後）に潰れる。
   グリッドの全列にまたがらせて、押したカードの下に1行として開く */
.grid > .player { grid-column: 1 / -1; margin: 4px 0 10px; }
/* CD詳細も2列グリッド。ここも全幅にして、ジャケットの下に素直に開かせる */
.detail > .player { grid-column: 1 / -1; }
.detail .play { margin: 14px 0 0; }


/* ── 「この曲を収録」からCDへ ──────────────────────────────
   バッジは金色＝このサイトの成果。飾りで終わらせず、実際に買えるCDへ渡す */
a.badge.ok { text-decoration: none; transition: background .2s ease, color .2s ease; }
a.badge.ok:hover { background: var(--gold); color: var(--ink); }
.on-cd {
  display: inline-block; margin-left: 10px;
  color: var(--faint); font-size: 12px;
}
.on-cd a { color: var(--laser); }
.on-cd a:hover { text-decoration: underline; }
.on-cd .more { color: var(--faint); }
/* 楽曲リストは1行が長くなるので、収録CDは折り返して次行に落ちてよい */
.songlist li, .linklist li { line-height: 1.9; }


/* ── イベントLPの見せ場 ────────────────────────────────────
   通常ページは「UIは黒衣」で通すが、ここは会期限定の特集で、
   開いた瞬間に「祭りがある」と伝わることが仕事。ここだけ照明を上げる。 */

.event-hero { padding-top: 76px; position: relative; }
.event-hero::before {          /* 見出しの背後で二本のレーザーが交差する */
  content: ""; position: absolute; left: -8%; right: -8%; top: -40px; height: 380px;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 220px at 18% 40%, rgba(34,232,255,.20), transparent 66%),
    radial-gradient(560px 200px at 78% 26%, rgba(255,47,126,.18), transparent 64%);
  filter: blur(6px);
}
.event-hero h1 {
  font-size: clamp(34px, 6.4vw, 74px); max-width: 14ch;
  text-shadow: 0 0 42px rgba(34,232,255,.34), 0 0 96px rgba(255,47,126,.18);
}
.event-hero .eyebrow { font-size: 12px; }

/* 開催までの日数。数字が主役なので等幅で大きく、レーザーで縁取る */
/* display を与えると HTML の hidden 属性（＝display:none）が効かなくなるので、
   計算前の空表示を出さないよう明示的に打ち消す */
.countdown[hidden] { display: none; }
.countdown {
  display: inline-block; margin: 0 0 18px;
  padding: 7px 18px;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: var(--laser);
  border: 1px solid var(--laser); border-radius: 999px;
  background: rgba(34,232,255,.07);
  box-shadow: 0 0 26px rgba(34,232,255,.22), inset 0 0 18px rgba(34,232,255,.07);
  animation: pulse 3.4s ease-in-out infinite;
}
.countdown--live {
  color: var(--neon); border-color: var(--neon);
  background: rgba(255,47,126,.08);
  box-shadow: 0 0 26px rgba(255,47,126,.28), inset 0 0 18px rgba(255,47,126,.08);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(34,232,255,.18), inset 0 0 16px rgba(34,232,255,.06); }
  50%      { box-shadow: 0 0 34px rgba(34,232,255,.34), inset 0 0 22px rgba(34,232,255,.12); }
}
@media (prefers-reduced-motion: reduce) { .countdown { animation: none; } }

/* 参加者のジャケットを流す帯。誰が出るのかを作品そのもので見せる */
.event-marquee { margin: 10px 0 4px; }
.event-marquee img {
  width: 128px; height: 128px;
  filter: saturate(.9) brightness(.82);
  border-color: var(--line-hot);
}
.event-marquee img:hover { filter: none; }

/* 日付の帯。ただの見出しではなく「その日の始まり」に見せる */
.day-head {
  position: relative;
  margin: 62px 0 24px; padding: 12px 0 12px 18px;
  font-size: 17px; letter-spacing: .12em; color: var(--text);
  border-bottom: 1px solid var(--line-hot);
  background: linear-gradient(90deg, rgba(34,232,255,.10), transparent 62%);
}
.day-head::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--beam); box-shadow: 0 0 14px rgba(34,232,255,.6);
}

/* サークルの箱。上辺にレーザーを一本通し、ホバーで浮かせる */
.circle {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 46%);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.circle::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--beam); opacity: .75;
}
.circle::after {              /* 隅にうっすら差す照明 */
  content: ""; position: absolute; right: -60px; top: -80px;
  width: 320px; height: 260px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,47,126,.14), transparent 72%);
}
.circle:hover {
  border-color: var(--line-hot); transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* スペース番号はネオン管。会場で探す情報なので、いちばん強く光らせる */
.circle .space {
  background: rgba(8,6,15,.72);
  border-color: var(--laser);
  box-shadow: 0 0 22px rgba(34,232,255,.20), inset 0 0 16px rgba(34,232,255,.06);
}
.circle .space .no {
  font-size: 22px;
  text-shadow: 0 0 16px rgba(34,232,255,.75), 0 0 34px rgba(34,232,255,.35);
}
.circle-name h2 {
  font-size: 26px;
  text-shadow: 0 0 30px rgba(255,255,255,.14);
}

/* アーティストの顔はリングで囲う。フロアのスポットに立っている感じ */
.event-artist .artist-face { position: relative; }
.event-artist .artist-face::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  background: var(--beam); opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 2px;
}
.event-artist .artist-info h3 {
  font-size: 22px; letter-spacing: -.01em;
}

/* 見出しの小ラベル。レーザーの点を先頭に置いて拍を作る */
.artist-games h4, .artist-latest h4, .artist-past h4 {
  display: flex; align-items: center; gap: 8px;
  color: var(--dim);
}
.artist-games h4::before, .artist-latest h4::before, .artist-past h4::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--laser); box-shadow: 0 0 10px rgba(34,232,255,.8);
}
.artist-latest h4::before { background: var(--neon); box-shadow: 0 0 10px rgba(255,47,126,.8); }

/* 最新作は一段強く。会期前に「今これが買える」を見せる場所 */
.artist-latest .cd-card {
  background: linear-gradient(120deg, rgba(34,232,255,.06), rgba(255,47,126,.05));
  box-shadow: 0 0 0 1px rgba(34,232,255,.10), 0 10px 30px rgba(0,0,0,.4);
}


/* ── 歌い手 × その歌が入っているCD ──────────────────────────
   本人のCDがGeekJackに無い歌い手は、名前を見出しにして、その人が歌って
   いるCDをサイトの他の場所と同じカードで並べる。件数に畳まず全部出す ──
   探しているのは「名前」ではなく「その歌が入っているCD」だから。 */
.singer-block { margin: 0 0 34px; }
/* 直下の見出しだけ。子孫セレクタにすると、中に並ぶCDカードの h3 にも
   飾りの縦線と flex が効いて、他ページのカードと見た目が変わってしまう */
.singer-block > h3 {
  margin: 0 0 12px; font-size: 16px; font-weight: 800;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.singer-block > h3::before {
  content: ""; width: 3px; height: 17px; background: var(--beam); flex: none;
}


/* ── スマートフォン ────────────────────────────────────────
   個別の部品（.detail / .artist-hero / .circle）には早い段階で
   1カラム化を入れてあるが、土台のヘッダー・グリッド・余白は
   デスクトップの値のまま降りてきていた。実測すると 390px 幅で

     ・ヘッダーが 223px  … 追従ヘッダーが画面の1/4を占め続ける
     ・全グリッドが1列   … クリエイター一覧が縦 38,990px

   となり、閲覧の大半を占めるスマホで作品に辿り着けない。
   ここで直すのは「入れ物」であって、作品の見せ方は変えない。
   ───────────────────────────────────────────────────────── */

/* ヘッダーは 1024px を切ると1行に収まらない（日本語のサイト名が長い）。
   flex の折り返しに任せると、言語切替がナビの隙間に紛れ込み、
   リンクは語の途中から折れて背だけが伸びる。行の役割を決めて2段に固定する。

     [ サイト名        ][ja][en][zh]
     [ ナビ3つ                     ]

   ナビを下段の全幅に置けば3項目が1行に収まり、上段はサイト名と
   言語切替だけになる。390px 幅で 223px → 80px。ナビ文言が長い言語
   （英語）と 360px 幅の端末では、ナビだけが項目単位で2行になり 115px。 */
@media (max-width: 1023px) {
  .site-head .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    min-height: 0;
    padding-top: 11px;
    padding-bottom: 9px;
  }
  /* HTMLの並びは サイト名 → ナビ → 言語切替。自動配置に任せると、
     全幅を取るナビが2行目に入った時点で言語切替が3行目へ押し出される。
     行と列は明示する。
     サイト名は日本語がいちばん長い。入り切らない端末では折り返して
     背を伸ばすより、末尾を省略して1行を守る */
  .brand {
    grid-row: 1; grid-column: 1;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .lang-switch { grid-row: 1; grid-column: 2; justify-self: end; }
  .site-nav {
    grid-row: 2; grid-column: 1 / -1;
    flex: none;              /* grid の子になるので flex:1 は不要 */
  }
  /* nowrap は「音楽ゲームから／探す」のような語の途中での折れを防ぐ。
     3項目が1行に収まらない幅では、項目単位で2行になる */
  .site-nav a { white-space: nowrap; }
}

@media (max-width: 720px) {

  /* ヘッダーの各部を、指で触る前提のサイズまで詰める。
     言語切替は3言語ぶんで 159px あり、そのままではサイト名が
     省略され始めるので、ここがいちばん効く */
  .site-head .wrap { gap: 7px 10px; padding-top: 10px; padding-bottom: 8px; }
  .brand { font-size: 12px; }
  .lang-switch { gap: 2px; }
  .lang-switch a { font-size: 9px; padding: 3px 6px; }
  .site-nav { gap: 5px 13px; }
  /* タップ目標として最低限の高さを確保する。下線アニメーションは
     padding の下端に付くので、余白を足しても見た目は変わらない */
  .site-nav a { font-size: 11.5px; padding: 5px 0; }

  /* 余白。22px は 390px 幅では画面の1割強になる */
  .wrap { padding: 0 18px; }

  .hero { padding: 40px 0 22px; }
  .hero p { font-size: 14.5px; }
  section { padding: 32px 0; }
  section > h2 { font-size: 19px; }
  section > .lead { margin-bottom: 18px; }

  /* ジャケットの帯。画面が狭いほど1枚が占める割合が上がるので、
     流れている感じが出る枚数まで縮める */
  .marquee { margin: 24px 0 6px; }
  .marquee img { width: 96px; height: 96px; }
  .event-marquee img { width: 104px; height: 104px; }

  .event-banner { padding: 16px 18px; margin-bottom: 28px; }
  .event-banner strong { font-size: 17px; }
  .event-banner .sub { font-size: 13px; }

  .event-hero { padding-top: 46px; }
  /* 見出し背後のレーザーは親からはみ出す指定。デスクトップでは
     wrap の余白に収まるが、余白を詰めた画面では外へ出るので畳む */
  .event-hero::before { left: 0; right: 0; }

  .day-head { margin: 40px 0 18px; }
  .circle { margin-bottom: 30px; }
  .site-foot { margin-top: 44px; padding: 26px 0 46px; }
}

@media (max-width: 560px) {

  /* グリッド。auto-fill の下限（196/210/172px）は、余白を引いた
     354px の画面では必ず1列になる。カードを小さくしてでも2列を
     維持したほうが、一覧としては圧倒的に見やすい */
  .grid { gap: 10px; }
  .grid.games,
  .grid.cards,
  .grid.people { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .card { padding: 13px; }
  .card h3 { font-size: 13.5px; }
  .card.game h3 { font-size: 14.5px; }
  .cd-card .body { padding: 11px 12px 13px; }
  .cd-card h3 { font-size: 12.5px; }
  .person-card .body { padding: 10px 11px 12px; }
  .person-card h3 { font-size: 12.5px; }

  /* 購入ボタン。指で押す場所なので幅いっぱいに広げる */
  .buy { display: flex; justify-content: center; width: 100%; padding: 15px 20px; }
  .price { font-size: 26px; }

  .detail { padding-top: 34px; }
  /* クリエイターの顔だけが画面幅いっぱいに伸びると、本文より
     写真の主張が強くなりすぎる。作品（ジャケット）は全幅のまま */
  .artist-hero .artist-face { max-width: 260px; }

  /* 曲名と参加アーティストは、狭い画面では1行に並ばない。
     ぶら下げずに折り返させる */
  .tracks li { flex-wrap: wrap; gap: 4px 12px; }
  .songrow { padding: 12px 12px; gap: 8px 10px; }
  .songrow .song { font-size: 14px; }

  /* 曲名の隣に出る「CD "◯◯"」は、このサイトの主力導線そのもの。
     文字高のままでは 16px しかなく、指では押しにくい。行間
     （line-height 1.9）の余白ぶんを上下に足してタップ領域を稼ぐ。
     inline のまま padding を足すので、長いCD名の折り返しは変わらない */
  .on-cd a, .songlist a, .linklist a { padding: 6px 0; }
  .more-link { padding: 6px 0; }
  a.badge.ok { padding: 6px 10px; }
  .play--sm { padding: 4px 11px 4px 9px; }

  /* スペース番号の箱。1カラムになると全幅に伸びて、
     「会場で探す番号」ではなく帯に見えてしまう */
  .circle .space { justify-self: start; }
  .circle-name h2 { font-size: 21px; }
  .event-artist .artist-info h3 { font-size: 19px; }
}

/* 360px 幅（Androidに多い）では、上の値でもサイト名が末尾から欠ける。
   ここだけもう一段詰めて、ブランド名を省略せずに1行へ収める */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .brand { font-size: 11.5px; }
  .lang-switch { gap: 1px; }
  .lang-switch a { font-size: 8.5px; padding: 3px 5px; }
}

/* タッチ端末ではホバーが「タップした後ずっと残る状態」になる。
   拡大やせり上がりが残ると、押したのに反応が終わらないように見えるので、
   ポインタを持たない環境では動かさない（色の変化だけ残す） */
@media (hover: none) {
  .card:hover { transform: none; }
  .cd-card:hover .thumb img,
  .person-card:hover .face img,
  .marquee img:hover { transform: none; }
  .circle:hover { transform: none; box-shadow: none; }
  .buy:hover { transform: none; }
}