/* 今日のおみくじ（js/omikuji.js が組み立てる）
   色はページの色（--shu 朱・--mori 森・--sumi 墨）を使う。ないときは同じ色を直に使う。 */
.omikuji {
  --o-shu: var(--shu, #CF3F23);
  --o-sumi: var(--sumi, #22282B);
  --o-muted: var(--muted, #5B6468);
  --o-paper: #FFFCF6;
  --o-mincho: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
}

/* ---------- 引く前: みくじ筒とボタン ---------- */
.omikuji-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.omikuji-box svg { display: block; overflow: visible; }
.omikuji-box .body { fill: var(--o-shu); }
.omikuji-box .side { fill: #000; opacity: .14; }
.omikuji-box .rim { fill: #A8301A; }
.omikuji-box .stick { fill: #D9BC8C; stroke: #B8955E; stroke-width: 1; transform: translateY(26px); transition: transform .35s ease .55s; }
.omikuji-box .label { text-anchor: middle; fill: #fff; font-family: var(--o-mincho); font-size: 30px; font-weight: 700; }
.omikuji-box.shake svg { animation: omikuji-shake .9s ease-in-out; transform-origin: 50% 90%; }
.omikuji-box.shake .stick { transform: translateY(-18px); }
@keyframes omikuji-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  35% { transform: rotate(12deg); }
  55% { transform: rotate(-9deg); }
  75% { transform: rotate(6deg); }
}
.omikuji-draw { min-width: 220px; }
.omikuji-note { margin: 0; font-size: 12.5px; color: var(--o-muted); text-align: center; }

/* ---------- 引いたあと: 縦書きの紙 ---------- */
.omikuji-result { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.omikuji-slip {
  /* 上の段と下の段を、それぞれ縦書きにして縦に並べる */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 360px; padding: 18px 12px 16px;
  background: var(--o-paper); color: var(--o-sumi);
  font-family: var(--o-mincho);
  border: 2px solid var(--o-shu);
  box-shadow: inset 0 0 0 4px var(--o-paper), inset 0 0 0 5px var(--o-shu), 0 6px 18px rgba(34, 40, 43, .10);
}
.slip-upper, .slip-lower, .slip-extra {
  /* 列の長さ（height）を、余白を引かずにそのまま使う（ページ全体は border-box なので、ここだけ戻す） */
  box-sizing: content-box;
  writing-mode: vertical-rl;
  /* 縦書きの 1 列の長さ。これを超えると次の列（左）へ送る */
  line-height: 1.75;
  max-width: 100%;
}
/* 縦書きの中では、ふつうの並び（ブロック）が右から左への列になる。列の間は margin-block-start で空ける */
.slip-upper { height: 19.5em; font-size: 15px; }   /* いちばん長い一句（18 字）が 1 列に収まる長さ */
.slip-lower { height: 17em; font-size: 14px; padding-top: 12px; border-top: 1px solid rgba(207, 63, 35, .35); }
.slip-head { text-align: center; }
.slip-head p, .slip-upper > p, .slip-lower > p { margin: 0; }
.slip-no { font-size: 13px; letter-spacing: .12em; color: var(--o-muted); }
.slip-grade { font-size: 46px; font-weight: 700; line-height: 1.15; letter-spacing: .1em; color: var(--o-shu); margin-block: .15em !important; }
.level-caution .slip-grade { color: var(--o-sumi); }
.slip-date { font-size: 12px; color: var(--o-muted); letter-spacing: .05em; }
.slip-verse { font-weight: 700; letter-spacing: .04em; margin-block-start: .7em !important; }
.slip-words { margin-block-start: .5em !important; }
.slip-items { margin: 0; }
.slip-item { margin: 0; }
.slip-item + .slip-item { margin-block-start: .15em; }
.slip-item dt { display: inline; font-weight: 700; color: var(--o-shu); }
.level-caution .slip-item dt { color: var(--o-sumi); }
.slip-item dt::after { content: '　'; }
.slip-item dd { display: inline; margin: 0; }
.slip-color { margin-block-start: .6em !important; }
.slip-color-label { font-weight: 700; color: var(--o-shu); }
.slip-color-name rt { font-size: .5em; letter-spacing: .05em; color: var(--o-muted); }
.slip-color .chip { display: inline-block; width: 1em; height: 1em; margin-inline: .35em; border-radius: 50%; box-shadow: 0 0 0 1px rgba(34, 40, 43, .25); vertical-align: middle; }

/* ---------- 変わり種 ---------- */
/* 紙のいちばん上の札（横書き） */
.slip-tag {
  writing-mode: horizontal-tb; display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 3px 12px; border-radius: 2px; background: var(--o-shu); color: #fff;
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
}
.slip-tag svg { display: block; }
/* 鯛みくじの「釣果」、狛犬みくじの「阿」「吽」の段 */
.slip-extra { writing-mode: vertical-rl; height: 15em; margin: 0; font-size: 14px; line-height: 1.75; padding-top: 12px; border-top: 1px solid rgba(207, 63, 35, .35); }
.slip-extra .slip-item + .slip-item { margin-block-start: .4em; }
.slip-extra dt { display: inline; font-weight: 700; color: var(--o-shu); }
.slip-extra dt::after { content: '　'; }
.slip-extra dd { display: inline; margin: 0; }
.special-komainu .slip-extra dt { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.5em; text-align: center; border: 1.5px solid var(--o-shu); border-radius: 50%; margin-block-end: .3em; }
.special-komainu .slip-extra dt::after { content: none; }

/* 大大吉: 金の枠 */
.special-daidaikichi { --o-gold: #A67C1E; border-color: var(--o-gold); background: linear-gradient(180deg, #FFFBEE, #FFF4D6);
  box-shadow: inset 0 0 0 4px #FFFBEE, inset 0 0 0 5px var(--o-gold), 0 6px 22px rgba(166, 124, 30, .25); }
.special-daidaikichi .slip-tag { background: var(--o-gold); }
.special-daidaikichi .slip-grade { text-shadow: 0 1px 0 #fff, 0 0 18px rgba(214, 170, 60, .55); }
/* 平: 静かな墨の枠 */
.special-hei { border-color: #5E6A70; box-shadow: inset 0 0 0 4px var(--o-paper), inset 0 0 0 5px #5E6A70, 0 6px 18px rgba(34, 40, 43, .10); }
.special-hei .slip-tag { background: #4F5A60; }
.special-hei .slip-grade { color: var(--o-sumi); }
/* 恋みくじ: 桜色の紙 */
.special-koi { --o-koi: #B83B55; border-color: var(--o-koi); background: #FFF5F6;
  box-shadow: inset 0 0 0 4px #FFF5F6, inset 0 0 0 5px var(--o-koi), 0 6px 18px rgba(184, 59, 85, .15); }
.special-koi .slip-tag { background: var(--o-koi); }
.special-koi .slip-grade, .special-koi .slip-item dt, .special-koi .slip-color-label { color: var(--o-koi); }
.special-koi .slip-lower { border-top-color: rgba(184, 59, 85, .35); }
/* 水みくじ: 水色の紙。はじめは字が薄く、「水に浮かべる」で浮かぶ */
.special-mizu { --o-mizu: #2F6690; border-color: var(--o-mizu); background: #F2F7FA;
  box-shadow: inset 0 0 0 4px #F2F7FA, inset 0 0 0 5px var(--o-mizu), 0 6px 18px rgba(47, 102, 144, .15); position: relative; overflow: hidden; }
.special-mizu .slip-tag { background: var(--o-mizu); }
.special-mizu .slip-upper, .special-mizu .slip-lower { transition: opacity 2.4s ease, filter 2.4s ease; }
.mizu-hidden .slip-upper, .mizu-hidden .slip-lower { opacity: .06; filter: blur(1px); }
.mizu-reveal::after {
  /* 水の輪がひろがる */
  content: ''; position: absolute; left: 50%; top: 45%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid rgba(47, 102, 144, .45); box-shadow: 0 0 0 18px rgba(47, 102, 144, .08), 0 0 0 40px rgba(47, 102, 144, .05);
  animation: omikuji-ripple 1.8s ease-out both; pointer-events: none;
}
@keyframes omikuji-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(9); opacity: 0; } }
button.omikuji-float { min-width: 220px; background: #2F6690; border-color: #2F6690; }
/* 鯛みくじ: 札に鯛の絵 */
.special-tai .slip-tag svg { color: #fff; }

/* 幅の狭い iPhone（320px など）では、下の段の 10 列が収まるように少し小さくする */
@media (max-width: 359px) {
  .omikuji-slip { padding-inline: 8px; }
  .slip-lower { font-size: 12.5px; line-height: 1.6; }
  .slip-upper { font-size: 14px; }
  .slip-grade { font-size: 40px; }
}

/* 紙がひらく動き（右から左へ） */
.omikuji-slip.unfold { animation: omikuji-unfold .9s cubic-bezier(.2, .7, .2, 1) backwards;   /* 終わったら clip-path を残さない（影が切れないように） */ }
@keyframes omikuji-unfold {
  from { clip-path: inset(0 0 0 100%); opacity: .3; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .omikuji-box.shake svg, .omikuji-slip.unfold, .mizu-reveal::after { animation: none; }
  .special-mizu .slip-upper, .special-mizu .slip-lower { transition: none; }
  .omikuji-box .stick { transition: none; }
}