/* ==========================================================
   依頼者ごとの装飾
   style.css の後に読み込まれ、同じセレクタなら、こちらが勝つ。
   テンプレート側も setup-site も、このファイルは触らない。依頼者ごとの見た目の作り込みは、すべてここに書く
   (Claude Code に「こうしたい」と頼めば、ここに書く。setup-site は brief.md だけを入力にするので、ここは触らない)
   (style.css を直接変えると、テンプレートの修正を取り込むときに衝突するため)。
   配色・フォント・角丸は、ここではなく brief.md の「デザイン方針」で変える(文字の読みやすさの検査を通すため)。
   ========================================================== */

/* 蓮月ゆあ: 「夜の湖面に映るサキュバス」
   - ヒーローだけを夜の帯にし、絵の下端を水平線にして、水面の映り込みの上に名前を置く
   - 装飾は、キービジュアルの金の蝶・波紋・悪魔のしっぽ(先がハート)から取る
   - 本文の地は、朝の水面のような淡いラベンダー(brief の背景色)に、不揃いな波紋の輪を置く */

:root {
  /* Web フォント(index.html で読み込む)。brief の「フォント」は、読み込めないときの代わりとして後ろに残す */
  --font-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-head: "Kiwi Maru", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 夜の帯。文字に使う --night-ink / --night-muted / --gold は、--night-2 の上で palette.mjs により AA を確認済み */
  --night-1: #120b22;
  --night-2: #2a1a48;
  --night-ink: #f6f0ff;
  --night-muted: #d4c4ef;
  --gold: #e9c46a;
  /* 明るい地の上で文字に使う金(日付・ローマ数字)。--bg の上で 5.48:1 */
  --gold-ink: #8a5a12;
  /* 装飾専用の紫(線・しっぽ・波紋)。--accent-soft は地とほぼ同色で見えないので、別に持つ */
  --deco: #9b6ad6;
  --deco-faint: rgba(155, 106, 214, .22);
}

body { font-size: 16px; }

/* ---------- 見出し: 和文を大きく、下に悪魔のしっぽ(先がハート) ---------- */
.sec-title {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 26px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(32px, 9vw, 46px);
  line-height: 1.3;
  letter-spacing: .04em;
}
.sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 176px;
  height: 26px;
  background: var(--deco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 26'%3E%3Cpath d='M3 15c18-13 34 9 54 0s36-12 56-1c14 8 28 9 42 0' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M164 22l-8-7.5a4.6 4.6 0 0 1 8-5 4.6 4.6 0 0 1 8 5z'/%3E%3C/svg%3E") no-repeat left center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 26'%3E%3Cpath d='M3 15c18-13 34 9 54 0s36-12 56-1c14 8 28 9 42 0' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M164 22l-8-7.5a4.6 4.6 0 0 1 8-5 4.6 4.6 0 0 1 8 5z'/%3E%3C/svg%3E") no-repeat left center / contain;
}
/* 節ごとに、しっぽの向きと見出しの寄せを入れ替える */
/* スマホでは全部左寄せ(右寄せにすると、右下に浮かぶ蝶のメニューボタンが見出しにかぶるため) */
@media (min-width: 721px) {
  .sec:nth-of-type(even) .sec-title { text-align: right; }
  .sec:nth-of-type(even) .sec-title::after { left: auto; right: 0; transform: scaleX(-1); }
}

/* ---------- ヒーロー: 夜空 → 絵 → 水平線 → 水面 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 16px 72px;
  text-align: center;
  color: var(--night-ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9) 0 1px, transparent 1.6px) 0 0 / 97px 83px,
    radial-gradient(circle at 62% 40%, rgba(255,255,255,.7) 0 1px, transparent 1.6px) 0 0 / 151px 127px,
    radial-gradient(circle at 40% 70%, rgba(233,196,106,.8) 0 1.2px, transparent 2px) 0 0 / 211px 173px,
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 62%, #3a2763 calc(100% - 64px), var(--bg) 100%);
}
.hero-catch {
  max-width: 24em;
  margin: 0 auto 28px;
  font-family: var(--font-head);
  /* 1行目(22字)が、幅 375px のスマホでも折れずに収まる大きさと字間 */
  font-size: 14px;
  line-height: 2;
  letter-spacing: .02em;
  color: var(--night-muted);
  /* 夜色の地に、🖤🦇 のような暗い絵文字が溶けないよう、淡い光の縁を付ける */
  text-shadow: 0 0 4px rgba(255,255,255,.5);
}
/* 絵の幅(--kv-w)は、名前まで最初の画面に収まるよう、画面の高さから決める。
   300px は、上の余白・キャッチコピー・水面・名前の高さの合計(スマホ)。小さすぎる画面でも 180px は保つ */
.hero { --kv-w: min(82vw, 360px, max(180px, calc((100svh - 300px) / 2))); }
.hero-stage { position: relative; width: var(--kv-w); margin: 0 auto; }
.hero-visual { position: relative; margin: 0; }
/* 上辺はゴシックのアーチ窓。下端は水平線なので角を立てる。
   映り込みは -webkit-box-reflect(Chrome・Safari・Edge)。Firefox では映らず、水面の色だけになる */
.hero-visual .kv {
  border-radius: 50% 50% 4px 4px / 18% 18% 4px 4px;
  box-shadow: 0 0 0 1px rgba(233,196,106,.55), 0 0 48px rgba(155,106,214,.5);
  /* マスクは映り込みを反転する前の向き(下端が水平線)。楕円で左右と下を溶かし、四角い箱に見えないようにする */
  -webkit-box-reflect: below 0 radial-gradient(ellipse 62% 34% at 50% 100%, rgba(0,0,0,.28), transparent);
}

/* 水面: 水平線の金の光の筋と、名前。前後のボタン(波紋)が上端に浮かぶので、その下から名前を置く */
/* 名前は絵の幅に収めず、画面幅いっぱいの中央に1行で出す(絵の幅が狭いと、2行に折れて最初の画面からはみ出すため) */
.hero-water { position: relative; width: calc(100vw - 32px); margin-left: calc((var(--kv-w) - 100vw + 32px) / 2); padding: 28px 0 0; }
/* 絵が2枚以上で、前後の波紋のボタンが水平線の下に出るときだけ、その分を空ける */
.hero-stage:has(.kv-nav) .hero-water { padding-top: 76px; }
.hero-water::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--gold) 28%, #fff6dc 50%, var(--gold) 72%, transparent);
  box-shadow: 0 0 12px rgba(233,196,106,.8);
}
.hero-name {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  text-shadow: 0 2px 14px rgba(18,11,34,.95), 0 0 2px rgba(18,11,34,.9);
}
.hero-name-ja { font-size: clamp(42px, 12vw, 66px); line-height: 1.2; letter-spacing: .1em; white-space: nowrap; }
.hero-name-en { font-family: var(--font-jp); font-size: 14px; letter-spacing: .36em; color: var(--gold); }

/* PC 幅: 絵の高さを画面の高さに合わせて抑え、水平線と名前を最初の画面に入れる。
   キャッチコピーは、絵の左の夜空に縦書きで置く(碑文のように)。右には釣り合いの細い金の線だけ。
   スマホは幅に余裕が無いので、絵の上に横書きのまま */
@media (min-width: 861px) {
  .hero { --kv-w: clamp(240px, calc((100vh - 300px) / 2), 360px); padding-top: 40px; }
  .hero-catch {
    position: absolute;
    top: 64px;
    right: calc(50% + var(--kv-w) / 2 + 64px);
    max-width: none;
    margin: 0;
    writing-mode: vertical-rl;
    text-align: start;
    /* 1列目(22字)が絵の高さに収まる大きさ。絵の幅に合わせて変える(240px で 18px、360px で 28px ほど) */
    font-size: calc(var(--kv-w) / 13);
    line-height: 2.1;
    letter-spacing: .1em;
    color: var(--gold);
    text-shadow: 0 0 4px rgba(255,255,255,.5), 0 0 18px rgba(233,196,106,.35);
  }
  .hero-stage::before {
    content: "";
    position: absolute;
    top: 12%;
    left: calc(100% + 72px);
    width: 1px;
    height: 56%;
    background: linear-gradient(180deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    box-shadow: 0 0 8px rgba(233,196,106,.6);
  }
}

/* キービジュアルの操作: 前後は水面に浮かぶ波紋の輪(水平線のすぐ下の左右)、ドットは絵の右端を飛ぶ金の蝶 */
.kv-ripple { position: absolute; top: calc(100% + 12px); z-index: 2; }
.kv-ripple-prev { left: -4px; }
.kv-ripple-next { right: -4px; }
.kv-nav {
  display: block;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--night-muted);
  cursor: pointer;
}
.kv-nav svg { display: block; width: 100%; height: 100%; }
.kv-nav .ring { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .75; }
.kv-nav .ring-outer { opacity: .4; }
.kv-nav .arrow { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kv-nav:active .ring-outer { opacity: 1; }
@media (hover: hover) {
  .kv-nav:hover .ring-outer { opacity: .95; }
}

.hero-visual .kv-controls { position: absolute; top: 16%; right: -18px; z-index: 2; margin: 0; padding: 0; }
.hero-visual .kv-dots { display: flex; flex-direction: column; gap: 14px; }
.kv-dot {
  display: block;
  width: 36px;
  height: 36px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--gold);
  cursor: pointer;
}
.kv-dot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.butterfly .wing { fill: currentColor; transform-origin: 12px 12px; }
.butterfly .body { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* 今の1枚は羽を開いて光る。ほかは羽を閉じる */
.kv-dot:not([aria-current="true"]) .wing { transform: scaleX(.32); opacity: .8; }
.kv-dot[aria-current="true"] svg { filter: drop-shadow(0 0 6px rgba(233,196,106,.9)); }
@media (prefers-reduced-motion: no-preference) {
  .butterfly .wing { transition: transform .35s ease, opacity .35s ease; }
}

/* ---------- 本文の地: 不揃いな波紋の輪 ---------- */
main {
  background:
    radial-gradient(circle at 6% 14%, transparent 0 52px, var(--deco-faint) 53px 54px, transparent 55px 86px, rgba(155,106,214,.14) 87px 88px, transparent 89px) no-repeat,
    radial-gradient(circle at 96% 41%, transparent 0 90px, var(--deco-faint) 91px 92px, transparent 93px 140px, rgba(155,106,214,.12) 141px 142px, transparent 143px) no-repeat,
    radial-gradient(circle at 12% 74%, transparent 0 30px, var(--deco-faint) 31px 32px, transparent 33px) no-repeat,
    radial-gradient(circle at 88% 93%, transparent 0 60px, rgba(155,106,214,.16) 61px 62px, transparent 63px 98px, rgba(155,106,214,.1) 99px 100px, transparent 101px) no-repeat;
}

/* 節の間隔は2種類: 通常は上下 36px(節の間で 72px)。活動履歴の後だけ、区切りとして少し広く空ける。
   Why not 上下 72px: 節の間が 144px になり、スマホで1節ごとに空白の画面が挟まって間延びした(制作者の指摘) */
.sec { max-width: 760px; margin: 0 auto; padding: 36px 16px; }
.sec-links { padding-top: 28px; }
.sec-history { padding-bottom: 64px; }
main { padding-bottom: 40px; }

/* ---------- リンクと配信時間 ---------- */
.onair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin: 0 0 24px;
  padding: 20px 24px;
  border-radius: var(--radius);
  color: var(--night-ink);
  background: linear-gradient(135deg, var(--night-1), var(--night-2) 70%, #3a2763);
  box-shadow: inset 0 -1px 0 rgba(233,196,106,.6);
}
.onair-label { margin: 0; font-size: 14px; letter-spacing: .24em; color: var(--gold); }
.schedule { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.slot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 12px; }
/* 札は時刻の下の行の中央に */
.slot .onair-badge { flex-basis: auto; margin: 4px auto 0; }
.slot:has(.onair-badge:not([hidden]))::after { content: ""; order: 1; flex-basis: 100%; }
.slot .onair-badge { order: 2; }
/* 「こんゆあの時間🦇」(19:00〜21:00 の間だけ、index.html 末尾のスクリプトが点ける)。帯を金色に光らせ、札を添える */
.onair.is-onair { box-shadow: inset 0 -1px 0 rgba(233,196,106,.6), 0 0 0 2px var(--gold), 0 0 26px rgba(233,196,106,.5); }
.onair-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 3px 12px;
  border-radius: 999px;
  /* 淡い金の地。濃い金の地では、🦇(暗い茶色の絵文字)が沈んだ */
  border: 1px solid var(--gold);
  background: #fff3d1;
  color: var(--night-1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.onair-badge[hidden] { display: none; }
.onair-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b0124f; }
@media (prefers-reduced-motion: no-preference) {
  .onair-badge::before { animation: onair-pulse 1.6s ease-in-out infinite; }
}
@keyframes onair-pulse { 50% { opacity: .25; } }
.slot-label { font-size: 16px; font-weight: 700; }
.slot-time { font-family: var(--font-head); font-size: clamp(34px, 10vw, 46px); line-height: 1.1; letter-spacing: .04em; }

.links-main { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
@media (min-width: 600px) { .links-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 配信先の札: ヒーロー・配信時間の帯と同じ夜色の地に、金の細い枠と矢印 */
.link-big {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 22px;
  border: 1px solid rgba(233,196,106,.65);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--night-1), var(--night-2));
  color: var(--night-ink);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(42,26,72,.16);
}
.link-name { flex: 1; display: grid; text-align: left; }
.link-name [data-link-label] { font-family: var(--font-head); font-size: 20px; line-height: 1.4; letter-spacing: .04em; }
.link-name small { font-size: 14px; color: var(--night-muted); }
/* 矢印: 金の細い線と、先の小さな折れ */
.link-arrow { position: relative; flex: 0 0 28px; height: 1px; background: var(--gold); }
.link-arrow::before { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); rotate: 45deg; }
.link-big:active { background: linear-gradient(135deg, var(--night-2), #3d2668); }
@media (hover: hover) {
  .link-big:hover { background: linear-gradient(135deg, var(--night-2), #3d2668); }
}

.links-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.link-small {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 1.5px solid var(--deco);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- プロフィール: タロットのカード ---------- */
.facts { counter-reset: tarot; gap: 18px; }
.tarot {
  counter-increment: tarot;
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 160px;
  padding: 22px 16px 28px;
  border: 1px solid var(--deco);
  border-radius: 10px;
  background: var(--surface);
  /* 二重の枠: 内側に細い線をもう1本 */
  box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px rgba(155,106,214,.6), 0 8px 20px rgba(42,26,72,.1);
  text-align: center;
}
.tarot.fact-wide { min-height: 0; }
/* 広い画面では、ファンマークとハッシュタグを横に並べる(1行全体だと、中身のわりに横に長く空いて見えた)。
   スマホはカードの幅にタグと「コピーする」が収まらないので、1行全体のまま。profile.js の wide は内容側の指定なので変えない */
@media (min-width: 721px) {
  .tarot[data-key="fanMark"],
  .tarot[data-key="hashtags"] { grid-column: auto; }
}
.tarot dt { display: grid; justify-items: center; gap: 2px; font-size: 14px; letter-spacing: .14em; color: var(--muted); }
.tarot-num::before { content: counter(tarot, upper-roman); font-family: var(--font-head); font-size: 18px; letter-spacing: .12em; color: var(--gold-ink); }
.tarot dd { font-size: 18px; font-weight: 700; line-height: 1.6; word-break: keep-all; }
/* keep-all: 和文を語の途中で折らず、「、」の後で折る(auto-phrase は対応していないブラウザがあり、「寝る / 事」と折れた)。収まらない長い語は、style.css の overflow-wrap: anywhere が折る */
/* デザインのリンク(JS がクラスの無い a で作る)。既定の青のままだと、この欄だけ配色から浮いた */
.tarot dd a { color: var(--accent); text-decoration-color: var(--deco); text-underline-offset: 4px; }
/* 四隅のうち2か所に、トランプの印のようなハート */
.tarot-suit::before,
.tarot-suit::after { content: "\2665"; position: absolute; font-size: 14px; line-height: 1; color: var(--deco); }
.tarot-suit::before { top: 14px; left: 14px; }
.tarot-suit::after { right: 14px; bottom: 14px; }
/* 読み仮名(JS が値の要素の中に small で足す)は、名前の下の行に */
.tarot dd small { display: block; font-size: 13px; font-weight: 400; letter-spacing: .1em; color: var(--muted); }

.tarot .copy-row { justify-content: center; }
/* ハッシュタグ: 2行で「タグの列」と「ボタンの列」を共有し(subgrid)、そのまとまりをカードの中央に置く。
   Why not タグの欄を 1fr で広げる: ボタンの列はそろうが、広い画面でまとまりが右に寄り、カードの中央からずれた */
.tarot .copy-list { grid-template-columns: auto auto; justify-content: center; gap: 8px 14px; }
.tarot .copy-list .copy-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.tarot .copy-list .copy-text { justify-self: end; }
.copy-text-large { font-size: 28px; }
.tag-link { color: var(--accent); }
.copy-btn {
  display: inline-grid;
  justify-items: center;
  white-space: nowrap;
  min-height: 36px;
  padding: 4px 16px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.copy-label,
.copy-btn::after { grid-area: 1 / 1; }
.copy-btn::after { content: "コピーしました"; visibility: hidden; }
.copy-btn:active { background: var(--accent-soft); }
@media (hover: hover) { .copy-btn:hover { background: var(--accent-soft); } }

/* ---------- 活動履歴: 縦の光の筋に、波紋の印を並べる ---------- */
.history { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.history::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 9px;
  width: 2px;
  background: linear-gradient(var(--deco), rgba(155,106,214,.25));
}
.history li {
  position: relative;
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr);
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(155,106,214,.4);
}
.history li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: -28px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--deco);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 4px rgba(155,106,214,.16);
}
/* いちばん新しい1件だけ、金に灯す */
.history:not(.history-older) li:first-child::before { border-color: var(--gold-ink); background: var(--gold); }
.history time { font-size: 15px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.history-text { font-size: 16px; }
@media (max-width: 480px) { .history li { grid-template-columns: minmax(0, 1fr); } }

/* 古い行の開閉(parts.md の「活動履歴」の形) */
.history-older { display: none; }
.history-more-toggle:checked ~ .history-older { display: block; }
.history-more-toggle:focus-visible ~ .history-more { outline: 3px solid var(--accent); outline-offset: 3px; }
.history-more-close { display: none; }
.history-more-toggle:checked ~ .history-more .history-more-open { display: none; }
.history-more-toggle:checked ~ .history-more .history-more-close { display: inline; }
.history-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 22px 0 0 30px;
  padding: 8px 22px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.history-more:active { background: var(--accent-soft); }
@media (hover: hover) { .history-more:hover { background: var(--accent-soft); } }

/* ---------- 枠のルール: ローマ数字の条項 ---------- */
.rules { counter-reset: rule; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rules li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  padding: 14px 18px;
  gap: 14px;
  border: 1px solid rgba(155,106,214,.5);
  border-radius: var(--radius);
  background: var(--surface);
  /* タロットのカードと同じ二重の線 */
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px rgba(155,106,214,.28), 0 4px 14px rgba(42,26,72,.07);
  font-size: 16px;
  font-weight: 700;
}
.rules li p { margin: 0; }
/* 行頭のローマ数字は、波紋の輪の中に */
.rules li::before {
  content: counter(rule, upper-roman);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--deco);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(155,106,214,.14);
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--gold-ink);
}

/* ---------- メニュー(スマホだけ): 右下に浮かぶ蝶のボタンと、上へ開く夜色の札 ---------- */
.topbar { display: none; }
@media (max-width: 720px) {
  .topbar {
    display: block;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 20;
  }
  .topbar .brand { display: none; }
  .js .nav-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(233,196,106,.7);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--night-2), var(--night-1));
    color: var(--gold);
    box-shadow: 0 6px 18px rgba(18,11,34,.45), 0 0 14px rgba(155,106,214,.45);
  }
  .nav-butterfly { width: 30px; height: 30px; fill: currentColor; }
  /* 開いている間は、蝶が羽を閉じる */
  .topbar.is-open .nav-butterfly { transform: scaleX(.35); }
  .js .topbar nav {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% + 12px);
    display: grid;
    min-width: 200px;
    padding: 10px;
    border: 1px solid rgba(233,196,106,.55);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--night-1), var(--night-2));
    box-shadow: 0 10px 28px rgba(18,11,34,.45);
  }
  #siteNav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 14px;
    border-radius: 8px;
    color: var(--night-ink);
    font-size: 16px;
    text-decoration: none;
  }
  /* 項目の頭に、小さな波紋の輪 */
  #siteNav a::before {
    content: "";
    flex: 0 0 10px;
    height: 10px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
  }
  #siteNav a:active { background: rgba(155,106,214,.3); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  /* 開閉の仕掛け(opacity と visibility)は style.css のまま。札は下から少し上がって開く */
  .js .topbar nav { transform: translateY(8px); transition: opacity .2s, visibility .2s, transform .25s ease; }
  .js .topbar.is-open nav { transform: none; }
  .nav-butterfly { transition: transform .3s ease; }
}

/* ---------- 周年(デビュー日から毎年7日間)と誕生日(当日だけ)。index.html 末尾のスクリプトが .hero に is-anniv を付け、札を足す ---------- */
/* 札が1行増えるぶん、名前が最初の画面に収まるよう、絵の幅を決める式の余白を 300px から 344px に増やす */
.hero.is-anniv { --kv-w: min(82vw, 360px, max(180px, calc((100svh - 344px) / 2))); }
@media (min-width: 861px) {
  .hero.is-anniv { --kv-w: clamp(240px, calc((100vh - 344px) / 2), 360px); }
}
.anniv-badge {
  position: relative;
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(18,11,34,.65);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: 16px;
  letter-spacing: .24em;
  box-shadow: 0 0 18px rgba(233,196,106,.55);
}
.hero.is-anniv .hero-water::before { height: 2px; box-shadow: 0 0 24px rgba(233,196,106,1), 0 0 6px #fff6dc; }
/* 誕生日の当日は、プロフィールの誕生日のカードを金で灯す(札と水平線は、周年と同じ .anniv-badge・.is-anniv を使う) */
.tarot.is-birthday { border-color: var(--gold); box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--gold), 0 0 22px rgba(233,196,106,.55); }
.history li.is-debut::before { border-color: var(--gold-ink); background: var(--gold); box-shadow: 0 0 0 4px rgba(233,196,106,.35); }

/* ---------- 遊び: 水面に触れると波紋が広がる(index.html 末尾のスクリプトが要素を足す。動きを減らす設定では何も足さない) ---------- */
/* 水面に触れると、その位置から金の波紋が2重に広がる */
.water-ripple { position: absolute; width: 0; height: 0; pointer-events: none; }
.water-ripple::before,
.water-ripple::after {
  content: "";
  position: absolute;
  left: -60px;
  top: -20px;
  width: 120px;
  height: 40px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: water-ripple 1.4s ease-out forwards;
}
.water-ripple::after { animation-delay: .25s; }
@keyframes water-ripple {
  0% { transform: scale(.1); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- フッター: 夜の湖に戻る ---------- */
.footer {
  position: relative;
  padding: 52px 16px 44px;
  text-align: center;
  font-size: 14px;
  color: var(--night-muted);
  background: linear-gradient(180deg, var(--night-2), var(--night-1));
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
/* スマホでは、右下に浮かぶ蝶のメニューボタン(56px)が最後の行にかぶらないよう、下に余白を足す */
@media (max-width: 720px) { .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.footer-note { margin: 0 0 10px; }
.footer a { color: var(--night-ink); }
.footer .credits-entry { color: var(--gold); }
.footer .copy { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; }

/* ---------- クレジットページ ---------- */
.credits-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 16px;
  background: var(--night-1);
}
.credits-head .brand { font-family: var(--font-head); font-size: 20px; color: var(--night-ink); text-decoration: none; }
.page-credits .sec { padding-bottom: 120px; }
.credits-lead { margin: 0 0 8px; color: var(--muted); }
.credit { margin-top: 44px; }
.credit-heading { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 22px; }
.credit-creator { margin: 4px 0 0; font-weight: 700; }
.credit-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; padding: 0; list-style: none; }
.credit-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 18px;
  border: 1.5px solid var(--deco);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.credit-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.credit-work { margin: 0; }
.credit-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface); cursor: zoom-in; box-shadow: 0 6px 16px rgba(42,26,72,.12); }
.credit-zoom img { display: block; width: 100%; height: auto; }
.credit-title { margin-top: 8px; font-size: 14px; }
.credit-title a { color: var(--accent); }
.back-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 5;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(42,26,72,.3);
}