/* ==== 共通の設定（色・影。ここを変えると画面全体が変わります） ==== */
:root {
  /* 文字 */
  --text: #22313f;                       /* 本文・タイトル */
  --ink: #1f2430;                        /* 漫画の線のような、濃い枠線 */

  /* 面 */
  --surface: #ffffff;                    /* カードやプルダウンの白 */

  /* アクセント（イラストのロゴと同じ系統のアクア） */
  --aqua-dark: #168a9c;
  --aqua: #1a9fbd;
  --aqua-soft: #9adbe6;
  --aqua-pale: #e2f6f9;
  --aqua-ink: #0e6b79;                   /* 背景の上の小さなリンク文字（読みやすい濃さのアクア） */

  /* 結果カードの影（漫画のコマのような、ぼかさない影） */
  --card-shadow: 1.6cqw 1.6cqw 0 var(--ink);

  /* 角の丸み */
  --radius-pill: 999px;
}

/* ==== ページ全体 ==== */
* {
  box-sizing: border-box;
}

/* スマホでは余白なし（イラストを画面の幅いっぱいに出す）。パソコンでは下の @media で余白を付ける
   中身（イラスト → 下のお知らせとリンク）は、上から順に縦に並べて、左右のまん中に置く */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(180deg, #fdf3dc 0%, #fdeedd 100%);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: var(--text);
  line-height: 1.6;
}

/* ==== 画面全体のイラスト（この上に、プルダウン・結果カード・ボタンを重ねる） ==== */
/* 縦横の比率はイラストと同じ 1003:1568 に固定する。幅は画面いっぱい、ただし 420px まで
   中の部品の位置は「イラストに対する割合（%）」、大きさは「イラストの幅に対する割合（cqw）」で決めるので、
   どの画面の大きさでも、絵とずれずに一緒に拡大・縮小する
   （1cqw = イラストの幅の 1%。幅 420px なら 4.2px） */
.container {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1003 / 1568;
  container-type: inline-size;  /* 中の部品が cqw を使えるようにする */
  background-color: #fbf3df;    /* 画像を読み込むまでの色 */
  background-image: url("images/main-background.jpg");  /* 元の PNG を軽くした版（元の PNG は images に残してある） */
  background-size: 100% 100%;   /* 枠の比率がイラストと同じなので、ゆがまずにぴったり収まる */
  background-repeat: no-repeat;
}

/* パソコンなど、幅に余裕がある画面では、イラストを中央に置いて上下に余白をとる */
@media (min-width: 452px) {
  body {
    padding: 24px 16px 32px;
  }

  .container {
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(120, 80, 20, 0.18);
  }
}

/* 画面には見せず、読み上げソフトには読ませる文字（ロゴの代わりの「まんがガチャ」） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==== ジャンルを選ぶプルダウン（上の空の吹き出しの中。見出し「ジャンル」を上、プルダウンを下に並べる） ==== */
/* 吹き出しの白い部分（イラストの 横 58.5〜93.5%、縦 9.2〜19.6%）に収める */
.genre-field {
  position: absolute;
  left: 58.5%;
  top: 9.2%;
  width: 35%;
  height: 10.4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2cqw;
}

/* 見出し「ジャンル」（結果の「このマンガだ！」と同じ、水色の小さなラベル） */
.genre-label {
  padding: 0.3cqw 2.8cqw;
  font-size: 3cqw;
  font-weight: 800;
  line-height: 1.5;
  color: var(--aqua-dark);
  background: var(--aqua-pale);
  border-radius: var(--radius-pill);
}

/* プルダウン本体（白地の丸いボタン型。右端の ▼ は水色の矢印の絵）
   いちばん長い「ヒューマンドラマ」が吹き出しからはみ出さない大きさにしてある */
.genre-select {
  width: 100%;
  height: 8.5cqw;
  padding: 0 4.2cqw 0 1.8cqw;
  font-family: inherit;
  font-size: 3.3cqw;
  font-weight: 800;
  color: var(--text);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23168a9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6cqw center;
  background-size: 2.4cqw auto;
  border: max(1.5px, 0.4cqw) solid var(--ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  appearance: none;          /* ブラウザ標準の矢印を消して、上の水色の矢印を使う */
  -webkit-appearance: none;
  transition: background-color 0.15s;
}

.genre-select:hover:not(:disabled) {
  background-color: var(--aqua-pale);
}

/* 演出中・読み込み中など、選べないときは少し薄くする */
.genre-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.genre-select:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
}

/* ==== 結果のカード（本棚のコマの上に重ねる、漫画のコマ風のカード） ==== */
/* 位置と大きさはイラストに対する割合で固定（下のボタンも、カードの中身で動かない）
   中身は「このマンガだ！」を上の端、「読んでみる」ボタンを下の端に置き、作品名をその間のまん中に置く
   （作品名の上下に同じだけ余白ができるので、3つの間隔は作品名の長さに関係なく等間隔になる）
   gap は間隔のいちばん小さい値。長い作品名は script.js が文字を小さくして、この間隔を残して収める */
.result {
  position: absolute;
  left: 6%;
  top: 31%;
  width: 88%;
  height: 45%;
  padding: 5cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3cqw;
  text-align: center;
  /* 白地に、うっすら漫画のトーン（水玉）を付ける */
  background-color: var(--surface);
  background-image: radial-gradient(rgba(26, 159, 189, 0.12) 18%, transparent 20%);
  background-size: 2.4cqw 2.4cqw;
  border: max(2px, 0.75cqw) solid var(--ink);
  box-shadow: var(--card-shadow);
}

/* 開いたときはカードを出さない（マシンの絵が見えるようにする） */
.result[hidden] {
  display: none;
}

.result p {
  margin: 0;
}

/* 作品名などのメインの文字は、上下の margin を auto にして、上の見出しと下の「読んでみる」ボタンの間のまん中に置く
   （上の「.result p」より優先されるように、同じ書き方で書く） */
.result p.result-text {
  margin-block: auto;
}

/* 見出し「このマンガだ！」（空のときは隠す） */
.result-label {
  flex-shrink: 0;
  padding: 0.7cqw 3.4cqw;
  font-size: 3.9cqw;
  font-weight: 800;
  line-height: 1.5;
  color: #ffffff;
  background: var(--aqua);
  border-radius: var(--radius-pill);
}

.result-label:empty {
  display: none;
}

/* メインの文字（お知らせ・作品名） */
.result-text {
  flex-shrink: 0;
  font-size: 5.2cqw;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* 当たった漫画タイトルは大きく表示 */
.result.hit .result-text {
  font-size: 6.4cqw;
  animation: title-in 0.4s ease-out 0.2s backwards;
}

/* カードがふわっと現れ、アクアの輪が広がる */
.result.hit {
  animation: pop 0.4s ease-out, impact 0.6s ease-out;
}

@keyframes pop {
  0%   { transform: scale(0.94); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes impact {
  0%   { box-shadow: 0 0 0 0 rgba(47, 183, 201, 0.45), var(--card-shadow); }
  100% { box-shadow: 0 0 0 4cqw rgba(47, 183, 201, 0), var(--card-shadow); }
}

/* 「このマンガだ！」が少し大きい状態から収まる */
.result.hit .result-label {
  animation: label-in 0.3s ease-out 0.1s backwards;
}

@keyframes label-in {
  0%   { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 漫画タイトルが下からふわっと出る */
@keyframes title-in {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ==== 「このマンガを読んでみる！」ボタン（カードの下の端。左右はカードの内側から 3cqw ずつあける） ==== */
.read-link {
  flex-shrink: 0;
  align-self: stretch;
  margin: 0 3cqw;
  display: block;
  padding: 2.4cqw 2cqw;
  font-size: 3.8cqw;
  font-weight: 800;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  background: var(--aqua);
  border: max(1.5px, 0.5cqw) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 0 0.8cqw 0 var(--ink);
  transition: background 0.15s;
  /* 結果が出てから少し遅れて、下からふわっと浮き上がる（script.js がこの「rise」の終わりを合図にしている） */
  animation: rise 0.4s ease-out 0.8s backwards;
}

/* 隠れているとき（ガチャの最中など）は、見えなくするだけで場所は空けておく
   見えない間は押せず、浮き上がるアニメーションも止めておく（結果が出たときに、また最初から浮き上がる） */
.read-link[hidden] {
  display: block;
  visibility: hidden;
  animation: none;
}

/* 浮き上がっている途中はクリックできない */
.read-link.locked {
  pointer-events: none;
}

@keyframes rise {
  0%   { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.read-link:hover {
  background: var(--aqua-dark);
}

.read-link:active {
  transform: translateY(0.6cqw);
  box-shadow: 0 0.2cqw 0 var(--ink);
}

.read-link:focus-visible {
  outline: 3px solid var(--aqua-soft);
  outline-offset: 3px;
}

/* ==== ガチャを回したときのカットイン演出（本棚のコマの上に重ねる） ==== */
/* 場所は結果のカードと同じ（イラストの 横 6〜94%、縦 31〜76%）。この中のまん中に、画像のコマを置く
   演出の段階は script.js が data-step に書き込む（in: 飛び込む → shake: ガチャガチャ → pon: ポン！ → out: 消える）
   飛び込む・消える時間（--cutin-in / --cutin-out）は script.js の数字から設定される */
.cutin {
  position: absolute;
  left: 6%;
  top: 31%;
  width: 88%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.cutin[hidden] {
  display: none;
}

/* 画像のコマと文字をまとめた板（止まっているときは水平。幅はコマの 92%） */
.cutin-panel {
  position: relative;
  width: 92%;
}

/* 黒い枠の付いた画像のコマ。縦横の比率は画像と同じ */
.cutin-frame {
  position: relative;
  aspect-ratio: 1200 / 505;
  overflow: hidden;
  background: var(--surface);
  border: max(2px, 0.75cqw) solid var(--ink);
  box-shadow: var(--card-shadow);
}

/* 空の排出口の画像と、カプセルを描く canvas は、同じ位置・同じ大きさでぴったり重ねる（切り替えてもずれない） */
.cutin-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カプセルは「ポン！」のときだけ見せる */
.cutin-capsule {
  visibility: hidden;
}

.cutin[data-step="pon"] .cutin-capsule,
.cutin[data-step="out"] .cutin-capsule {
  visibility: visible;
}

/* 「ガチャガチャ」「ポン！」の文字（ロゴのような、太くて黒い縁取りのある文字） */
.cutin-word {
  position: absolute;
  left: 50%;
  margin: 0;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 1.6cqw var(--ink);
  paint-order: stroke fill;   /* 縁取りを文字の外側に付けて、文字を細らせない */
  text-shadow: 0.8cqw 0.8cqw 0 var(--ink);
  visibility: hidden;
}

/* 「ガチャガチャ」は、コマの上の枠にかぶせて置く（カプセルと同じ黄色） */
.cutin-gacha {
  top: 0;
  translate: -50% -55%;
  rotate: -7deg;
  font-size: 10cqw;
  letter-spacing: 0.04em;
  color: #ffd84a;
}

/* 「ポン！」は、カプセルの下（排出口の手前の青い台のあたり）に置く。カプセルがしっかり見えるように、重なりは下の端だけ
   （ガチャボタンと同じオレンジ。コマの下の枠に少しかかるが、本棚のコマからははみ出さない） */
.cutin-pon {
  top: 87%;
  translate: -50% -50%;
  rotate: -6deg;
  font-size: 16cqw;
  color: #ff7a2f;
  isolation: isolate;
}

/* 「ポン！」の後ろで、白い光がぱっと広がる */
.cutin-pon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 1.6em;
  height: 1.6em;
  margin: -0.8em 0 0 -0.8em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 38%, rgba(255, 216, 74, 0.55) 40% 58%, transparent 60%);
  opacity: 0;
}

/* --- 1. 飛び込む：左から勢いよく入ってきて、少し行き過ぎてから止まる --- */
.cutin[data-step="in"] .cutin-panel {
  animation: cutin-in var(--cutin-in, 350ms) cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes cutin-in {
  0%   { transform: translateX(-120%) skewX(-14deg) scale(1.1); }
  100% { transform: none; }
}

/* --- 2. ガチャガチャ：画像のコマが「ガタッ…ガタッ…」と重く揺れ、文字が弾むように出て小刻みに動く --- */
/* 1回の動きの中で、左に傾いてガタッ → 止まる → 右に傾いてガタッ → 止まる（2回揺れる）
   1回の動きの長さ（--shake-cycle）と繰り返す回数（--shake-repeat。0.5 回 = 1回揺れる）は、
   script.js の SHAKES_PER_SECOND と SHAKE_COUNT から設定される
   決めた回数だけ揺れたら、止まった（水平の）まま「ポン！」を待つ
   下の端を中心に傾けて、マシンが床の上でゴロッと揺れるように見せる */
.cutin[data-step="shake"] .cutin-frame {
  transform-origin: 50% 100%;
  animation: rattle var(--shake-cycle, 1000ms) ease-in-out var(--shake-repeat, 1);
}

@keyframes rattle {
  0%, 30%, 50%, 80%, 100% { transform: none; }
  7%  { transform: translate(-0.6cqw, -1.2cqw) rotate(-2deg); }    /* 左に持ち上がる */
  15% { transform: translate(0.2cqw, 0.3cqw) rotate(0.6deg); }     /* ドスッと落ちる */
  22% { transform: rotate(-0.2deg); }                              /* 落ち着く */
  57% { transform: translate(0.6cqw, -1.2cqw) rotate(2deg); }      /* 右に持ち上がる */
  65% { transform: translate(-0.2cqw, 0.3cqw) rotate(-0.6deg); }   /* ドスッと落ちる */
  72% { transform: rotate(0.2deg); }                               /* 落ち着く */
}

.cutin[data-step="shake"] .cutin-gacha {
  visibility: visible;
  animation: word-pop 0.25s ease-out both, word-jiggle 0.3s ease-in-out 0.25s infinite alternate;
}

@keyframes word-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes word-jiggle {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.06) rotate(2deg); }
}

/* --- 3. ポン！：カプセルの画像に切り替わり、文字が弾けるように出る --- */
.cutin[data-step="pon"] .cutin-pon,
.cutin[data-step="out"] .cutin-pon {
  visibility: visible;
}

.cutin[data-step="pon"] .cutin-pon {
  animation: pon-burst 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

.cutin[data-step="pon"] .cutin-pon::before {
  animation: pon-flash 0.5s ease-out both;
}

@keyframes pon-burst {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes pon-flash {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- 4. 消える：少し大きくなりながら、すっと消える --- */
.cutin[data-step="out"] .cutin-panel {
  animation: cutin-out var(--cutin-out, 200ms) ease-in both;
}

@keyframes cutin-out {
  0%   { transform: none; opacity: 1; }
  100% { transform: scale(1.06); opacity: 0; }
}

/* ==== ガチャボタン（絵のオレンジのボタンの上に重ねる、透明な本物のボタン） ==== */
/* 絵のボタン（イラストの 横 19.2〜80.6%、縦 84.5〜93.6%）にぴったり重ねる。文字だけをこのボタンで書く */
.gacha-button {
  position: absolute;
  left: 19.2%;
  top: 84.5%;
  width: 61.4%;
  height: 9.1%;
  padding: 0 4cqw;
  font-family: inherit;
  font-size: 4.6cqw;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #ffffff;
  /* 文字のまわりに濃いオレンジのふちを付けて、オレンジの上でも読みやすくする */
  text-shadow:
    0 0.4cqw 0 #b84a18,
    0.25cqw 0 0 #b84a18,
    -0.25cqw 0 0 #b84a18,
    0 -0.25cqw 0 #b84a18;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

/* マウスを乗せると、ボタンが少し明るくなる */
.gacha-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.14);
}

/* 押したときは少し暗くなり、文字が沈む */
.gacha-button:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.08);
  padding-top: 0.8cqw;
}

/* 演出中・読み込み中（押せないとき）は、ボタン全体に白を薄く重ねて色をあせさせ、文字も薄くする */
.gacha-button:disabled {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
}

/* キーボード操作時にどこを選んでいるか分かるようにする */
.gacha-button:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

/* ==== イラストの下のお知らせとリンク（「非公式サイトです」の一文と、3つのリンク） ==== */
/* イラストの外側に置くので、イラストの上の部品の位置や大きさは変わらない */
.site-footer {
  width: 100%;
  max-width: 420px;
  padding: 14px 16px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.site-footer-note {
  margin: 0 0 6px;
  color: var(--text);
  opacity: 0.8;
}

/* 3つのリンクを横に並べる（狭い画面では折り返す） */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
}

/* 指で押しやすいように、文字のまわりにも押せる範囲を付ける */
.site-footer-links a {
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--aqua-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer-links a:hover {
  color: var(--aqua-dark);
}

.site-footer-links a:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==== 「このサイトについて」「プライバシーポリシー」のページ ==== */
/* ガチャの画面と同じ背景・書体で、結果カードのような白いカードに文章を載せる */
.info-page {
  width: 100%;
  max-width: 640px;
  padding: 20px 16px 32px;
}

/* 「ガチャにもどる」リンク（カードの上と下に置く） */
.back-link {
  display: inline-block;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--aqua-ink);
  text-underline-offset: 3px;
}

.back-link:hover {
  color: var(--aqua-dark);
}

.back-link:focus-visible,
.info-card a:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 白いカード（結果カードと同じ、濃い枠線とぼかさない影） */
.info-card {
  margin: 10px 0 18px;
  padding: 24px 20px 26px;
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* ページの見出し（「このマンガだ！」と同じ、水色の丸いラベル） */
.info-card h1 {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 18px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: #ffffff;
  background: var(--aqua);
  border-radius: var(--radius-pill);
}

/* 「■〜について」の小見出し */
.info-card h2 {
  margin: 26px 0 6px;
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--aqua-dark);
  border-bottom: 2px solid var(--aqua-pale);
}

.info-card p {
  margin: 0 0 10px;
}

.info-card a {
  font-weight: 800;
  color: var(--aqua-ink);
  text-underline-offset: 3px;
}

/* 運営者・制定日など、文章の最後に添える行 */
.info-card .info-sign {
  margin-top: 26px;
  text-align: right;
}

/* ==== 端末で「動きを減らす」設定をしている人には、アニメーションを止める ==== */
@media (prefers-reduced-motion: reduce) {
  .result,
  .result *,
  .read-link {
    animation: none !important;
  }

  /* カットインは、飛び込まずにふわっと出し、揺れは小さくゆっくりにする（流れと時間は同じ） */
  .cutin[data-step="in"] .cutin-panel {
    animation: cutin-fade var(--cutin-in, 350ms) ease-out both;
  }

  .cutin[data-step="shake"] .cutin-frame {
    animation: rattle-soft 0.6s ease-in-out infinite;
  }

  .cutin[data-step="shake"] .cutin-gacha,
  .cutin[data-step="pon"] .cutin-pon {
    animation: cutin-fade 0.2s ease-out both;
  }

  .cutin[data-step="pon"] .cutin-pon::before {
    animation: none;
  }

  @keyframes cutin-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes rattle-soft {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(0.3cqw); }
  }
}