:root {
  color-scheme: dark;
  --bg: #0b1633; /* 紺色 */
  --surface: #15234a; /* 背景の紺より少し明るい紺 */
  --ink: #eef2f0;
  --sub: #9fada7;
  --line: #2c3d6b;
  --accent: #34d399;
  --accent-ink: #04130d;
  --accent-soft: #263c70; /* タグの地色。背景の紺になじむ明るめの紺 */
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Marudeco";
  src: url("fonts/Marudeco-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Spicy Rice";
  src: url("fonts/SpicyRice-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.7;
}
html,
body {
  overflow-x: hidden;
}
html {
  scrollbar-gutter: stable;
}
/* スクロールバー: バーは金色(角は直角)、通り道は背景の紺、上下の矢印なし。
   Chrome・Edge・Safari 用(scrollbar-color を指定するとこちらが効かなくなるので併用しない) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 0;
}
::-webkit-scrollbar-button {
  display: none;
}
/* Firefox 用(矢印はもともと出ない) */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #d4af37 var(--bg);
  }
}
:root {
  /* ロキの画像の幅。画面幅の40%(最大520px)。
     画面が狭くて吹き出しの場所(240px)が足りないときは、画面幅の30%まで小さくする */
  --imgw: min(40vw, 520px, max(30vw, calc((100vw - 716px) / 1.1)));
  /* 吹き出しの幅の計算に使う(.stage の幅と main の左の余白と同じ値) */
  --stagew: min(var(--imgw), 58vh);
  --mainleft: max(0px, calc((100vw - var(--imgw) - 960px) / 2));
}
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  margin-right: var(--imgw);
  margin-left: max(0px, calc((100vw - var(--imgw) - 960px) / 2));
}

.stage {
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(var(--imgw), 58vh);
  width: min(var(--imgw), 58dvh);
  aspect-ratio: 2/3;
  pointer-events: none;
  z-index: -1;
}
.stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}
.bubble {
  position: absolute;
  right: 110%;
  top: 40%; /* 上のモード切り替えボタンと重ならない高さ */
  transform: translateY(-50%);
  margin: 0;
  /* 短い文は1行、長い文(回答のタイトル入り)は幅を超えたら折り返す */
  width: max-content;
  /* 左の内容(幅420pxまで)と重ならない幅にする。
     吹き出しの右端 = 画面の右端 - ロキの幅×1.1(right: 110%)、内容の右端 = main の左の余白 + 24px + 420px。
     間を32pxあけ、狭くても240px、広くても440pxまで */
  max-width: clamp(240px, calc(100vw - 1.1 * var(--stagew) - var(--mainleft) - 444px - 32px), 440px);
  text-align: center;
  padding: 24px 28px;
  border-radius: 32px;
  background: #fff;
  color: #23202b;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2px;
  border-style: solid;
  border-width: 10px 0 10px 32px;
  border-color: transparent transparent transparent #fff;
}
/* 回答の台詞のタイトル部分(白地で読めるよう濃いめの金色) */
.bubble-title {
    color: #bd0000;
  /*color: #9a6b00;*/
  font-weight: 900; /* 吹き出しの他の文字(700)より太く */
  font-size: 1.2em; /* 吹き出しの文字の1.2倍 */
}
/* 途中で改行させたくない言葉のまとまり(折り返すときはまとまりの間で改行する) */
.bubble .phrase {
  display: inline-block;
  max-width: 100%; /* まとまりだけで吹き出しより長いときは、はみ出さずにその中で改行する */
  word-break: keep-all; /* その場合も、台詞の「|」(<wbr>)の位置でだけ改行する */
}
.bubble:empty {
  display: none;
}
main {
  position: relative;
  z-index: 1;
}

.sub {
  margin: 0;
  color: var(--sub);
  font-size: .9rem;
}
h1 {
  font-family: "Spicy Rice", "Noto Serif JP", serif;
  font-weight: 400; /* Spicy Rice は太さが1種類のみ(太字にすると形が崩れるため) */
  font-size: 3rem;
  color: #d4af37;
  margin: 0 0 4px;
  line-height: 1.3;
}
h1 {
  display: flex;
  align-items: center;
  gap: .2em;
}
/* タイトル直下の製作者表示 */
.credit a {
  color: var(--sub);
}
.title-icon {
  height: 1em;
  width: auto;
  flex: none;
}

/* 当サイトについて(about.html) */
main.about {
  max-width: 880px;
  line-height: 1.8;
}
.about section {
  margin-top: 28px;
}
.about h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: #d4af37;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.about p,
.about ul,
.about dl {
  margin: 0;
}
.about ul {
  padding-left: 1.4em;
}
.about dt {
  font-weight: 700;
}
.about dd {
  margin: 0 0 8px 1.4em;
  color: var(--sub);
}
.about section a {
  color: var(--accent);
}

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 20px;
}
.mode {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: transparent;
  color: #d4af37;
  cursor: pointer;
}
.mode:hover {
  background: rgba(212, 175, 55, .12);
}
.mode[aria-pressed="true"] {
  background: #d4af37;
  color: #1a1405;
}
.mode:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.lead {
  margin: 0 0 24px;
  color: var(--sub);
  font-size: .95rem;
}
.tags {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}
.tag {
  font: inherit;
  font-size: .95rem;
  line-height: 1.4;
  width: 100%;
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 2px;
  text-align: center;
}
.tag .nm {
  white-space: nowrap;
}
.tag .n {
  display: inline-block;
  font-size: .75em;
  opacity: .8;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.tag:hover {
  border-color: var(--accent);
}
.tag[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.tag.empty {
  opacity: .35;
  color: var(--sub);
}
/* 「ジャンル検索」「出演アイドル検索」の見出し(同じ書式) */
.search-heading {
  margin: 0 0 6px;
  color: var(--sub);
  font-size: .85rem;
  font-weight: 700;
}
/* 出演者検索(ジャンルボタンの下。ボタン3つを横に並べ、押すとプルダウンが開く) */
.idol-heading {
  margin-top: 16px;
}
.idol-select {
  position: relative; /* プルダウンはボタン3つ分の幅で開く */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.idol-btn {
  font: inherit;
  font-size: .95rem;
  line-height: 1.4;
  width: 100%;
  min-width: 0;
  padding: 10px 32px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  position: relative;
}
/* 長い名前は「…」で省略 */
.idol-btn .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 右端の▼(開いているときは上向き) */
.idol-btn::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -3px;
  border-style: solid;
  border-width: 7px 6px 0;
  border-color: var(--sub) transparent transparent;
}
.idol-btn[aria-expanded="true"]::after {
  border-width: 0 6px 7px;
  border-color: transparent transparent var(--sub);
}
.idol-btn:hover,
.idol-btn[aria-expanded="true"] {
  border-color: var(--accent);
}
/* 出演者を選んでいるときはジャンルボタンの選択中と同じ色 */
.idol-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.idol-btn.on::after {
  border-top-color: var(--accent-ink);
}
.idol-btn.on[aria-expanded="true"]::after {
  border-color: transparent transparent var(--accent-ink);
}
.idol-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.idol-list[hidden] {
  display: none;
}
.idol-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.idol-opt .n {
  font-size: .75em;
  opacity: .8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.idol-opt:hover,
.idol-opt:focus {
  background: var(--accent-soft);
  outline: none;
}
.idol-opt[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
/* 件数0の出演者はグレーアウトして選べない */
.idol-opt.empty {
  opacity: .35;
  color: var(--sub);
  cursor: default;
}
.idol-opt.empty:hover {
  background: none;
}

.tag:focus-visible,
.idol-btn:focus-visible,
.clear:focus-visible,
.card a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
  min-height: 40px;
}
.count {
  margin: 0;
  font-weight: 700;
}
.clear {
  font: inherit;
  font-size: .9rem;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.clear:disabled {
  opacity: .4;
  cursor: default;
}
.msg {
  padding: 32px 16px;
  text-align: center;
  color: var(--sub);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin: 0;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}
.card img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto; /* 画像ごとの縦横比のまま表示(切り抜かない) */
  border-radius: 6px;
}
/* 画像の代わりに埋め込む YouTube 動画(画像と同じ幅、16:9) */
.card iframe {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
}
.card h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 10px;
}
.card .t {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card .t li {
  font-size: .8rem;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
}
/* かんたん検索で選択中のタグ(上のタグボタンと同じ色) */
.card .t li.hit {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
/* 物語を読む・特設サイト・関連楽曲のリンク */
.card .links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  margin-top: 8px;
}
.card a {
  display: inline-block;
  font-size: .9rem;
  color: var(--accent);
}

.quiz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.q-step {
  margin: 0;
  color: #d4af37;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
}
.q-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.q-choice {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.q-choice:hover {
  border-color: var(--accent);
}
/* フロートイン: 次の選択肢・回答のカード・回答時の吹き出し */
.float-in .q-choice,
.float-in-item {
  animation: float-in 1.2s cubic-bezier(.2, .8, .3, 1) both;
}
/* 吹き出しの transform(位置合わせ)を崩さないよう translate で動かす */
@keyframes float-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-in .q-choice,
  .float-in-item {
    animation: none;
  }
}
/* 吹き出しと重ならないよう、カードと同じ幅(420px)に3つのボタンを並べる */
.q-actions {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.q-actions .clear {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: center;
}
.q-read {
  text-decoration: none;
  background: #d4af37;
  border-color: #d4af37;
  color: #1a1405;
  font-weight: 700;
}
.q-read:hover {
  opacity: .85;
}
/* Xでシェア(枠線だけのボタン) */
.q-share {
  text-decoration: none;
}
.q-read:disabled {
  background: var(--surface);
  border-color: var(--line);
  color: var(--sub);
  opacity: 1;
}
.q-choice:focus-visible,
.q-restart:focus-visible,
.q-read:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.q-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-chosen li {
  font-size: .8rem;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
}
.quiz .list {
  width: 100%;
  max-width: 420px;
} /* 吹き出しと重ならないよう選択肢と同じ幅に収める */

@media (max-width: 640px) {
  body:not([data-mode="question"]) .stage {
    display: none;
  }
  /* 質問モード: キャラクターと吹き出しを選択肢の上に表示 */
  body[data-mode="question"] .stage {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: auto;
    aspect-ratio: auto;
    margin: 16px 0 20px;
  }
  .stage img {
    width: auto;
    max-width: 100%;
    height: 280px;
    object-position: center bottom;
  }
  .bubble {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    min-width: 220px; /* 短い文でも、しっぽ(中央から75px左)が角の丸みにかからない幅にする */
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 1rem;
    order: 1; /* 画像の下に表示 */
  }
  /* しっぽは上向き(ロキの方を指す) */
  .bubble::after {
    left: calc(50% - 75px); /* 吹き出しの幅に関係なく、ロキの体の位置に合わせる */
    top: auto;
    bottom: 100%;
    transform: translateX(-50%);
    margin: 0;
    border-width: 0 9px 12px;
    border-color: transparent transparent #fff;
  }
  .q-choices,
  .quiz .list {
    max-width: none;
  }
  /* 選択肢は1段に2つずつ並べ、余りは中央に寄せる */
  .q-choices {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .q-choice {
    flex: 0 0 calc(50% - 4px);
    font-size: .95rem;
    padding: 10px 8px;
    border-radius: 10px;
    text-align: center;
  }
  .q-actions {
    width: 100%;
    max-width: none; /* スマホは吹き出しが上にあるので画面幅いっぱいに */
    gap: 8px;
  }
  /* 小さめの文字で1行に収める(幅は文字の長さに合わせて配分) */
  .q-actions .clear {
    flex: 1 1 auto;
    font-size: .85rem;
    padding: 10px 4px;
    white-space: nowrap;
  }
  main {
    margin: 0;
    max-width: none;
    padding: 12px 10px 48px;
  }
  .sub {
    font-size: .65rem;
  }
  h1 {
    font-size: 2rem;
  }
  .modes {
    gap: 6px;
    margin: 8px 0 12px;
  }
  .mode {
    font-size: .8rem;
    padding: 6px 8px;
  }
  .lead {
    font-size: .7rem;
    margin-bottom: 12px;
  }
  .tags {
    gap: 4px;
  }
  .tag {
    font-size: .58rem;
    padding: 4px 1px;
    border-radius: 10px;
  }
  .search-heading {
    font-size: .7rem;
    margin-bottom: 4px;
  }
  .idol-heading {
    margin-top: 10px;
  }
  .idol-select {
    gap: 4px;
  }
  .idol-btn {
    font-size: .65rem;
    padding: 6px 20px 6px 8px;
    border-radius: 10px;
  }
  .idol-btn::after {
    right: 8px;
    border-width: 5px 4px 0;
  }
  .idol-btn[aria-expanded="true"]::after {
    border-width: 0 4px 5px;
  }
  .idol-list {
    max-height: 50vh;
    padding: 4px;
  }
  .idol-opt {
    font-size: .8rem;
    padding: 8px 10px;
  }
  .bar {
    margin-top: 14px;
    margin-bottom: 8px;
    min-height: 30px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .count {
    font-size: .75rem;
  }
  .clear {
    font-size: .7rem;
    padding: 4px 8px;
  }
  .msg {
    font-size: .75rem;
    padding: 20px 8px;
  }
  .card {
    gap: 8px;
    padding: 8px;
  }
  .card h2 {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }
  .card .t li {
    font-size: .62rem;
    padding: 0 6px;
  }
  .card a {
    font-size: .7rem;
  }
  .card .links {
    column-gap: 12px;
  }
}