/* ============================================================
   おみくじ — 画面の組み立て
   トークンとベース部品のみを参照する。生の値は書かない。
   ============================================================ */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5) var(--space-10);
}

.wrap { width: 100%; max-width: 440px; }


/* ── 見出し ─────────────────────────────────────────────── */

.head { text-align: center; margin-bottom: var(--space-8); }

.head__date { margin-bottom: var(--space-3); }

.head__title {
  font-size: var(--size-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest);
  line-height: var(--leading-tight);
}

.head .ds-rule { margin-top: var(--space-4); }


/* ── 御籤筒 ─────────────────────────────────────────────── */

.draw {
  position: relative;
  display: flex;
  justify-content: center;
  height: 224px;
  margin-bottom: var(--space-2);
}

.tsutsu {
  position: relative;
  align-self: flex-end;
  width: 104px;
  height: 208px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
  font: inherit;
  color: var(--fg-default);
  cursor: pointer;
  /* 六角柱の面 */
  background:
    linear-gradient(90deg,
      rgb(0 0 0 / .40)       0    7%,
      rgb(255 255 255 / .05) 7%  27%,
      rgb(255 255 255 / .13) 27% 45%,
      rgb(0 0 0 / .10)       45% 63%,
      rgb(0 0 0 / .26)       63% 81%,
      rgb(0 0 0 / .46)       81% 100%),
    var(--surface-vessel);
  box-shadow: var(--shadow-raised);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.tsutsu:hover { transform: translateY(-5px); }

/* 筒口 */
.tsutsu::before {
  content: "";
  position: absolute;
  inset: -7px var(--space-2) auto var(--space-2);
  height: 15px;
  border-radius: 50%;
  background: var(--surface-vessel-in);
  box-shadow: inset 0 -3px 5px rgb(0 0 0 / .70), 0 1px 0 rgb(255 255 255 / .14);
}

/* 金の帯（下と、影で上にもう一本） */
.tsutsu::after {
  content: "";
  position: absolute;
  inset: auto 0 var(--space-6) 0;
  height: 7px;
  background: var(--fg-metal);
  opacity: .8;
  box-shadow: 0 -104px 0 var(--fg-metal);
}

.tsutsu__title {
  display: block;
  margin: var(--space-8) auto 0;
  font-size: var(--size-lg);
  letter-spacing: var(--tracking-kanji);
  text-shadow: 0 1px 2px rgb(0 0 0 / .55);
}

.tsutsu.is-shaking { animation: shake var(--dur-shake) var(--ease-shake); }

@keyframes shake {
  0%, 100% { transform: rotate(0) translate(0, 0); }
  15% { transform: rotate(-13deg) translate(-6px, -10px); }
  35% { transform: rotate(11deg)  translate(7px, -4px); }
  55% { transform: rotate(-10deg) translate(-5px, -11px); }
  75% { transform: rotate(8deg)   translate(5px, -3px); }
  90% { transform: rotate(-4deg)  translate(0, -2px); }
}


/* ── 御籤棒 ─────────────────────────────────────────────── */

.stick {
  position: absolute;
  left: 50%;
  bottom: var(--space-1);
  margin-left: 62px;
  width: 30px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-stick);
  color: var(--fg-on-paper);
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  transform: translate(-26px, 34px) rotate(-16deg);
  pointer-events: none;
}

.stick__no {
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wider);
}

.stick.is-out { animation: eject var(--dur-slow) var(--ease-pop) forwards; }

@keyframes eject {
  0%   { opacity: 0; transform: translate(-26px, 34px) rotate(-16deg); }
  60%  { opacity: 1; transform: translate(0, -14px) rotate(9deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(6deg); }
}


/* ── 案内文 ─────────────────────────────────────────────── */

.hint {
  text-align: center;
  font-size: var(--size-3xs);
  margin-bottom: var(--space-6);
  transition: opacity var(--dur-mid);
}


/* ── 御籤 ───────────────────────────────────────────────── */

.slip {
  /* 紙の高さ＝一列の長さ。内側と外側で必ず一致させる。 */
  --slip-height: min(56vh, 384px);
  position: relative;
  height: 0;
  overflow: hidden;
  background: var(--surface-paper);
  color: var(--fg-on-paper);
  box-shadow: var(--shadow-overlay);
  transition: height var(--dur-shake) var(--ease-standard);
}

.slip.is-open { height: var(--slip-height); }

/* 縦組みではブロックが右から左へ積まれる。その流れに任せるので
   flex は使わない（vertical-rl では row の主軸が縦になり、列が
   横ではなく縦に積み上がってしまう）。 */
.slip__inner {
  width: 100%;
  height: var(--slip-height);
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* 列間の余白は left / right で指定する。この紙は常に縦組みなので、
   論理プロパティの padding-inline は上下（＝行方向）に効いてしまう。 */
.col {
  opacity: 0;
  animation: ink var(--dur-slow) var(--ease-standard) forwards;
  animation-delay: calc(var(--i) * 90ms + 240ms);
}

@keyframes ink {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

.col--no {
  font-family: var(--face-gothic);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-on-paper-muted);
  padding-left: var(--space-3);
}

.col--fortune {
  font-size: var(--size-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-on-paper-accent);
  padding-left: var(--space-4);
  border-left: var(--border-hairline);
}

.col--verse {
  font-size: var(--size-md);
  line-height: var(--leading-tate);
  letter-spacing: var(--tracking-normal);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  max-height: 100%;
}

/* 項目はまとめて一つの塊に流し込む。縦組みの折り返しが、
   必要なだけ列を作ってくれる。 */
.col--items {
  height: 100%;
  font-size: var(--size-md);
  letter-spacing: var(--tracking-normal);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-left: var(--border-dotted);
}

/* inline-block なので、一項目が二列に割れることはない。 */
.entry {
  display: inline-block;
  margin-bottom: 1.9em;
}

.entry:last-child { margin-bottom: 0; }

.entry .ds-label--paper {
  display: inline-block;
  font-weight: 400;
  margin-bottom: .9em;
}


/* ── 朱印 ───────────────────────────────────────────────── */

/* 一列目（番号）と運勢は上半分しか使わないので、その下の余白に押す。
   本文とは重ならない。 */
.seal {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wider);
  color: var(--seal-color);
  border: 2.5px solid var(--seal-color);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: rotate(-7deg) scale(1.9);
}

.slip.is-open .seal {
  animation: stamp var(--dur-mid) var(--ease-stamp) 950ms forwards;
}

@keyframes stamp {
  from { opacity: 0; transform: rotate(-7deg) scale(1.9); }
  to   { opacity: var(--seal-opacity); transform: rotate(-7deg) scale(1); }
}


/* ── もう一度 ───────────────────────────────────────────── */

.again {
  margin-top: var(--space-5);
  opacity: 0;
  pointer-events: none;
  /* .ds-button の transition を上書きするので、色の変化もここで持つ */
  transition: opacity var(--dur-mid) 800ms,
              background var(--dur-fast),
              border-color var(--dur-fast);
}

.again.is-shown { opacity: 1; pointer-events: auto; }


/* ── 狭い画面 ───────────────────────────────────────────
   左右の余白を詰め、紙を縦に伸ばす。一列が長くなるぶん列数が
   減り、横スクロールなしで収まる。
   ここはファイル末尾に置くこと。同じ詳細度なので、上書きされる
   側（.slip など）より後になければ効かない。               */

@media (max-width: 400px) {
  body { padding-inline: var(--space-3); }
  .slip { --slip-height: min(64vh, 460px); }
}