:root {
  --text: #efeaf7;
  --sub: #b3aac4;
  --dim: #9489a7;
  --seed: #fff4dc;
  --kb: 0px; /* スマホのキーボードの高さ */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #030208;
  color: var(--text);
  font-family: "Noto Sans JP", "BIZ UDPGothic", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  font-feature-settings: "palt";
  -webkit-tap-highlight-color: transparent;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 文字は庭の上に置く。光が重なっても読めるよう、文字のかたまりの後ろだけを暗くする。
   暗さは文字の外へ向かってなだらかに消し、四角い板には見せない */
.t { position: fixed; z-index: 5; text-shadow: 0 0 14px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); word-break: auto-phrase; text-wrap: pretty; }
.caption::before, .menu::before, .today::before, .walk::before, .hint::before, .ask::before, .rules::before, #demoHud::before {
  content: ""; position: absolute; inset: -40px -52px; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, 0.86);
  --fx: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.45) 20px, rgba(0, 0, 0, 0.85) 38px, #000 52px, #000 calc(100% - 52px), rgba(0, 0, 0, 0.85) calc(100% - 38px), rgba(0, 0, 0, 0.45) calc(100% - 20px), transparent);
  --fy: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.45) 16px, rgba(0, 0, 0, 0.85) 30px, #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0.85) calc(100% - 30px), rgba(0, 0, 0, 0.45) calc(100% - 16px), transparent);
  -webkit-mask-image: var(--fx), var(--fy); -webkit-mask-composite: source-in;
  mask-image: var(--fx), var(--fy); mask-composite: intersect;
}
.t p { margin: 0; }
.sub { color: var(--sub); }
body.cinema .ui, body.cinema #today, body.cinema #ask, body.cinema #caption, body.cinema #lead, body.cinema #menu, body.cinema #whisper, body.cinema #rules { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button.link { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(239, 234, 247, 0.45); }
button.link.sub { color: var(--sub); text-decoration: none; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 1px solid var(--sub); outline-offset: 4px; }
.sp { color: var(--dim); margin: 0 14px; }

/* 表題とメニュー */
.title { left: 28px; top: calc(28px + var(--safe-t)); font-size: 13px; letter-spacing: 0.22em; pointer-events: none; }
.title .sub { margin-top: 4px; font-size: 13px; letter-spacing: 0.12em; }
.menuBtn { right: 20px; top: calc(18px + var(--safe-t)); padding: 8px 10px; font-size: 20px; letter-spacing: 0.1em; color: var(--sub); }
.menu { right: 28px; top: calc(64px + var(--safe-t)); z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-size: 15px; letter-spacing: 0.06em; }
/* 高さの足りない画面（スマホの横向き）では、メニューの中だけスクロールする。縁はぼかす */
@media (max-height: 460px) {
  .menu::before { content: none; }
  .menu { max-height: calc(100dvh - 80px - var(--safe-t) - var(--safe-b)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 0, 0, 0.86); box-shadow: 0 0 36px 30px rgba(0, 0, 0, 0.86); scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
}
body:has(#menu:not([hidden])) :is(.ui:not(#menuBtn), #today, #ask, #caption, #rules, #lead, #hint, #hintRing, #whisper, #labels, #themeLabels, .note) { visibility: hidden; }
.menu .menuSep { width: 40px; height: 1px; margin: 4px 0; background: rgba(239, 234, 247, 0.25); }
.menu .minor { font-size: 14px; color: var(--sub); }
.mapLead { font-family: var(--serif); font-size: 20px; line-height: 1.9; letter-spacing: 0.04em; margin: 8px 0 26px !important; }
.mapLead b { font-weight: 400; color: #fff; }
.mapItem .m b { font-weight: 400; font-size: 16px; color: var(--text); letter-spacing: 0.08em; }
.homeBtn { position: fixed; left: 28px; bottom: calc(40px + var(--safe-b)); font-size: 14px; letter-spacing: 0.1em; }
/* 夜を進める：右下の月。種（中央）と同じ描き方の細い輪。押すと満ちてから、夜が降りる */
.moon { position: fixed; right: 28px; bottom: calc(34px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.moon svg { width: 64px; height: 64px; overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 236, 200, 0.55)); animation: moonGlow 4.5s ease-in-out infinite; }
.moon .ring { fill: rgba(0, 0, 0, 0.35); stroke: var(--seed); stroke-width: 1.2; opacity: 0.9; }
.moon .face { fill: var(--seed); opacity: 0.92; }
@keyframes moonGlow { 50% { filter: drop-shadow(0 0 16px rgba(255, 236, 200, 0.85)); } }
@media (prefers-reduced-motion: reduce) { .moon svg { animation: none; } }
.moon .fill { fill: var(--seed); opacity: 0; transform: scale(0.15); transform-origin: center; transition: opacity 0.6s ease, transform 0.6s ease; }
.moon.on .fill { opacity: 0.95; transform: scale(1); }
.moon:hover .ring { opacity: 1; }
.moon .word { font-size: 15px; color: var(--text); letter-spacing: 0.16em; white-space: nowrap; text-shadow: 0 0 8px #000, 0 0 2px #000; }
@media (max-width: 640px) { .moon { right: 22px; } }
/* 夜：上から暗さが降りる。朝：下から明るさが戻る（庭の上、文字の下） */
#dusk, #dawn { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
#dusk { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.1)); }
#dawn { background: linear-gradient(to top, rgba(255, 234, 196, 0.22), rgba(255, 234, 196, 0) 55%); }

/* 今日の一輪 */
.today { left: 32px; right: 32px; top: calc(118px + var(--safe-t)); max-width: 460px; }
.today .k { font-size: 14px; color: var(--sub); letter-spacing: 0.16em; }
.today .q { margin: 10px 0 14px; font-size: 18px; line-height: 1.85; white-space: pre-line; }
.today .a { font-size: 14px; letter-spacing: 0.08em; }

/* 刻む */
.ask { left: 32px; right: 32px; top: calc(118px + var(--safe-t)); max-width: 520px; }
.ask .k { display: block; font-size: 14px; color: var(--sub); letter-spacing: 0.1em; }
.ask .kind { margin: 0 0 10px; }
.ask .kind .link { font-size: 14px; }
.ask .kind .link.on { color: var(--ink); border-bottom: 1px solid rgba(239, 234, 247, 0.6); }
.ask.rum textarea { border-bottom-color: rgba(200, 80, 90, 0.6); }
.ask textarea {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0 0 10px;
  resize: none;
  border: 0;
  border-bottom: 1px solid rgba(239, 234, 247, 0.4);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 20px;
  line-height: 1.8;
  text-shadow: inherit;
}
.ask textarea:focus { outline: none; border-bottom-color: var(--text); }
.ask textarea::placeholder { color: var(--dim); }
.ask .w { margin-top: 18px; font-size: 15px; letter-spacing: 0.06em; min-height: 1.7em; }
.ask .w button[aria-pressed="false"] { color: var(--dim); }
.ask .w .dot { color: var(--dim); margin: 0 10px; }
.ask input {
  display: block; width: 100%; margin-top: 10px; padding: 0 0 6px; border: 0;
  border-bottom: 1px solid rgba(239, 234, 247, 0.3); background: none; color: var(--text); font: inherit; font-size: 15px;
}
.ask input:focus { outline: none; border-bottom-color: var(--text); }
.ask .n { margin-top: 10px; font-size: 14px; color: var(--sub); }
.ask .lp { margin-top: 12px; min-height: 1.7em; font-size: 14px; color: var(--sub); letter-spacing: 0.04em; white-space: pre-line; }
.ask .lp b { font-weight: 400; color: var(--text); }
/* 横に広い画面では、咲かせる種を書く欄のすぐ下に置く（位置は main.js が決める） */
.seedWrap.near { bottom: auto; transform: none; transition: none; align-items: flex-start; }
/* 高さの足りない横長画面では、書く欄と種を左右に分ける。詳細は欄の中だけスクロール。 */
.ask.sideSeed::before { content: none; }
.ask.sideSeed { right: auto; width: calc(100vw - 340px); max-width: 520px; top: calc(84px + var(--safe-t)); max-height: calc(100dvh - 108px - var(--safe-t) - var(--kb)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 0, 0, 0.86); box-shadow: 0 0 36px 30px rgba(0, 0, 0, 0.86); scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.seedWrap.side { width: 276px; align-items: center; }

/* 作品キャプション */
.caption { left: 40px; bottom: calc(180px + var(--safe-b)); width: min(440px, calc(100vw - 80px)); }
.caption .k { font-size: 14px; color: var(--sub); letter-spacing: 0.14em; }
.caption .k .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.caption .v { margin: 10px 0; font-size: 18px; line-height: 1.85; }
.caption .g { font-size: 14px; line-height: 1.8; color: var(--sub); white-space: pre-line; }
.caption .a { margin-top: 18px; font-size: 14px; }
@media (max-height: 600px) {
  .caption::before { content: none; }
  .caption { top: calc(76px + var(--safe-t)); bottom: auto; max-height: calc(100dvh - 100px - var(--safe-t) - var(--safe-b)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 0, 0, 0.86); box-shadow: 0 0 36px 30px rgba(0, 0, 0, 0.86); padding: 12px; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
  body:has(#caption:not([hidden])) #seedWrap { visibility: hidden; }
}
.lead { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.lead line { stroke: rgba(239, 234, 247, 0.35); stroke-width: 1; }

/* 種 */
.seedWrap { position: fixed; z-index: 5; left: 50%; bottom: calc(34px + var(--safe-b) + var(--kb)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: bottom 0.2s; }
.seed { width: 72px; height: 72px; touch-action: none; user-select: none; -webkit-user-select: none; }
.seed svg { width: 100%; height: 100%; overflow: visible; }
.seed .core { fill: var(--seed); transition: r 0.3s; }
.seed .halo { fill: none; stroke: rgba(255, 244, 220, 0.35); stroke-width: 1; }
.seed .ring { fill: none; stroke: var(--seed); stroke-width: 1.5; stroke-dasharray: 0 100; transform: rotate(-90deg); }
.seed.open .core { r: 9; }
.level { position: static; min-height: 1.4em; margin-bottom: 6px !important; font-size: 12px; letter-spacing: 0.5em; }
.seedCap { position: static; margin-top: 2px !important; font-size: 14px; color: var(--sub); letter-spacing: 0.16em; white-space: nowrap; }

/* 人の言葉は明朝、操作の文字はゴシック */
.today .q, .caption .v, #demoCaption, .aboutBody p, .ask textarea {
  font-family: var(--serif);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.today .q, .caption .v { max-width: 22em; }

/* 最初の手がかり：対象のそばに置く一行 */
#tagline { max-width: 26em; margin-top: 10px; line-height: 1.8; }
body:has(#ask:not([hidden])) #tagline { visibility: hidden; } /* 書く欄と重なるので、書いているあいだは隠す */
.whisper { left: 0; right: 0; bottom: calc(150px + var(--safe-b)); text-align: center; font-size: 14px; color: var(--sub); letter-spacing: 0.08em; pointer-events: none; transition: opacity 0.8s; }
.hint { z-index: 6; pointer-events: none; font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; max-width: min(340px, 84vw); width: max-content; text-align: center; transform: translate(-50%, -100%); transition: opacity 0.4s; }
.hint.below { transform: translate(-50%, 0); }
.hint.act { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(239, 234, 247, 0.45); }
/* 案内の的に置く光の輪（ゆっくり広がって消える） */
.hintRing { position: fixed; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid rgba(255, 236, 200, 0.85); pointer-events: none; animation: hintRing 2.2s ease-out infinite; }
@keyframes hintRing { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hintRing { animation: none; opacity: 0.6; } }
#menuWord { font-size: 12px; letter-spacing: 0.16em; vertical-align: 2px; }

/* 神経⇄花の説明 */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#themeLabels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#themeLabels p { position: absolute; margin: 0; transform: translate(-50%, -100%); white-space: nowrap; font-family: var(--serif); font-size: 18px; letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 14px #000, 0 0 4px #000; animation: themeIn 1.2s ease-out both; }
@keyframes themeIn { from { opacity: 0; } to { opacity: 0.92; } }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaders line { stroke: rgba(239, 234, 247, 0.4); stroke-width: 1; }
.lab { position: absolute; transform: translate(10px, -50%); white-space: nowrap; transition: opacity 0.3s; text-shadow: 0 0 12px #000, 0 0 4px #000, 0 0 2px #000; }
.lab.left { transform: translate(calc(-100% - 10px), -50%); text-align: right; }
.lab b { display: block; font-size: 16px; font-weight: 500; }
.lab span { display: block; font-size: 12px; color: var(--sub); }
.note { left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); width: min(560px, calc(100vw - 48px)); text-align: center; font-size: 14px; line-height: 1.9; }

/* 早送り */
#demoHud { left: 50%; bottom: calc(48px + var(--safe-b)); transform: translateX(-50%); text-align: center; pointer-events: none; width: min(760px, calc(100vw - 48px)); }
#demoHud button { pointer-events: auto; }
#demoDay { font-size: 40px; font-weight: 300; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
#demoCaption { margin-top: 4px !important; font-size: 16px; min-height: 1.8em; }

/* 見本を1枚ずつめくる：左下に、見出しと本文と「次へ」。庭は後ろで動き続ける */
.walk { left: 48px; bottom: calc(56px + var(--safe-b)); width: min(560px, calc(100vw - 96px)); }
.walk .k { font-size: 14px; color: var(--sub); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.walk .h { margin: 12px 0 10px !important; font-family: var(--serif); font-size: 30px; line-height: 1.5; letter-spacing: 0.06em; }
.walk .g { font-size: 17px; line-height: 1.9; }
.walk .a { margin-top: 22px !important; font-size: 16px; letter-spacing: 0.06em; }
#walk[data-step="eye"] { left: 50%; transform: translateX(-50%); bottom: calc(32px + var(--safe-b)); width: min(640px, calc(100vw - 48px)); text-align: center; }
#walk[data-step="eye"] .h { font-size: 22px; }
#walk[data-step="eye"] .a { justify-content: center; }

/* 締め */
#outroCard { left: 50%; bottom: calc(40px + var(--safe-b)); transform: translateX(-50%); text-align: center; width: min(640px, calc(100vw - 48px)); }
#oLead { font-size: 14px; color: var(--sub); letter-spacing: 0.08em; }
#oMain { font-size: 22px; margin: 8px 0 !important; }
#oSub { font-size: 15px; }
#outroCard .a { margin-top: 18px !important; font-size: 14px; }

/* この庭について：文字だけの覆い。庭は背景で薄く動き続ける */
.about { inset: 0; z-index: 7; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(7, 5, 13, 0.5); } /* 文字の後ろに薄い暗幕。花に寄った直後でも読める */
body.aboutOpen .ui, body.aboutOpen #today, body.aboutOpen #ask, body.aboutOpen #caption, body.aboutOpen #lead, body.aboutOpen #labels, body.aboutOpen .note { display: none !important; }
.aboutBody { text-shadow: 0 0 18px #000, 0 0 6px #000, 0 0 2px #000; }
.aboutClose { position: fixed; right: 24px; top: calc(20px + var(--safe-t)); font-size: 14px; }
.aboutBody { max-width: 32em; margin: 0 auto; padding: calc(88px + var(--safe-t)) 28px calc(96px + var(--safe-b)); }
.aboutBody h2 { margin: 0 0 40px; font-size: 16px; font-weight: 400; letter-spacing: 0.3em; }
.aboutBody .src { font-size: 14px; color: var(--sub); letter-spacing: 0.04em; }
.aboutBody h3 { margin: 40px 0 12px; font-size: 13px; font-weight: 400; color: var(--sub); letter-spacing: 0.2em; }
.aboutBody p { margin: 0 0 14px; font-size: 16px; line-height: 2; max-width: 22em; }
@media (max-width: 640px) { .aboutBody p { font-size: 15px; } }

/* 記録をたどる：新しい順の一覧。月ごとに見出し */
#listQuery { display: block; width: 100%; max-width: 22em; margin: 0 0 8px; padding: 6px 0; font: inherit; font-family: var(--serif); font-size: 16px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid rgba(239, 234, 247, 0.35); outline: none; }
#listQuery:focus { border-bottom-color: rgba(239, 234, 247, 0.8); }
.listItem .m .near { margin-left: auto; }
.listBody h3 { margin: 34px 0 8px; font-size: 13px; font-weight: 400; color: var(--sub); letter-spacing: 0.2em; }
.listItem { display: block; width: 100%; text-align: left; padding: 14px 0; border-top: 1px solid rgba(239, 234, 247, 0.12); }
.listItem:first-of-type { border-top: 0; }
.listItem .m { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sub); letter-spacing: 0.12em; }
.listItem .m .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.listItem .v { margin: 6px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.8; letter-spacing: 0.04em; max-width: 22em; }
.listItem.faded .v { color: var(--sub); }
.listItem:hover .v, .listItem:focus-visible .v { color: #fff; }
body.aboutOpen #list, body.listOpen #about, body.aboutOpen #map { display: none; }
body.listOpen .ui, body.listOpen #today, body.listOpen #ask, body.listOpen #caption, body.listOpen #lead, body.listOpen #labels, body.listOpen .note { display: none !important; }

/* 導入：瞳の上に文字だけを置く */
#intro { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#intro button { pointer-events: auto; }
#introTitle { position: absolute; left: 0; right: 0; top: calc(9vh + var(--safe-t)); margin: 0; text-align: center; font-size: 22px; font-weight: 400; letter-spacing: 0.3em; transition: opacity 0.8s; }
.introText { position: absolute; left: 24px; right: 24px; bottom: calc(8vh + var(--safe-b)); text-align: center; }
/* 文字の後ろだけを薄く暗くして、瞳の繊維の上でも読めるようにする */
.introText::before { content: ""; position: absolute; left: 50%; bottom: -36px; width: min(820px, 120vw); height: 190px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(3, 2, 8, 0.82) 0%, rgba(3, 2, 8, 0.55) 38%, rgba(3, 2, 8, 0) 72%); pointer-events: none; z-index: -1; }
/* 導入の文は字幕のように一行ずつ：同じ場所に重ね、ぼけた状態から浮かび上がり、次の行が来ると上へ消える */
.cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto !important; max-width: 32em; font-size: 19px; line-height: 1.9; letter-spacing: 0.1em; text-shadow: 0 0 18px rgba(3, 2, 8, 0.95), 0 0 4px rgba(3, 2, 8, 0.9); opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 0.9s ease, filter 0.9s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cap.on { opacity: 1; filter: blur(0); transform: none; }
.cap.past { opacity: 0; filter: blur(4px); transform: translateY(-10px); transition-duration: 0.6s; }
#introBtns { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; margin-top: 26px !important; font-size: 16px; letter-spacing: 0.08em; transition: opacity 0.6s; }
#introBtns .sp { display: none; }
@media (max-height: 600px) and (min-width: 641px) {
  #introBtns { flex-direction: row; }
}
/* 初めての人には、チュートリアルと庭をはじめるを同じ強さの枠で並べる（前に書いたことがある人には、チュートリアルは控えめ） */
#introStart, #introSkip:not(.sub) { min-width: 17em; padding: 13px 30px; border: 1px solid rgba(239, 234, 247, 0.55); font-size: 16px; text-decoration: none; transition: background 0.3s, border-color 0.3s; }
#introStart:hover, #introSkip:not(.sub):hover { background: rgba(239, 234, 247, 0.08); border-color: rgba(239, 234, 247, 0.85); }
#introSilent { min-height: 44px; padding: 10px 18px; font-size: 15px; }
#introFast { position: absolute; top: calc(18px + var(--safe-t)); right: 20px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 3px; background: rgba(7, 5, 13, 0.46); font-size: 14px; letter-spacing: 0.06em; }
#introFast:hover { background: rgba(239, 234, 247, 0.1); color: var(--text); }
#intro.gone { display: none; }
#veil { position: fixed; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }

@media (max-width: 640px) {
  .title { left: 24px; }
  .today, .ask { left: 28px; right: 28px; }
  .caption { left: 32px; width: calc(100vw - 64px); }
  .cap { font-size: 17px; max-width: 15em; }
  #oMain { font-size: 19px; }
  #oSub { font-size: 14px; }
  .caption .v, .today .q { font-size: 17px; }
  #demoCaption { font-size: 15px; }
  .walk { left: 24px; width: calc(100vw - 48px); bottom: calc(36px + var(--safe-b)); }
  .walk .h { font-size: 23px; }
  .walk .g { font-size: 15px; }
}

/* 言葉が花になる：光の粒にほどけて流れ込む文字 */
.wordFx { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.wordFx span { position: absolute; left: 0; top: 0; color: var(--text); white-space: pre; will-change: transform, opacity; transition: color 0.4s, text-shadow 0.4s; }
.wordFx span.lit { color: #ffe9c4; text-shadow: 0 0 12px rgba(255, 214, 160, 0.95), 0 0 4px #fff; }

/* あなたの庭の地図：庭を真上から見せたまま、右（スマホは下）に一覧を重ねる */
.mapPanel { top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 7; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, rgba(7, 5, 13, 0), rgba(7, 5, 13, 0.82) 22%); }
.mapPanel .aboutBody { max-width: none; padding: calc(84px + var(--safe-t)) 32px calc(64px + var(--safe-b)) 64px; }
.mapPanel .aboutClose { position: absolute; right: 24px; top: calc(20px + var(--safe-t)); }
@media (max-width: 640px), (orientation: portrait) {
  .mapPanel { top: auto; left: 0; width: auto; height: 50vh; background: linear-gradient(to bottom, rgba(7, 5, 13, 0), rgba(7, 5, 13, 0.88) 14%); }
  .mapPanel .aboutBody { padding: 48px 28px calc(40px + var(--safe-b)); }
  .mapPanel .aboutClose { top: 16px; }
}

/* 花を長押しして思い出す：指のまわりで光が満ちていく輪（--k が 0→1） */
.pressRing { --k: 0; position: fixed; z-index: 6; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(255, 228, 184, 0.95) calc(var(--k) * 360deg), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: radial-gradient(circle, transparent 33px, #000 34px); mask: radial-gradient(circle, transparent 33px, #000 34px);
  filter: drop-shadow(0 0 6px rgba(255, 214, 160, 0.8)); }

/* 風のキャプション：「続きを書く」と「ちがう」が並ぶときの間 */
.caption .a #cRecall:not([hidden]) + #cDeny:not([hidden]) { margin-left: 18px; }

/* 起動中：題名はすぐ出し、瞳の場所に淡い光を置いておく。ボタンは準備ができてから出す（押しても何も起きない時間をなくす） */
#introTitle { animation: titleIn 1.2s ease-out; }
@keyframes titleIn { from { opacity: 0; } to { opacity: 1; } }
body.booting #introBtns { opacity: 0; pointer-events: none; }
#intro::before { content: ""; position: absolute; left: 50%; top: 50%; width: 38vmin; height: 38vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(201, 184, 255, 0.2), rgba(201, 184, 255, 0) 70%); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
body.booting #intro::before { opacity: 1; animation: bootPulse 2.4s ease-in-out infinite; }
@keyframes bootPulse { 0%, 100% { transform: translate(-50%, -50%) scale(0.92); } 50% { transform: translate(-50%, -50%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #introTitle, body.booting #intro::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cap, .cap.past { filter: none; transform: none; } }
/* 記録を消すボタンは、ふだんの操作から少し離して小さく */
.caption .cdel { margin-top: 14px; font-size: 14px; }

/* シェアする：瞳の一枚を大きく見せ、横（スマホでは下）に選ぶ言葉と「シェア」 */
.sharePanel { inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 48px; padding: calc(32px + var(--safe-t)) 40px calc(32px + var(--safe-b)); background: rgba(3, 2, 8, 0.86); }
.sharePanel img { display: block; max-height: min(86vh, 900px); max-width: 52vw; height: auto; box-shadow: 0 0 0 1px rgba(239, 234, 247, 0.12); }
.shareSide { width: min(360px, 34vw); }
.shareSide .k { font-family: var(--serif); font-size: 22px; line-height: 1.6; letter-spacing: 0.06em; }
.shareSide .g { margin-top: 12px !important; font-size: 15px; line-height: 1.9; color: var(--sub); }
.shareSide .opt { margin-top: 26px !important; font-size: 15px; }
.shareSide .opt .link[aria-pressed="false"] { color: var(--sub); text-decoration: none; }
.shareSide .a { margin-top: 26px !important; font-size: 16px; }
#shareStatus { min-height: 1.9em; }
@media (max-height: 600px) {
  .sharePanel { align-items: flex-start; overflow-y: auto; }
  .sharePanel img { max-height: calc(100dvh - 64px); }
}
@media (max-width: 640px), (orientation: portrait) {
  .sharePanel { flex-direction: column; justify-content: flex-start; gap: 22px; overflow-y: auto; padding-top: calc(24px + var(--safe-t)); }
  .sharePanel img { max-width: 100%; max-height: 62vh; }
  .shareSide { width: 100%; }
  .shareSide .k { font-size: 19px; }
}

/* この庭のきまり：書きはじめる前に3行だけ（書く欄と同じ位置） */
.rules { left: 32px; right: 32px; top: calc(118px + var(--safe-t)); max-width: 560px; }
.rules .k { font-size: 14px; color: var(--sub); letter-spacing: 0.16em; }
.rules .rl { margin: 14px 0 0; padding-left: 1.6em; font-family: var(--serif); font-size: 21px; line-height: 1.9; letter-spacing: 0.04em; }
.rules .rl li::marker { color: var(--sub); }
.rules .a { margin-top: 24px !important; font-size: 16px; letter-spacing: 0.06em; }
@media (max-width: 640px) { .rules { left: 28px; right: 28px; } .rules .rl { font-size: 18px; } }
.aboutBody .tools { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.today .n { margin-top: 12px !important; font-size: 14px; letter-spacing: 0.04em; }

/* ボタン：主な操作は、タイトル画面と同じ細い枠の四角。補助の操作は文字のまま、指で押せる広さにする */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 26px; border: 1px solid rgba(239, 234, 247, 0.55); background: rgba(3, 2, 8, 0.45); color: var(--text); font-size: 16px; line-height: 1.4; letter-spacing: 0.08em; text-decoration: none; text-shadow: none; transition: background 0.3s, border-color 0.3s; }
.btn:hover { background: rgba(239, 234, 247, 0.1); border-color: rgba(239, 234, 247, 0.9); }
.btn:active { background: rgba(239, 234, 247, 0.16); }
/* ボタンのある行は、区切りの「／」を消して、間をあけて並べる */
.a:has(.btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.a:has(.btn) .sp { display: none; }
#outroCard .a:has(.btn) { justify-content: center; }
.today .a, .caption .a, #outroCard .a { font-size: 16px; }
.a button.link, .n button.link, .goHome, .homeBtn, .aboutClose { padding-top: 10px; padding-bottom: 10px; }
.menu { font-size: 16px; gap: 2px; }
.menu button { padding: 10px 0; }
.menu .minor { font-size: 15px; }

/* チュートリアルの書き方の練習：本物の書く欄と同じ下線の上に書き、ボタンを押し続けると帯が満ちて咲く */
.walk .wp { margin-top: 16px; }
.walk .wp textarea { display: block; width: 100%; padding: 0 0 8px; resize: none; border: 0; border-bottom: 1px solid rgba(239, 234, 247, 0.4); background: none; color: var(--text); font: inherit; font-family: var(--serif); font-size: 19px; line-height: 1.7; text-shadow: inherit; }
.walk .wp textarea:focus { outline: none; border-bottom-color: var(--text); }
.walk .wp textarea::placeholder { color: var(--dim); }
.walk .wph { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px !important; font-size: 15px; }
.btn.hold { touch-action: none; user-select: none; -webkit-user-select: none; background: linear-gradient(to right, rgba(255, 236, 200, 0.3) var(--p, 0%), rgba(3, 2, 8, 0.45) var(--p, 0%)); }

/* 初見テスト：専用URLで開いたときだけ現れる終了ボタンと回答画面 */
.studyFinish { position: fixed; z-index: 10; left: 18px; bottom: calc(18px + var(--safe-b)); min-height: 44px; padding: 8px 14px; border: 1px solid rgba(239, 234, 247, 0.3); background: rgba(3, 2, 8, 0.72); color: var(--sub); font-size: 14px; letter-spacing: 0.05em; }
.studyFinish:hover { color: var(--text); border-color: rgba(239, 234, 247, 0.65); }
body.study-panel-open .studyFinish { display: none; }
body.study-mode .homeBtn { bottom: calc(94px + var(--safe-b)); }
.studyPanel { position: fixed; inset: 0; z-index: 12; overflow-y: auto; overscroll-behavior: contain; background: rgba(3, 2, 8, 0.96); color: var(--text); }
.studyBody { width: min(680px, calc(100% - 48px)); margin: 0 auto; padding: calc(64px + var(--safe-t)) 0 calc(80px + var(--safe-b)); }
.studyClose { position: fixed; top: calc(16px + var(--safe-t)); right: 20px; min-height: 44px; padding: 9px 12px; }
.studyKicker { margin: 0 0 8px; color: var(--sub); font-size: 14px; letter-spacing: 0.16em; }
.studyBody h2 { margin: 0; font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); font-weight: 400; line-height: 1.55; letter-spacing: 0.04em; }
.studyPrivacy { max-width: 42em; margin: 14px 0 42px; color: var(--sub); font-size: 15px; line-height: 1.9; }
.studyBody form > label, .studyBody legend { display: block; margin: 32px 0 10px; font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.studyBody textarea { display: block; width: 100%; min-height: 94px; padding: 10px 0; resize: vertical; border: 0; border-bottom: 1px solid rgba(239, 234, 247, 0.38); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.8; }
.studyBody textarea:focus { border-bottom-color: var(--text); outline-offset: 5px; }
.studyBody textarea::placeholder { color: var(--dim); }
.studyBody fieldset { margin: 32px 0 0; padding: 0; border: 0; }
.studyBody fieldset legend { margin: 0 0 10px; }
.studyBody fieldset label { display: block; min-height: 42px; padding: 8px 0; color: var(--sub); font-size: 16px; cursor: pointer; }
.studyBody input[type="radio"] { width: 18px; height: 18px; margin: 0 10px 0 0; accent-color: #e4d8ff; vertical-align: -3px; }
.studyActions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 42px; }
#studyStatus { margin: 0; color: var(--sub); font-size: 14px; }
@media (max-width: 640px) {
  .studyFinish { left: 14px; bottom: calc(14px + var(--safe-b)); }
  .studyBody { width: min(100% - 40px, 680px); padding-top: calc(58px + var(--safe-t)); }
  .studyPrivacy { margin-bottom: 32px; }
  .studyBody form > label, .studyBody legend { font-size: 17px; }
}


/* ---- スマホ（縦）：文字を一回り小さく、説明は画面の下に収め、庭が見えるようにする ----
   iPhone の「表示を拡大」だと幅320前後になるので、そこまで崩れないように合わせる */
body:has(#rules:not([hidden])) #tagline, body:has(#rules:not([hidden])) #seedWrap { visibility: hidden; } /* きまりを出しているあいだは、説明の一行と「書く」を隠す（重ならない） */
.seed, .btn.hold, #scene { -webkit-touch-callout: none; } /* 長押しで、文字の選択や拡大鏡が出ないように */
@media (max-width: 480px) {
  html, body { font-size: 14px; }
  .title { right: 96px; font-size: 12px; letter-spacing: 0.16em; }
  .title .sub { font-size: 12px; letter-spacing: 0.06em; line-height: 1.6; }
  body:has(#rules:not([hidden])) #count, body:has(#ask:not([hidden])) #count { visibility: hidden; } /* きまりや書く欄と重なるので、そのあいだは花の数の行を隠す */
  .walk { left: 20px; width: calc(100vw - 40px); bottom: calc(18px + var(--safe-b)); }
  .walk .g { max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; } /* 本文だけを中で動かし、「次へ」はいつも見える */
  .walk .k { font-size: 12px; letter-spacing: 0.08em; }
  .walk .h { margin: 6px 0 6px !important; font-size: 20px; }
  .walk .g { font-size: 14px; line-height: 1.75; }
  .walk .a { margin-top: 12px !important; font-size: 15px; }
  .walk .wp textarea { font-size: 16px; }
  .rules { left: 22px; right: 22px; top: calc(96px + var(--safe-t)); }
  .rules .rl { font-size: 16px; line-height: 1.8; }
  .rules .a { margin-top: 18px !important; }
  .today, .ask { left: 22px; right: 22px; }
  .caption { left: 22px; width: calc(100vw - 44px); bottom: calc(150px + var(--safe-b)); }
  .caption .v, .today .q { font-size: 16px; }
  .caption .g { font-size: 13px; }
  .cap { font-size: 16px; }
  /* 夜のあいだの文字：小さく画面のいちばん下へ。暗い帯も細くして、花にかぶせない */
  #demoHud { bottom: calc(10px + var(--safe-b)); width: calc(100vw - 28px); }
  #demoHud::before { inset: -14px -18px; }
  #demoDay { font-size: 22px; }
  #demoCaption { font-size: 13px; line-height: 1.7; }
  #demoHud button { font-size: 13px; }
  #oMain { font-size: 18px; }
  #outroCard { width: calc(100vw - 32px); bottom: calc(24px + var(--safe-b)); }
  .btn { min-height: 44px; padding: 9px 20px; font-size: 15px; }
  .a:has(.btn) { gap: 8px 20px; }
  #introStart, #introSkip:not(.sub) { min-width: 15em; }
}
/* 背の低い画面（Safari のバーで見える高さが減るとき）：説明の枠は中で上下に動かして読む */
@media (max-width: 480px) and (max-height: 620px) {
  .walk .g { max-height: 24dvh; }
  .walk .wp { margin-top: 8px; }
  .ask { top: calc(78px + var(--safe-t)); }
  .ask textarea { margin-top: 8px; font-size: 17px; line-height: 1.6; }
  .ask .w { margin-top: 10px; font-size: 13px; }
  .seedWrap { bottom: calc(14px + var(--safe-b) + var(--kb)); }
  .seed { width: 60px; height: 60px; }
  .walk .h { font-size: 18px; }
  .rules { top: calc(80px + var(--safe-t)); }
  .rules .rl { font-size: 15px; }
  .caption { max-height: calc(100dvh - 240px); overflow-y: auto; }
}