/* 言葉の庭 — 苔色・生成り・土。他アプリの配色と混ぜないこと。 */
:root {
  --ground-top: #efede3;
  --ground-bottom: #e2e3d3;
  --moss: rgba(158, 174, 138, .22);
  --ink: #3f4638;
  --ink-soft: #57604c;
  --ink-faint: #8b9182;
  --paper: #f7f5eb;
  --line: #e0dccb;
  --leaf: #7d8b6a;
  --btn: #6d7d5c;
  --btn-ink: #f4f2e6;

  /* 出典タイプの差し色 */
  --src-book: #4a6fa0;
  --src-heard: #a07c3a;
  --src-own: #a05561;

  /* 花の中心。差し色ではなく、どの出典でも共通の芯 */
  --bloom-center: #f6ecd0;

  /* 書き込む面。本文欄・メモ欄・検索欄・鍵の表示に共通で使う */
  --paper-write: #fffdf6;
  --line-soft: #e6e2d2;

  /* 選ばれている状態（出典チップ・絞り込みチップ） */
  --chip-on-bg: #e7eadc;
  --chip-on-line: #b9c3a4;
  --chip-on-ink: #4a5340;

  /* 花の庭。野原より明るく、苔も濃い */
  --bloom-ground-top: #f7f5eb;
  --bloom-ground-bottom: #eceada;
  --bloom-moss: rgba(206, 214, 184, .5);
  --bloom-moss-soft: rgba(206, 214, 184, .42);

  /* 石の縁。大小と濃淡の2種類を持たせて、同じ石が並ばないようにする。
     影は土に埋まっている感じを出すためのもので、落とす影ではない。 */
  --stone: #c6c4ae;
  --stone-soft: #d3d1bd;
  --stone-shade: rgba(120, 122, 96, .18);
  --stone-lit: rgba(255, 253, 243, .5);
  --ledge-bottom: #e7e6d5;

  /* 水やりの演出 */
  --drop: #8fb4d4;
  --ripple: #9fb98a;
  --soil-wet: #6f7a58;
  --soil-wet-fade: rgba(111, 122, 88, .35);

  /* 道具の面（言葉の一覧）。庭ではなく実用側の色 */
  --tool-bg: #f7f6ef;
  --tool-bar: #f2f0e6;
  --tool-bar-line: #e5e2d4;
  --tool-row-line: #eceadd;
  --memo-bg: #efece0;
  --panel-line: #e4e0d0;

  /* 画面の道具（歯車など）。文字のインクとは役割が違うので別に持つ */
  --icon: #5c6350;

  /* 訪問者（蝶）。庭の土や葉ではなく「外から来たもの」なので、
     苔色・生成りのどれとも違う色を1つだけ持たせている。 */
  --visitor-wing: #c9b6d4;
  --visitor-body: #7c7086;

  /* 影 */
  --shadow-btn: rgba(60, 70, 45, .32);
  --shadow-panel: rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  color: var(--ink);
  background: var(--ground-bottom);
  /* 素早い連打をダブルタップ拡大と誤認識させない（bungo-rpg と同じ対処） */
  touch-action: manipulation;
  /* 横には決してはみ出さない。1pxのはみ出しでも実機では画面全体が横に
     ずれて「幅がおかしい」状態になり、原因も分かりにくい。 */
  overflow-x: hidden;
}

/* 庭は必ず画面の高さを満たす。種が0〜1件でも野原の模様が途中で切れないよう、
   最後の区画（野原）が余りを吸う。高さは buildField が min-height で下限だけ与える。 */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.bloom-field { flex: none; }
.field { flex: 1 0 auto; }

/* --- 野原 --- */
.field {
  position: relative;
  background: linear-gradient(var(--ground-top), var(--ground-bottom));
}

/* 苔の模様。
   【区画の背景に直接置いてはいけない】
   円は要素の外まで広がるので、上端・下端で切り取られて水平の切り口ができる。
   花の庭と野原の継ぎ目では、それが「あからさまな境目」として見えた
   （石の縁の見た目が悪いという指摘の正体は、石ではなくこの線だった）。
   別の層に分け、区画の端に向かって苔そのものを薄れさせて逃がす。 */
.field::before,
.bloom-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.field::before {
  background:
    radial-gradient(circle at 24% 8%,  var(--moss) 0 12%, transparent 26%),
    radial-gradient(circle at 76% 30%, var(--moss) 0 10%, transparent 24%),
    radial-gradient(circle at 34% 62%, var(--moss) 0 12%, transparent 26%);
}

.seed {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* 演出（しずく・輪・濡れた土・咲く光）は芽の中心に出す。芽の幅は区画で違うので
   変数にして、位置の計算をひとつにまとめてある。 */
.field { --plant-w: 26px; }
.bloom-field { --plant-w: 40px; }

.seed-plant {
  width: var(--plant-w, 26px);
  aspect-ratio: 20 / 40;
  flex: none;
}

/* 言葉。2行までで打ち切り、最後の文字を薄れさせて続きの存在を示す。
   「…」のような記号は出さない。 */
.seed-text {
  writing-mode: vertical-rl;
  line-height: 1.34;
  letter-spacing: .05em;
  font-size: 15px;
  color: var(--ink-soft);
  max-height: 132px;
  max-width: 42px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, #000 74%, transparent 100%);
          mask-image: linear-gradient(to left, #000 74%, transparent 100%);
}

/* 収まりきる短い言葉には薄れを掛けない */
.seed-text.is-whole {
  -webkit-mask-image: none;
          mask-image: none;
}

/* 芽と言葉は別々の当たり判定を持つ（芽＝水をやる、言葉＝ひらく）。
   ボタンだが、見た目は素の要素と変わらないようにする。

   【font: inherit と書いてはいけない】
   これは一括指定のため font-size と line-height まで inherit に戻してしまい、
   上で .seed-text に与えた 15px / 1.34 を打ち消す。実機では 16px で描画され、
   1行あたり5〜6文字しか入らないのに is-whole が付いて薄れも出ず、
   短い言葉が黙って途中で切れた。ボタンに要るのは書体の継承だけである。 */
.seed-plant-btn,
.seed-text {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.seed-plant-btn {
  /* 指で押せる大きさを確保する。見た目は変えない */
  padding: 6px 4px;
  margin: -6px -4px;
  line-height: 0;
}

/* --- 種を蒔く --- */
.plus-btn {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 50px; height: 50px;
  border: 0; border-radius: 50%;
  background: var(--btn);
  box-shadow: 0 3px 12px var(--shadow-btn);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.plus-btn::before,
.plus-btn::after {
  content: ""; position: absolute; background: var(--btn-ink); border-radius: 2px;
}
.plus-btn::before { width: 18px; height: 2.4px; }
.plus-btn::after  { width: 2.4px; height: 18px; }

.sheet {
  position: fixed; inset: 0;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center;
  z-index: 10;
  /* 文字を大きくすると縦に伸びるので、届かない部分が出ないようここが巻き取る */
  overflow-y: auto;
  padding-bottom: 24px;
}

/* 本文の枠は狭く保つ。広いと「埋めなければ」という圧が出る。 */
.sheet-text {
  margin-top: 30px;
  width: 178px; height: 232px;
  background: var(--paper-write);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 10px;
  writing-mode: vertical-rl;
  font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: .06em;
  color: var(--ink);
  resize: none;
}

.sheet-memo {
  width: 262px; margin-top: 14px;
  background: var(--paper-write);
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 9px 11px;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink-soft);
  resize: none; min-height: 60px;
}

.sheet-kinds { display: flex; gap: 7px; margin-top: 14px; }
.sheet-kind {
  font: inherit; font-size: 14px;
  padding: 8px 16px; border-radius: 20px;
  border: 1px solid var(--line); background: none; color: var(--ink-faint);
  cursor: pointer;
}
.sheet-kind[aria-pressed="true"] {
  background: var(--chip-on-bg); border-color: var(--chip-on-line); color: var(--chip-on-ink);
}

/* 【margin-top: auto で画面下端に貼り付けてはいけない】
   .sheet は fixed inset:0 なので、下端はスマホの「画面の高さ」の下端になる。
   文字を打つとソフトキーボードが下半分を覆うため、貼り付けたボタンはその裏に
   隠れて押せなくなる（実機で「蒔くボタンがかなり下にある」と指摘された）。
   入力のすぐ下に置けば、キーボードが出ていても視界に残る。 */
.sheet-submit {
  margin-top: 22px; margin-bottom: 8px;
  padding: 13px 44px; border: 0; border-radius: 26px;
  background: var(--btn); color: var(--btn-ink);
  font: inherit; font-size: 16.5px; letter-spacing: .18em;
  cursor: pointer;
}
.sheet-submit:disabled { opacity: .4; cursor: default; }

.sheet-close {
  position: absolute; left: 14px; top: 14px;
  width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 24px; line-height: 1;
}

/* 蒔いた直後、ふわりと生える */
@keyframes sprout {
  0%   { opacity: 0; transform: scale(.25) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.14) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.seed.is-sprouting { animation: sprout .55s ease-out; transform-origin: left bottom; }

/* --- 水をやる --- */
/* しずく */
@keyframes drop-fall {
  0%   { opacity: 0; transform: translate(-50%, -10px) scale(.6); }
  30%  { opacity: .85; transform: translate(-50%, 0) scale(1); }
  80%  { opacity: .85; transform: translate(-50%, 16px) scale(.9); }
  100% { opacity: 0; transform: translate(-50%, 20px) scale(.5); }
}
.drop {
  position: absolute; left: calc(var(--plant-w) / 2); top: 4px;
  width: 6px; height: 8px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--drop);
  animation: drop-fall .5s ease-in forwards;
  pointer-events: none;
}

/* 土に広がる輪 */
@keyframes ripple-out {
  0%   { opacity: 0; transform: translateX(-50%) scale(.4); }
  40%  { opacity: .5; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.6); }
}
.ripple {
  position: absolute; left: calc(var(--plant-w) / 2); bottom: -4px;
  width: 22px; height: 7px;
  border: 1.4px solid var(--ripple); border-radius: 50%;
  animation: ripple-out .6s ease-out forwards;
  pointer-events: none;
}

/* 濡れた土。乾ききるまでが取り消せる時間。
   秒数を出さずに残り時間を伝えるのがこの表現の役目。 */
@keyframes soil-dry {
  0%   { opacity: 0; }
  8%   { opacity: .55; }
  30%  { opacity: .5; }
  90%  { opacity: .06; }
  100% { opacity: 0; }
}
.wet-soil {
  position: absolute; left: calc(var(--plant-w) / 2); bottom: -3px;
  width: 34px; height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--soil-wet) 0%, var(--soil-wet-fade) 62%, transparent 78%);
  animation: soil-dry var(--undo-ms, 5000ms) ease-out forwards;
  pointer-events: none;
}

/* --- 詳細・編集 --- */
.detail {
  position: fixed; inset: 0; z-index: 20;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 30px;
  overflow-y: auto;
}
/* 言葉は画面の中ほどに置く。上に詰めると、短い言葉ほど画面の隅に貼り付いて見え、
   読むための画面にならない。.detail-acts の margin-top:auto と2つで余った縦の
   空きを分け合うので、言葉はボタンより上の空間の中央に来る。内容が画面より
   長いときは余りが無くなり、auto は 0 になって従来どおり上から流れる。 */
.detail-full,
.detail-edit { margin-top: auto; }

.detail-full {
  writing-mode: vertical-rl;
  font-size: 16px; line-height: 1.68; letter-spacing: .07em;
  color: var(--ink);
  max-height: 292px;
}
.detail-edit {
  writing-mode: vertical-rl;
  width: 186px; height: 292px; flex: none;
  background: var(--paper-write); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 10px;
  font: inherit; font-size: 16px; line-height: 1.6; letter-spacing: .06em;
  color: var(--ink); resize: none;
}
.detail-memo {
  width: 262px; margin-top: 22px;
  background: var(--memo-bg); border-radius: 9px; padding: 12px 14px;
  font-size: 14px; line-height: 1.62; color: var(--ink-soft);
}
.detail-memo-edit {
  width: 262px; margin-top: 22px;
  background: var(--paper-write); border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.62; color: var(--ink-soft);
  resize: none; min-height: 66px;
}
.detail-meta { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); letter-spacing: .07em; }
.detail-acts { display: flex; gap: 10px; margin: auto 0 24px; padding-top: 26px; }
.detail-act {
  font: inherit; font-size: 14.5px;
  padding: 10px 22px; border-radius: 20px;
  border: 1px solid var(--line); background: none; color: var(--ink-soft);
  cursor: pointer;
}
/* 取り消せない操作だが、警告色は使わない。同じ言葉で聞き返すだけにする。 */
.detail-confirm { margin: auto 0 24px; text-align: center; }
.detail-confirm p { font-size: 15px; color: var(--ink); margin: 0 0 14px; }

/* --- 花の庭（上）と野原（下） --- */
/* 花の庭は明るく、間隔が広い。同じ花をやや大きく描くが、
   これは区画ごとの表示倍率であって情報ではない。 */
.bloom-field {
  position: relative;
  background: linear-gradient(var(--bloom-ground-top), var(--bloom-ground-bottom));
}
.bloom-field::before {
  background:
    radial-gradient(circle at 28% 16%, var(--bloom-moss) 0 20%, transparent 42%),
    radial-gradient(circle at 74% 50%, var(--bloom-moss-soft) 0 18%, transparent 40%);
}
.bloom-field .seed-text { font-size: 18px; max-height: 170px; max-width: 50px; }

/* 石の縁。触ると花の庭と野原を行き来できる。文字の見出しは置かない。

   【同じ石を等間隔で並べてはいけない】
   はじめは 33px 間隔の repeat-x で同じ楕円を敷いていた。規則的な繰り返しと、
   上下の区画との色の段差が重なって、庭に貼った帯にしか見えなかった
   （実機で「境目があからさま」と指摘された）。石は数を減らして大きさ・
   間隔・濃さを不揃いにし、背景は上の区画の色から下の区画の色へ通しでつなぐ。 */
.ledge {
  position: relative;
  height: 46px;
  width: 100%;
  border: 0; padding: 0;
  /* 上は花の庭の地色、下は野原の地色。どちらの境目にも切れ目を作らない。 */
  background: linear-gradient(
    var(--bloom-ground-bottom) 0%,
    var(--ledge-bottom) 52%,
    var(--ground-top) 100%);
  cursor: pointer;
  display: block;
}
/* 石そのもの。大小・濃淡・沈み具合をすべて変えてある。 */
.ledge::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 16px 6.5px at 11% 60%, var(--stone) 0 66%, transparent 100%),
    radial-gradient(ellipse  9px 4px   at 26% 52%, var(--stone-soft) 0 70%, transparent 100%),
    radial-gradient(ellipse 21px 7.5px at 43% 64%, var(--stone) 0 64%, transparent 100%),
    radial-gradient(ellipse  8px 3.5px at 60% 50%, var(--stone-soft) 0 72%, transparent 100%),
    radial-gradient(ellipse 17px 6px   at 74% 62%, var(--stone) 0 66%, transparent 100%),
    radial-gradient(ellipse 12px 5px   at 91% 55%, var(--stone-soft) 0 68%, transparent 100%);
}
/* 石の下側の土（埋まって見せるための影）と、上側の当たり（光）。
   影だけだと染みに見え、光だけだと浮いて見えるので、両方を薄く置く。 */
.ledge::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 11px 2.5px at 10% 52%, var(--stone-lit) 0 60%, transparent 100%),
    radial-gradient(ellipse 14px 3px   at 42% 56%, var(--stone-lit) 0 60%, transparent 100%),
    radial-gradient(ellipse 12px 2.5px at 73% 54%, var(--stone-lit) 0 60%, transparent 100%),
    radial-gradient(ellipse 17px 4px   at 11% 70%, var(--stone-shade) 0 60%, transparent 100%),
    radial-gradient(ellipse 22px 4px   at 43% 74%, var(--stone-shade) 0 60%, transparent 100%),
    radial-gradient(ellipse 18px 3.5px at 74% 72%, var(--stone-shade) 0 60%, transparent 100%);
  pointer-events: none;
}
/* 野原にいる間、石の縁は上端に張り付いて残る（触れば一息で花の庭へ戻れる） */
/* 上端に張り付いている間だけは「今いる場所の縁」なので、下側は野原の色で止める
   （張り付いた状態で下へグラデーションを続けると、画面上端に帯が浮いて見える）。 */
.ledge.is-sticky { position: sticky; top: 0; z-index: 5; }
.ledge.is-sticky { background: linear-gradient(var(--bloom-ground-bottom) 0%, var(--ledge-bottom) 62%, var(--ground-top) 100%); }

/* --- 言葉の一覧 --- */
/* ここは探すための道具。庭が縦書きなのに対し、あえて横書きにする
   （縦書きは一覧の拾い読みに向かない）。 */
.list { position: fixed; inset: 0; z-index: 20; background: var(--tool-bg); display: flex; flex-direction: column; }
.list-bar { background: var(--tool-bar); padding: 12px 14px 10px; border-bottom: 1px solid var(--tool-bar-line); }
.list-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-write); border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 13px;
}
.list-search input {
  border: 0; background: none; outline: none; flex: 1;
  font-family: system-ui, sans-serif; font-size: 16px; color: var(--ink);
}
.list-chips { display: flex; gap: 6px; margin-top: 10px; }
.list-chip {
  font-family: system-ui, sans-serif; font-size: 13px;
  padding: 6px 13px; border-radius: 15px;
  border: 1px solid var(--line); background: none; color: var(--ink-faint); cursor: pointer;
}
.list-chip[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-line); color: var(--chip-on-ink); }
.list-sort {
  display: flex; justify-content: flex-end; margin-top: 9px;
  font-family: system-ui, sans-serif; font-size: 12.5px;
}
.list-sort select {
  border: 0; background: none; color: var(--ink-faint);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.list-rows { flex: 1; overflow-y: auto; }
.list-row {
  display: flex; gap: 11px; width: 100%;
  padding: 14px 15px; border: 0; border-bottom: 1px solid var(--tool-row-line);
  background: none; text-align: start; cursor: pointer; align-items: flex-start;
}
.list-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.list-body { flex: 1; min-width: 0; }
.list-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 15px; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-meta {
  margin-top: 5px; font-family: system-ui, sans-serif; font-size: 12px;
  color: var(--ink-faint); display: flex; align-items: center; gap: 6px;
}
.list-meta .seed-plant { width: 9px; }
.list-empty { padding: 60px 30px; text-align: center; font-size: 14.5px; color: var(--ink-faint); line-height: 1.9; }

/* --- 設定・庭の鍵 --- */
.gear-btn {
  position: fixed; right: 15px; top: 14px; z-index: 6;
  width: 34px; height: 34px; padding: 6px;
  border: 0; background: none; cursor: pointer; opacity: .42;
}
.gear-btn svg { width: 100%; display: block; }

.panel {
  position: fixed; left: 14px; right: 14px; top: 52px; z-index: 25;
  background: var(--paper); border-radius: 14px; padding: 8px 0;
  box-shadow: 0 4px 18px var(--shadow-panel);
}
.panel button {
  display: block; width: 100%; text-align: start;
  padding: 12px 18px; border: 0; background: none;
  font: inherit; font-size: 15px; color: var(--ink-soft); letter-spacing: .05em;
  cursor: pointer;
}
.panel button[aria-pressed="true"] { color: var(--ink); background: var(--tool-row-line); }
.panel hr { border: 0; height: 1px; background: var(--panel-line); margin: 4px 0; }
.panel-scrim { position: fixed; inset: 0; z-index: 24; background: transparent; border: 0; }

.key-screen {
  position: fixed; inset: 0; z-index: 30; background: var(--paper);
  overflow-y: auto; overflow-x: hidden; padding: 14px 18px 40px;
}
/* 閉じるは見出し行に置く。float にすると本文が回り込んで文字に重なる。 */
.key-head { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.key-head .sheet-close { position: static; }
.key-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: .06em; color: var(--ink);
  background: var(--paper-write); border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 10px; text-align: center; margin: 14px 0; user-select: all;
  /* 鍵は24文字ある。等幅書体の幅は端末によって違うので、入りきらない端末では
     折り返させる。折り返さないと枠から溢れて画面ごと横にずれる。 */
  overflow-wrap: anywhere;
}
.key-note { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.key-qr { display: flex; justify-content: center; margin: 18px 0; }
.key-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.key-input {
  width: 100%; margin-top: 8px;
  font: inherit; font-size: 16px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-write);
}

/* --- はじめて使うとき --- */
.first-ask {
  position: fixed; inset: 0; z-index: 15;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 30px;
}
.first-ask p { font-size: 17px; line-height: 2; color: var(--ink); text-align: center; margin: 0; }
.first-ask .detail-act { padding: 12px 30px; }

/* 「触っていい」の合図。はじめの一度だけ出し、二度目からは静かなまま。 */
@keyframes beckon {
  0%, 55%  { transform: rotate(0deg); }
  63%      { transform: rotate(-6deg); }
  71%      { transform: rotate(5deg); }
  79%      { transform: rotate(-3deg); }
  87%, 100%{ transform: rotate(0deg); }
}
.seed.is-beckoning .seed-plant-btn {
  animation: beckon 2.6s ease-in-out 2;
  transform-origin: bottom center;
  display: inline-block;
}

/* --- 庭の気配（風・訪問者） --- */
/* 風。数十秒に一度、左から右へ抜ける。順に遅らせる値は ambient.js が
   --sway-delay で渡す。全部が同時に動くと、風ではなく機械仕掛けに見える。 */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.6deg); }
  60%      { transform: rotate(1.8deg); }
  82%      { transform: rotate(-0.8deg); }
}
.seed.is-swaying .seed-plant-btn {
  animation: sway 3s ease-in-out var(--sway-delay, 0ms);
  transform-origin: bottom center;
  display: inline-block;
}

/* 言葉は芽より控えめに。読んでいる最中に大きく動くと読めない。 */
@keyframes sway-text {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-1.6px); }
  70%      { transform: translateX(1px); }
}
.seed.is-swaying .seed-text { animation: sway-text 3s ease-in-out var(--sway-delay, 0ms); }

/* 訪問者。数分に一度、画面を横切るだけ。得点も収集もない。 */
.visitor {
  position: fixed; left: -24px; z-index: 4;
  width: 16px; cursor: pointer;
  --wing: var(--visitor-wing);
  --wing-body: var(--visitor-body);
  animation: cross-field linear forwards;
}
.visitor svg { width: 100%; display: block; animation: flutter .5s ease-in-out infinite; }
/* とまっている間は横切る動きだけ止め、羽はゆっくり動かし続ける */
.visitor.is-resting { animation-play-state: paused; }
.visitor.is-resting svg { animation-duration: 1.8s; }
@keyframes cross-field {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(28vw, -14px); }
  50%  { transform: translate(52vw, 10px); }
  75%  { transform: translate(78vw, -8px); }
  100% { transform: translate(112vw, 4px); }
}
@keyframes flutter {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.5); }
}

/* 咲いた一度だけ、花の芯から淡い光が広がる。画面を占める演出にはしない。 */
@keyframes bloom-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
.bloom-flash {
  position: absolute; left: calc(var(--plant-w) / 2); top: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, var(--bloom-center) 0%, transparent 70%);
  animation: bloom-flash .9s ease-out forwards;
  pointer-events: none;
}

/* 水をやった芽が一度だけうなずく。手応えを返すためのもの。 */
@keyframes nod {
  0%, 100% { transform: scale(1) translateY(0); }
  45%      { transform: scale(.92) translateY(2px); }
}
.seed.is-nodding .seed-plant-btn {
  animation: nod .4s ease-out;
  transform-origin: bottom center;
  display: inline-block;
}

/* 動きを減らす設定の端末では、気配を一切出さない。 */
@media (prefers-reduced-motion: reduce) {
  .seed.is-swaying .seed-plant-btn,
  .seed.is-swaying .seed-text,
  .seed.is-nodding .seed-plant-btn,
  .visitor,
  .visitor svg { animation: none; }
  .visitor { display: none; }
}