/* ====== ベース ====== */
:root{
  --bg: #ffffff;
  --ink: #111111;
  --vermillion: #b00000; /* 朱っぽい */
  --maxw: 420px;         /* スマホ専用の気持ち */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

.app{
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* ====== 画面切替 ====== */
.screen{
  position: absolute;
  inset: 0;
  padding: 14px 16px calc(18px + var(--safe-bottom));
  display: none;
}
.screen.is-active{ display: block; }

.center{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;

}
.btn-omikuji{
  pointer-events: auto;   /* ←追加 */
}

/* 待機画面 */
.omikuji-illust{
  width: min(82vw, 360px);
  height: auto;
  display: block;
}

/* 下部のボタンエリア */
.bottom{
  width: 100%;
  display: grid;
  place-items: center;
}

/* 神社っぽい横長ボタン（模様はCSSで作る） */
.btn-omikuji{
  width: 70%;
  max-width: 360px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  background:
    /* 模様：薄い和柄っぽい斜線 */
    repeating-linear-gradient(
      45deg,
      rgba(176,0,0,0.08) 0px,
      rgba(176,0,0,0.08) 6px,
      rgba(255,255,255,0.0) 6px,
      rgba(255,255,255,0.0) 14px
    ),
    #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  touch-action: manipulation;
}
.btn-omikuji:active{
  transform: translateY(1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

/* 演出画面（回転） */
.omikuji-spin{
  width: min(70vw, 280px);
  height: auto;
  display: block;

  margin-top: 15vh;   /* ← タイトル画像と同系統の下げ方 */

  animation: spin 2.5s linear infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.10));
}
@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(540deg); }
}

/* 結果画面：紙 */
.paper{
  width: min(86vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  position: relative;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  overflow: hidden;
}

/* 結果の紙：出現演出（大きく・ゆっくり） */
.paper{
  opacity: 0;
  transform: translateY(-160px) scale(0.95);
  animation: paper-in 1.5s cubic-bezier(.15,.85,.25,1) forwards;
}

@keyframes paper-in{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 紙の縁取り（画像がなくても成立する） */
.paper::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 2px solid rgba(176,0,0,0.35);
  pointer-events: none;
}
.paper::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.03), transparent 38%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.03), transparent 38%);
  pointer-events: none;
}

.paper-inner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px 22px;
  text-align: center;
  font-family: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  color: var(--vermillion);
}

.result-title{
  font-size: 66px;              /* 約1.5倍（元44px） */
  line-height: 2.4;
  letter-spacing: 0.04em;
  margin-bottom: 14px;

  font-family:
    "Hiragino Maru Gothic ProN",
    "Hiragino Maru Gothic Pro",
    "Arial Rounded MT Bold",
    system-ui,
    -apple-system,
    sans-serif;

  color: var(--vermillion);
}
.result-desc{
  font-size: 21px;              /* 約1.5倍（元14px） */
  line-height: 1.8;
  opacity: 0.95;
  max-width: 22em;

  font-family:
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif;
}

/* 戻る（小さめ・ゴシック・黒） */
.link-back{
  margin-top: 14px;
  font-size: 20px;
  color: #111;
  background: transparent;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  touch-action: manipulation;
  opacity: 0.78;
}
.link-back:active{ opacity: 1; }

/* 画面が横に広い端末でも“スマホっぽい”ままにする */
@media (min-width: 768px){
  body{ background: #f6f6f6; }
  .app{ background: #fff; }
}
/* 戻るボタンがタップ不能になる事故対策 */
.link-back{
  position: relative;
  z-index: 9999;
}
/* ===== 戻るボタンが反応しない問題の対策 ===== */

/* 結果画面の中央ブロックがタップを奪う事故を防ぐ */
#screen-result .paper,
#screen-result .paper-inner,
#screen-result .result-title,
#screen-result .result-desc {
  pointer-events: none;
}

/* 戻るボタンだけは必ずタップ可能＆最前面に */
#screen-result .link-back {
  pointer-events: auto;
  position: relative;
  z-index: 999999;
}
/* ===== タイトル画像サイズ調整 ===== */
.title-image {
  width: 60% !important;
  height: auto;
  max-width: 360px;
  display: block;
  margin: 12vh auto 0;
}
/* ===== 待機画面：ボタン調整 ===== */
#screen-idle .btn-omikuji{
  margin-top: -80px;
  font-size: 150%;
  padding: 20px 20px;
    border: 2px solid rgba(0,0,0,.35);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.06) inset,
    0 1px 0 rgba(0,0,0,.12);
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.03),
    rgba(0,0,0,.03) 2px,
    transparent 2px,
    transparent 6px
  );
}
/* ===== おみくじボタン：押した感 ===== */

/* 通常状態 */
#screen-idle .btn-omikuji{
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.08s ease;
}

/* 押した瞬間（iPhoneは :active が効く） */
#screen-idle .btn-omikuji:active{
  transform: translateY(3px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset;
  filter: brightness(0.95);
}

/* JS制御の押した感（強め・視認優先） */
#screen-idle.is-pressed .btn-omikuji{
  transform: translateY(8px) scale(0.94);
  filter: brightness(0.88);
  box-shadow:
    0 8px 12px rgba(176,0,0,0.3) inset;
}
#screen-idle .btn-omikuji{
  transition:
    transform 0.12s cubic-bezier(.2,.8,.2,1),
    filter 0.12s ease,
    box-shadow 0.12s ease;
}

/* 結果文字：最初は非表示 */
.result-title,
.result-desc{
  opacity: 0;
  transform: translateY(6px);
}

/* 結果文字：遅れて表示 */
.paper .result-title{
  animation: text-in 0.4s ease forwards;
  animation-delay: 1s;
}

.paper .result-desc{
  animation: text-in 0.4s ease forwards;
  animation-delay: 1.5s;
}

@keyframes text-in{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 戻るリンク：最初は非表示 */
#screen-result .link-back{
  opacity: 0;
  transform: translateY(6px);
}

/* 戻るリンク：遅れて表示 */
#screen-result .link-back{
  animation: text-in 0.4s ease forwards;
  animation-delay: 2.5s;
}

/* 結果紙フッター */
.result-footer{
  margin-top: auto;          /* 下に押しやる */
  padding-top: 12px;
  font-size: 16px;           /* 解説より小さめ */
  color: #111;               /* 黒 */
  opacity: 0;
  transform: translateY(6px);

  animation: text-in 0.4s ease forwards;
  animation-delay: 2.5s;

  font-family:
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif;
}
/* ====== 結果画面のレイアウト崩れ修正（最優先） ====== */
/* 結果画面だけ：紙（.paper）とボタン（.link-back）を縦に積む */
#screen-result .center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  /* ここで全体を下げる（紙と同じ雰囲気に） */
  padding-top: 10vh;
}

/* paper-in アニメで translateY(10vh) してるので、ここは 0 にして重なりを減らす */
@keyframes paper-in{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 紙は上、ボタンは下（順番固定） */
#screen-result .paper{ order: 1; }
#screen-result .link-back{ order: 2; margin-top: 0; }

/* ついでに：ボタンが紙に被らないよう余白を少し確保（好みで調整） */
#screen-result .link-back{
  padding-top: 8px;
}
/* ===== 崩れの根本治療：結果画面だけ paper をレイアウトに乗せる ===== */
#screen-result .paper{
  position: relative;   /* absolute をやめる */
}

/* ===== 結果画面：最終安定レイアウト ===== */

/* 結果画面全体：縦積み */
#screen-result .center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 4vh;
}

/* 紙 */
#screen-result .paper{
  position: relative;
}

/* 紙の中身：gridで安定配置 */
#screen-result .paper-inner{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 28px 22px;
}

/* フッター：紙の一番下 */
.result-footer{
  grid-row: 4;
  font-size: 16px;
  color: #111;
  opacity: 0;
  transform: translateY(6px);
  animation: text-in 0.4s ease forwards;
  animation-delay: 2.5s;
}
/* =================================================
   RESULT SCREEN - FINAL OVERRIDE（ここから下が勝つ）
   ================================================= */

/* 結果画面：縦に「紙 → ボタン」を積む。位置はここで決める */
#screen-result .center{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;

  /* ここで全体の高さを決める：紙をもう少し下げたいなら増やす */
  padding-top: 10vh !important;
}

/* 紙：レイアウトの主役。ここでは“位置”だけ担当 */
#screen-result .paper{
  position: relative !important;
  margin: 0 !important;
}

/* 紙の中身：absoluteで紙いっぱいに広げて、gridで配置 */
#screen-result .paper-inner{
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  justify-items: center !important;
  align-items: center !important;
  padding: 28px 22px !important;
  text-align: center !important;
}

/* フッターは最下段 */
#screen-result .result-footer{
  grid-row: 4 !important;
  margin: 0 !important;
}

/* ボタンは紙の外（下） */
#screen-result .link-back{
  margin: 0 !important;
  padding: 70px 14px !important;
  z-index: 9999 !important;
}

/* 出現アニメ：最終位置は transform(0) で固定（レイアウトと混ぜない） */
@keyframes paper-in{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 紙の出現：動きは“見た目だけ” */
#screen-result .paper{
  opacity: 0;
  transform: translateY(-60px) scale(0.95);
  animation: paper-in 1.5s cubic-bezier(.15,.85,.25,1) forwards;
}