/* EXTANT ─ 40億年をつなぐ血筋 */
:root {
  --bg: #05070b;
  --ink: #ece8df;
  --ink2: rgba(236, 232, 223, .66);
  --ink3: rgba(236, 232, 223, .42);
  --line: rgba(236, 232, 223, .12);
  --glass: rgba(9, 13, 19, .82);
  --glass2: rgba(14, 19, 27, .82);
  --me: #f2c35b;
  --c1: #6fd3ff;
  --c2: #ff8aa8;
  --c3: #a6f08a;
  --danger: #ff6a4d;
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  --latin: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --r: 14px;
  --gut: 24px;
  /* 左右のパネルの幅と、その内側（中央の表示を置ける範囲）の端 */
  --pw: clamp(250px, 24vw, 300px);
  --side: calc(var(--gut) + var(--pw) + 16px);
  /* 画面に固定した要素の下端を、見えている高さ（svh）の下端にそろえる量。
     iOS 26 の Safari は、固定した要素の入れ物が下のツールバーの裏まで伸び、下端が隠れることがある。
     固定した要素の bottom の％は入れ物の高さに対する割合なので、入れ物と svh の差だけ上げる。PC や古い iOS では 0 になる */
  --tb: max(0px, calc(100% - 100svh));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
a { color: var(--ink2); }
sup { font-size: .6em; }

/* ── 全体 ── */
#app { position: fixed; inset: 0; bottom: var(--tb); background: radial-gradient(120% 90% at 60% 40%, #0b1420 0%, #05070b 60%); }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.hud, .panel, .timeline, .tabs, .imagine { transition: opacity .6s ease; }
#app.is-title .hud, #app.is-title .panel, #app.is-title .timeline, #app.is-title .tabs, #app.is-title .imagine { opacity: 0; pointer-events: none; }

.kicker { font-size: 11px; letter-spacing: .14em; color: var(--ink3); }
.sci { font-family: var(--latin); font-style: italic; font-size: 16px; color: var(--ink2); letter-spacing: .02em; }

/* ── 上の帯 ── */
#top { position: absolute; top: max(16px, env(safe-area-inset-top)); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; z-index: 5; }
#top > * { pointer-events: auto; }
.age { font-family: var(--serif); font-feature-settings: "palt"; font-weight: 600; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; letter-spacing: .02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.eras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eras span { font-size: 11px; padding: 2px 9px 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; }
.eras span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* 分かれ道で伏せた札（まだ見つけていない道）と、選んだ札がめくれて正体が出るところ */
.sil.q { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 50%; font-family: var(--serif); font-size: 26px; color: var(--me); -webkit-mask: none; mask: none; background: none; }
.dec-opts.revealing .opt:not(.picked) { opacity: .25; transition: opacity .3s; }
.opt.flip { animation: cardFlip .55s cubic-bezier(.2, .7, .2, 1); border-color: var(--me); }
.opt.flip .ev-timer { margin: 10px 0 0; width: 100%; }
.opt.flip .ev-close { margin: 6px 0 0 !important; text-align: left; }
.opt.picked { border-color: var(--me); }
@keyframes cardFlip { 0% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .opt.flip { animation: none; } }
/* 早送り中の札（次に起きることまで遠いとき） */
.cruise { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink2); }
.cruise::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; box-shadow: 5px 0 0 -0px transparent; }
.cruise::after { content: ""; order: -1; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-right: -4px; }
.ctrl { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.ib { min-width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
.ib:hover { background: rgba(255, 255, 255, .07); }
.ib:focus-visible { outline: 2px solid var(--me); outline-offset: 1px; }
.ib svg { width: 20px; height: 20px; fill: currentColor; }
.ib.txt { font-size: 12px; letter-spacing: .06em; font-family: var(--mono); white-space: nowrap; flex: none; }
#btnAuto.txt { font-family: var(--sans); }
#btnAuto[aria-pressed="true"] { background: var(--me); color: #1a1406; }
#btnPlay .i-play { display: none; }
#btnPlay.paused .i-play { display: block; }
#btnPlay.paused .i-pause { display: none; }

.imagine { position: absolute; left: var(--side); right: var(--side); bottom: 64px; font-size: 11px; color: var(--ink3); letter-spacing: .06em; text-align: center; pointer-events: none; z-index: 2; }

/* ── パネル ── */
.panel { position: absolute; z-index: 4; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
#me { left: var(--gut); top: 128px; width: var(--pw); }
#others { right: var(--gut); top: 128px; width: var(--pw); }
#log { left: var(--gut); bottom: 72px; width: var(--pw); max-height: calc(100svh - 128px - 72px - 420px); overflow: auto; overscroll-behavior: contain; }
/* 高さは js の fitPanels で実際の大きさから決める（上下のパネルの間を 16px 以上あける） */
#me, #others { overscroll-behavior: contain; }
.tabs { display: none; }

.me-head { display: flex; gap: 14px; align-items: center; }
.me-name { flex: 1; min-width: 0; }
.me-name .sci { white-space: nowrap; }
.me-name h2 { margin: 2px 0 0; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.3; font-feature-settings: "palt"; word-break: auto-phrase; }
.sil { flex: none; width: 52px; height: 52px; background: var(--col, var(--me)); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.sil.big { width: 64px; height: 64px; }
.facts { margin: 14px 0 10px; display: grid; gap: 4px; }
.facts > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.facts dt { color: var(--ink3); font-size: 12px; flex: none; }
.facts dd { margin: 0; text-align: right; font-size: 13px; }
.bars { display: grid; gap: 8px; margin: 12px 0 8px; }
.bar { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink2); }
.bar i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; position: relative; }
.bar b { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--me); border-radius: 3px; transition: width .4s ease; }
.bar em { font-style: normal; font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink); }
.bar.hit b { background: var(--danger); }
.desc { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.75; }

.lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lines li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid transparent; }
.lines li.me { border-color: color-mix(in srgb, var(--me) 45%, transparent); }
.lines li .sil { width: 34px; height: 34px; }
.lines li .nm { font-size: 13px; line-height: 1.35; }
.lines li .nm small { display: block; color: var(--ink3); font-size: 11px; }
.lines li .st { font-family: var(--mono); font-size: 11px; color: var(--ink2); text-align: right; }
.lines li.dead { opacity: .55; }
.lines li.dead .sil { background: var(--ink3); }
.lines .tag { display: inline-block; font-size: 10px; letter-spacing: .08em; padding: 0 6px; border-radius: 4px; margin-right: 6px; color: #0b0d10; background: var(--col); vertical-align: 1px; }
.mini-tree { margin-top: 12px; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .25); padding: 4px; display: block; }
.mini-tree svg { width: 100%; height: 100%; display: block; }

.log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.log li { font-size: 12.5px; line-height: 1.6; display: grid; grid-template-columns: 84px 1fr; gap: 8px; color: var(--ink2); }
.log li time { font-family: var(--mono); font-size: 11px; color: var(--ink3); padding-top: 1px; }
.log li.big { color: var(--ink); }
.log li.bad { color: #ffb4a3; }
/* 押すと全文が開く行（出来事・兆し） */
.log li.more { cursor: pointer; touch-action: manipulation; border-radius: 6px; }
.log li.more > span::after { content: "＋"; margin-left: 6px; font-size: 10px; color: var(--ink3); }
.log li.more.open > span::after { content: "－"; }
.log li.more:focus-visible { outline: 2px solid var(--me); outline-offset: 2px; }
.log-more { display: none; grid-column: 2; margin: 2px 0 4px; font-size: 12px; line-height: 1.75; color: var(--ink2); }
.log li.open .log-more { display: block; }

/* ── 年表の帯 ── */
.timeline { position: absolute; left: var(--gut); right: var(--gut); bottom: max(18px, env(safe-area-inset-bottom)); height: 36px; z-index: 4; }
.tl-bands { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; display: grid; grid-template-rows: 6px 10px 20px; }
.tl-row { position: relative; }
.tl-row > span { position: absolute; top: 0; bottom: 0; background: var(--c); opacity: .78; border-right: 1px solid rgba(0, 0, 0, .35); overflow: hidden; }
.tl-row.r3 > span { font-size: 10px; line-height: 20px; color: rgba(0, 0, 0, .72); padding-left: 4px; white-space: nowrap; font-weight: 500; }
.tl-marks { position: absolute; inset: 0; pointer-events: none; }
.tl-marks i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--danger); border-radius: 1px; opacity: .85; }
.tl-head { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; box-shadow: 0 0 12px rgba(255, 255, 255, .8); left: 0; }

/* ── 画面（タイトル・結果） ── */
.screen { position: fixed; inset: 0; bottom: var(--tb); z-index: 20; overflow: auto; }
.title { display: flex; align-items: flex-start; pointer-events: none; background: linear-gradient(90deg, rgba(5, 7, 11, .92) 0%, rgba(5, 7, 11, .7) 38%, rgba(5, 7, 11, 0) 70%); }
.title-in { pointer-events: auto; width: min(560px, 100%); margin: auto 0; padding: 40px clamp(20px, 6vw, 80px); } /* 寄せは auto の余白で。入りきらないときは上から並べてスクロールさせる */
.t-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--ink3); margin: 0 0 12px; }
.title h1 { margin: 0; line-height: 1; }
.t-en { display: block; font-family: var(--latin); font-weight: 300; font-size: clamp(56px, 9vw, 112px); letter-spacing: .14em; margin-left: -.06em; }
.t-ja { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: .3em; margin-top: 14px; color: var(--ink2); }
.t-lead { margin: 26px 0 26px; color: var(--ink2); font-size: 14px; line-height: 1.95; max-width: 30em; }
.t-opts { display: grid; gap: 14px; margin-bottom: 26px; }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg legend { float: left; width: 6.5em; font-size: 12px; color: var(--ink3); letter-spacing: .08em; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: #0b0d10; border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--me); outline-offset: 2px; }
.cta { height: 52px; padding: 0 34px; border-radius: 999px; border: 0; background: var(--me); color: #1a1406; font-weight: 600; font-size: 15px; letter-spacing: .1em; }
.cta:disabled { opacity: .5; cursor: default; }
.cta.sub { background: transparent; color: var(--ink); border: 1px solid rgba(236, 232, 223, .35); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.t-foot { margin-top: 26px; font-size: 12px; color: var(--ink3); line-height: 1.9; }
.t-foot p { margin: 0; }
.t-foot a { color: var(--ink2); text-underline-offset: 3px; }
.t-foot .sep { margin: 0 .3em; opacity: .6; }
.t-foot .line { white-space: nowrap; }
.res-in .t-foot { text-align: center; }
.dex-btn { display: block; margin-top: 14px; height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(236, 232, 223, .3); background: transparent; color: var(--ink); font-size: 13px; letter-spacing: .06em; font-family: var(--sans); }
.dex-btn:hover { border-color: var(--me); color: var(--me); }
.res-new { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.res-new li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink2); animation: rise .4s ease both; }
.res-new li.mine { border-color: rgba(242, 195, 91, .5); color: var(--ink); }
.res-new li .sil { width: 22px; height: 22px; }
.res-none { margin: 6px 0; font-size: 12.5px; color: var(--ink3); }
.res-dex { margin: 4px 0 20px; font-size: 12px; color: var(--ink2); font-family: var(--sans); }
.past { margin-top: 26px; max-width: 30em; }
.past ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); }
.past li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 4px 0; }

/* ── 決断 ── */
.modal { position: fixed; inset: 0; bottom: var(--tb); z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 8, .55); padding: 16px; }
/* backdrop-filter は使わない。WebGL の canvas の上で重なり順が崩れることがあり（WebKit でパネルが決断の枠より手前に出た）、毎フレームのぼかしはスマホで重い */
.sheet { width: min(860px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: #0c1017; border: 1px solid var(--line); border-radius: 18px; padding: 24px; animation: rise .3s ease; overscroll-behavior: contain; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.sheet.narrow { width: min(520px, 100%); text-align: center; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
/* 分かれ道は画面の下に寄せ、地球儀を見せたまま選ぶ */
#decide { align-items: flex-end; padding: 16px 16px 72px; background: linear-gradient(180deg, rgba(3, 5, 8, 0) 0%, rgba(3, 5, 8, .35) 45%, rgba(3, 5, 8, .8) 100%); }
#decide .sheet { width: min(1040px, 100%); max-height: calc(100svh - 100px); padding: 20px 22px 22px; }
.ev-in h3 { word-break: auto-phrase; }
.dec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.dec-head .kicker { order: 2; }
.dec-head h3 { order: 1; margin: 0; }
.dec-head .dec-lead { order: 3; flex-basis: 100%; margin: 0; }
.sheet h3 { line-height: 1.35; margin: 4px 0 6px; font-family: var(--serif); font-weight: 600; font-size: 22px; font-feature-settings: "palt"; letter-spacing: .04em; }
.dec-lead { margin: 0 0 18px; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
.dec-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

/* カード：アイコン・行動・なまえ・説明・札。札はいつも一番下 */
.opt { position: relative; text-align: left; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); transition: border-color .2s, background .2s, transform .2s; }
.opt:hover:not(:disabled), .opt:focus-visible { border-color: rgba(242, 195, 91, .7); background: rgba(242, 195, 91, .07); outline: none; transform: translateY(-2px); }
.opt:disabled { cursor: default; }
.opt.compact:disabled { opacity: .7; }
.o-key { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.o-top { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 14px; }
.o-top .sil { width: 48px; height: 48px; }
.o-ico { width: 40px; height: 40px; margin: 4px; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 195, 91, .12); color: var(--me); }
.o-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.o-act { font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.5; font-feature-settings: "palt"; letter-spacing: .02em; word-break: auto-phrase; }
.o-name { margin-top: 2px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.o-name .sci { font-size: 14px; margin-left: 6px; }
.o-desc { font-size: 12.5px; color: var(--ink2); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.o-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; min-height: 22px; }
.o-meta span { font-size: 11px; line-height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.o-meta span.up { color: #bdf3a6; border-color: rgba(166, 240, 138, .35); }
.o-meta span.down { color: #ffb4a3; border-color: rgba(255, 138, 110, .35); }
.o-meta span.new { color: #1a1406; background: var(--me); border-color: var(--me); font-weight: 600; }
.o-meta span.done { color: var(--ink3); border-style: dashed; }
.opt.stay { background: transparent; border-style: dashed; }
.opt.stay .o-act { color: var(--ink2); }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }

/* いきかた：時間を止めずに下に出す */
.quick { position: fixed; z-index: 24; left: max(var(--side), calc(50% - 450px)); right: max(var(--side), calc(50% - 450px)); bottom: calc(72px + var(--tb)); container-type: inline-size; background: #0c1017; border: 1px solid rgba(242, 195, 91, .35); border-radius: 16px; padding: 12px 14px 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); animation: rise .3s ease; }
.q-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; }
.q-title { font-family: var(--serif); font-weight: 600; font-size: 16px; font-feature-settings: "palt"; letter-spacing: .06em; }
.q-lead { font-size: 12px; color: var(--ink3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt.compact { padding: 10px 12px; gap: 6px; border-radius: 12px; }
.opt.compact .o-top { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.opt.compact .o-ico { width: 30px; height: 30px; margin: 1px; }
.opt.compact .o-ico svg { width: 17px; height: 17px; }
.opt.compact .o-act { font-size: 14px; }
.opt.compact .o-desc { font-size: 11.5px; -webkit-line-clamp: 2; line-height: 1.6; }
.opt.compact .o-key { top: 8px; right: 10px; }
@container (max-width: 620px) {
  .q-opts { grid-template-columns: 1fr; gap: 6px; }
  .opt.compact { flex-direction: row; align-items: center; padding: 8px 12px; }
  .opt.compact .o-top { flex: 1; padding-right: 0; }
  .opt.compact .o-desc { display: none; }
  .opt.compact .o-meta { margin-top: 0; flex: none; }
  .opt.compact .o-key { display: none; }
}

/* 兆し */
.omen { position: fixed; z-index: 22; top: 128px; left: max(var(--side), calc(50% - 280px)); right: max(var(--side), calc(50% - 280px)); background: #0c1017; border: 1px solid rgba(255, 138, 110, .45); border-radius: 14px; padding: 12px 16px 12px; box-shadow: 0 0 40px rgba(255, 106, 77, .15); animation: rise .4s ease; }
.omen .kicker { color: #ffb4a3; letter-spacing: .3em; }
.omen { cursor: pointer; touch-action: manipulation; }
.omen .ev-timer { margin-top: 10px; }
.omen.ask { cursor: default; }
.omen.ask .ev-timer, .omen.ask .ev-close { display: none; }
/* 押すまで待つときは残り時間の線を出さない */
.event.wait .ev-timer, .omen.wait .ev-timer { display: none; }
.omen p { margin: 4px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink); }
.omen-risk { font-size: 12.5px !important; color: var(--ink2) !important; }
.omen-risk[data-level="2"] { color: #ff9b85 !important; font-weight: 600; }
.omen-risk[data-level="1"] { color: #ffd28a !important; }
.omen-risk[data-level="0"] { color: #bdf3a6 !important; }
.quick.prep { border-color: rgba(255, 138, 110, .55); }
.quick.prep .q-title { color: #ffb4a3; }

/* ── 出来事 ── */
/* 見出しは地球の中央（演出）を隠さないよう下に出す。押すと閉じる */
.event { position: fixed; left: var(--side); right: var(--side); bottom: calc(70px + var(--tb)); z-index: 25; display: flex; justify-content: center; pointer-events: none; }
.event .ev-in { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.ev-in { width: min(640px, 100%); text-align: center; padding: 22px 24px 18px; background: radial-gradient(60% 80% at 50% 60%, rgba(5, 7, 11, .85), rgba(5, 7, 11, 0)); animation: evIn .6s ease; }
@keyframes evIn { from { opacity: 0; letter-spacing: .3em; } }
.ev-in h3 { line-height: 1.3; margin: 6px 0 10px; font-family: var(--serif); font-feature-settings: "palt"; font-weight: 700; font-size: clamp(24px, 4vw, 36px); letter-spacing: .08em; }
.ev-in p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.85; }
.ev-in .ev-omen { margin: -4px 0 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink3); }
.ev-in .ev-omen:empty { display: none; }
.ev-hit { margin-top: 10px !important; font-family: var(--mono); color: #ffb4a3 !important; }
.ev-why { margin-top: 2px !important; font-size: 13px !important; color: var(--ink) !important; }
.ev-why:empty { display: none; }
.ev-timer { display: block; width: 120px; height: 2px; margin: 12px auto 0; border-radius: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ev-timer b { display: block; height: 100%; background: rgba(236, 232, 223, .6); transform-origin: left; animation: evTimer var(--read, 5s) linear forwards; }
@keyframes evTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ev-close { margin-top: 6px !important; font-size: 10.5px !important; color: var(--ink3) !important; letter-spacing: .1em; }
.event.big h3 { color: #ffd0c2; }

/* ── 生命の樹 ── */
.tree-modal { padding: 0; background: radial-gradient(90% 90% at 50% 50%, #0b1320 0%, #05070b 70%); }
.tree-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tree-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 8px; position: relative; z-index: 2; }
.tree-bar h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; font-feature-settings: "palt"; letter-spacing: .08em; }
.tree-bar .kicker { margin-top: 2px; }
.tree-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink2); }
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tree-legend i { width: 18px; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tree-tools { position: absolute; z-index: 2; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.tree-tools .ib { width: 44px; min-width: 44px; padding: 0; }
.tree-pan { flex: 1; overflow: hidden; touch-action: none; cursor: grab; position: relative; }
.tree-pan:active { cursor: grabbing; }
/* 生命の樹は、ドラッグで動かすときに名前の文字を選んでしまわないように（2026-10-16 本人「拡大してドラッグすると文字をたくさん選択してしまう」） */
.tree-pan, .res-tree, .mini-tree, .tree-bar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tree-pan:active { cursor: grabbing; }
.tree-pan svg { width: 100%; height: 100%; display: block; transform-origin: 0 0; }
.tree-pan svg.smooth { transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.tree-info { position: absolute; z-index: 3; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 96px)); background: #0c1017; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--ink2); line-height: 1.75; animation: rise .25s ease; }
.tree-info .ti-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.tree-info .sil { width: 48px; height: 48px; }
.tree-info b { display: block; color: var(--ink); font-family: var(--serif); font-size: 17px; font-feature-settings: "palt"; }
.tree-info .ti-me { display: inline-block; margin-top: 6px; font-size: 11px; color: #1a1406; background: var(--me); border-radius: 4px; padding: 0 6px; }

.tv-eras path { opacity: .075; stroke: var(--bg); stroke-width: 1.5; }
.tv-eras text { fill: rgba(236, 232, 223, .5); font-size: 10px; font-family: var(--sans); letter-spacing: .08em; }
.tv-eras .tv-rim { fill: none; stroke: rgba(236, 232, 223, .22); }
.tv-eras .tv-now { fill: rgba(236, 232, 223, .55); font-size: 11px; }
.tv-base path { fill: none; stroke: rgba(236, 232, 223, .3); stroke-width: 1.2; transition: opacity .3s, stroke .3s; }
.tv-base path.ext { stroke: rgba(236, 232, 223, .18); stroke-dasharray: 3 2; }
.tv-base .tv-jump { stroke: rgba(242, 195, 91, .4); stroke-dasharray: 4 3; }
.tv-x { fill: rgba(236, 232, 223, .3); }
.tv-labels text { fill: rgba(236, 232, 223, .58); font-size: 11px; font-family: var(--sans); cursor: pointer; transition: fill .2s; }
.tv-labels text:hover { fill: var(--ink); }
.tv-labels text.ext { fill: rgba(236, 232, 223, .32); }
.tv-labels text.on { fill: var(--c, var(--ink)); }
.tv-labels text.on-me { fill: var(--me); font-weight: 600; font-size: 13px; }
/* 図鑑：まだ見つけていない枝 */
.tv-base path.unk { stroke: rgba(236, 232, 223, .1); stroke-dasharray: 2 3; }
.tv-base path.mine { stroke: rgba(242, 195, 91, .55); stroke-width: 1.6; stroke-dasharray: none; }
.tv-labels text.unk { fill: rgba(236, 232, 223, .34); letter-spacing: .1em; }
.tv-labels text.mine { fill: var(--me); }
.tv-labels text.today { font-weight: 600; }
/* 祖先をたどる */
.tv.focus .tv-base path, .tv.focus .tv-labels text, .tv.focus .tv-x { opacity: .22; }
.tv.focus .tv-base path.anc { opacity: 1; stroke: #fff; stroke-width: 2.2; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7)); }
.tv.focus .tv-labels text.anc { opacity: 1; fill: #fff; font-weight: 600; }
.tv.focus .tv-hl { opacity: .55; }
/* 血筋の線 */
.tv-line path { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.tv-line .tv-core { stroke-width: 2.2; }
.tv-line .tv-glow { stroke-width: 8; opacity: .2; }
.tv-line.me .tv-core { stroke-width: 3.4; }
.tv-line.me .tv-glow { stroke-width: 13; opacity: .28; }
.tv-line.gone .tv-core { opacity: .75; }
.tv-line .tv-flow { stroke: #fff; stroke-width: 2.4; stroke-dasharray: .004 .045; opacity: .85; animation: tvFlow 2.4s linear infinite; }
.tv-line.me .tv-flow { stroke-width: 3.2; }
@keyframes tvFlow { to { stroke-dashoffset: -.049; } }
.tv-line .tv-head { fill: var(--c); stroke: #fff; stroke-width: 1.4; }
.tv-line .tv-dead { fill: var(--bg); stroke: var(--c); stroke-width: 2; }
.tv-pulse { fill: none; stroke: var(--c); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tvPulse 1.8s ease-out infinite; }
@keyframes tvPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }
.tv-ripple { fill: none; stroke: var(--c); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tvRipple 2.7s cubic-bezier(.2, .6, .3, 1) infinite; pointer-events: none; }
.tv-ripple.dead { stroke: var(--ink2); }
@keyframes tvRipple { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(7); opacity: 0; } }
/* 中心から伸びる */
.tv.grow .tv-base path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tvDraw .7s cubic-bezier(.3, .6, .2, 1) forwards; animation-delay: calc(var(--dl) * 1.3s); }
.tv.grow .tv-base path.ext { stroke-dasharray: 1; }
.tv.grow .tv-eras path, .tv.grow .tv-eras text, .tv.grow .tv-labels text, .tv.grow .tv-x { opacity: 0; animation: tvFade .6s ease forwards; animation-delay: calc(var(--dl) * 1.3s + .25s); }
.tv.grow .tv-eras path { animation-name: tvFadeEra; }
.tv.grow .tv-hl { opacity: 0; animation: tvFade .8s ease 1.4s forwards; }
@keyframes tvDraw { to { stroke-dashoffset: 0; } }
@keyframes tvFade { to { opacity: 1; } }
@keyframes tvFadeEra { to { opacity: .075; } }
.tv.grow .tv-labels text.ext { animation-name: tvFadeExt; }
@keyframes tvFadeExt { to { opacity: 1; } }
.mini-tree .tv-base path { stroke-width: 2.4; }
.mini-tree .tv-line .tv-core { stroke-width: 6; }
.mini-tree .tv-line .tv-glow { stroke-width: 14; }
.mini-tree .tv-line.me .tv-core { stroke-width: 8; }
.mini-tree .tv-line .tv-flow { display: none; }
.mini-tree .tv-eras path { opacity: .12; }
@media (prefers-reduced-motion: reduce) {
  .tv.grow .tv-base path, .tv.grow .tv-eras path, .tv.grow .tv-eras text, .tv.grow .tv-labels text, .tv.grow .tv-x, .tv.grow .tv-hl { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .tv.grow .tv-eras path { opacity: .075; stroke: var(--bg); stroke-width: 1.5; }
  .tv-line .tv-flow, .tv-pulse, .tv-ripple { animation: none; }
  .tv-ripple:first-of-type { opacity: .6; transform: scale(2.4); }
}

/* ── 結果 ── */
.result { background: rgba(5, 7, 11, .9); }
.res-in { width: min(1180px, 100%); margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 20px 48px; }
.res-in h2 { font-feature-settings: "palt"; word-break: auto-phrase; margin: 6px 0 8px; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.35; }
.res-lead { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.9; max-width: 46em; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.res-tree { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 18px; background: rgba(0, 0, 0, .3); }
.res-tree svg { width: 100%; height: 100%; display: block; }
.res-tree { position: relative; }
.res-tree-btn { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid rgba(236, 232, 223, .3); background: rgba(12, 16, 23, .9); color: var(--ink); font-size: 12.5px; }
.res-tree-btn svg { width: 18px; height: 18px; }
.res-tree-btn:hover { border-color: var(--me); color: var(--me); }
.res-card { display: flex; align-items: center; gap: 16px; }
.res-name { font-family: var(--serif); font-feature-settings: "palt"; font-size: 22px; font-weight: 600; }
.res-facts { margin-bottom: 20px; }
.res-path { list-style: none; padding: 0; margin: 8px 0 20px; display: grid; gap: 2px; font-size: 13px; }
.res-path li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.res-path li time { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); padding-top: 1px; }
.res-path li b { color: var(--ink); font-weight: 500; }
/* 分かれ道から始める：タイトルの一覧と結果のやり直し */
.fork-sheet { width: min(640px, 100%); }
.fork-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fork-head h3 { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: .06em; }
.fork-lead { margin: 6px 0 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.fork-run { margin-top: 16px; }
.fork-run h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fork-run h4 span { font-size: 11.5px; font-weight: 400; color: var(--ink3); }
.fork-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.fork-pt { width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--ink); text-align: left; font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.fork-pt:hover, .fork-pt:focus-visible { border-color: var(--me); background: rgba(242, 195, 91, .08); }
.fork-pt time { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.fork-pt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fork-pt span { font-size: 12px; color: var(--ink2); white-space: nowrap; }
@media (max-width: 899px) { .fork-pt { grid-template-columns: 80px minmax(0, 1fr); } .fork-pt span { grid-column: 2; } }

.toast { position: fixed; left: 50%; bottom: calc(76px + var(--tb)); transform: translateX(-50%); z-index: 26; background: #0c1017; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: 12.5px; color: var(--ink); max-width: calc(100vw - 32px); text-align: center; }
.nojs { position: fixed; inset: auto 0 40% 0; text-align: center; }

/* ── 狭い画面（スマホ縦） ── */
@media (max-width: 899px) {
  :root { --gut: 16px; }
  body { font-size: 13px; }
  #app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(150px, 1fr) auto auto minmax(0, 40%); }
  /* canvas 自身の大きさで行が伸びないよう、大きさは行に合わせる */
  #globe { position: relative; grid-row: 2; grid-column: 1; inset: auto; width: auto; height: auto; align-self: stretch; justify-self: stretch; contain: size; min-height: 0; }
  #top { position: relative; grid-row: 1; inset: auto; padding: max(10px, env(safe-area-inset-top)) var(--gut) 0; flex-direction: column; gap: 8px; }
  .ctrl { align-self: stretch; justify-content: space-between; gap: 2px; }
  .ib.txt { padding: 0 8px; font-size: 11px; letter-spacing: 0; }
  .ib { min-width: 44px; height: 44px; }
  .age { font-size: 28px; }
  .imagine { position: relative; grid-row: 2; grid-column: 1; align-self: end; left: auto; right: auto; transform: none; bottom: 4px; justify-self: center; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 32px); }
  .timeline { position: relative; grid-row: 3; inset: auto; margin: 6px var(--gut) 10px; height: 30px; }
  .tl-bands { grid-template-rows: 5px 8px 17px; }
  .tl-row.r3 > span { line-height: 17px; font-size: 9px; }
  .tabs { display: flex; grid-row: 4; gap: 4px; padding: 0 var(--gut); }
  .tabs button { flex: 1; height: 44px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink3); font-size: 12.5px; }
  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--me); }
  .panel { position: relative; grid-row: 5; inset: auto !important; width: auto !important; max-height: none !important; min-height: 0; margin: 0; border-radius: 0; border-width: 1px 0 0; overflow: auto; overscroll-behavior: contain; padding: 14px var(--gut) max(16px, env(safe-area-inset-bottom)); display: none; }
  .panel.on { display: block; }
  .mini-tree { width: min(100%, 360px); margin: 12px auto 0; }
  #app.is-title { display: block; }
  #app.is-title #globe { position: absolute; left: 0; right: 0; top: 0; height: 64svh; }
  .title { background: linear-gradient(0deg, rgba(5, 7, 11, .96) 0%, rgba(5, 7, 11, .85) 55%, rgba(5, 7, 11, .45) 85%, rgba(5, 7, 11, .3) 100%); }
  .title-in { text-shadow: 0 1px 10px rgba(5, 7, 11, .9), 0 0 2px rgba(5, 7, 11, .6); }
  .title-in :is(button, label span, a) { text-shadow: none; }
  .title-in { margin: auto 0 0; padding: 32px var(--gut) max(28px, env(safe-area-inset-bottom)); }
  .t-lead { margin: 18px 0; font-size: 13px; }
  .t-en { font-size: 58px; }
  .cta { width: 100%; }
  .dex-btn { width: 100%; }
  .row-btns .cta { width: auto; flex: 1; min-width: 160px; }
  .sheet { padding: 18px var(--gut); border-radius: 16px; }
  .modal:not(.tree-modal) { align-items: flex-end; padding: 0; }
  .modal:not(.tree-modal) .sheet { border-radius: 18px 18px 0 0; max-height: 86svh; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .dec-opts { grid-template-columns: 1fr; gap: 8px; }
  #decide { padding: 0; }
  #decide .sheet { max-height: 78svh; padding: 16px var(--gut) max(16px, env(safe-area-inset-bottom)); }
  .opt { padding: 12px 14px; gap: 6px; }
  .opt .o-desc { -webkit-line-clamp: 2; }
  .o-key { display: none; }
  .quick { left: 0; right: 0; bottom: var(--tb); width: auto; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 12px var(--gut) max(12px, env(safe-area-inset-bottom)); }
  .q-opts { grid-template-columns: 1fr; gap: 6px; }
  .opt.compact { flex-direction: row; align-items: center; padding: 8px 12px; }
  .opt.compact .o-top { flex: 1; }
  .opt.compact .o-desc { display: none; }
  .opt.compact .o-meta { margin-top: 0; flex: none; }
  .res-grid { grid-template-columns: 1fr; }
  .omen { left: var(--gut); right: var(--gut); top: auto; bottom: calc(40svh + 112px + var(--tb)); padding: 10px 14px; }
  .omen p { font-size: 12px; line-height: 1.6; }
  .event { left: 0; right: 0; bottom: var(--tb); padding: 0; }
  .ev-in { background: #0c1017; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 18px var(--gut) max(18px, env(safe-area-inset-bottom)); }
  .ev-in h3 { font-size: 24px; }
  .tree-bar { flex-wrap: wrap; gap: 6px 10px; }
  .tree-bar .kicker { display: none; }
  .tree-bar > div:first-child { order: 1; }
  .tree-bar #treeClose { order: 2; margin-left: auto; }
  .tree-legend { order: 3; flex-basis: 100%; font-size: 11px; gap: 4px 10px; }
  .tree-tools { flex-direction: row; right: 50%; transform: translateX(50%); }
  .tree-info { left: 12px; right: 12px; width: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); }
  .toast { bottom: calc(40svh + 100px + var(--tb)); font-size: 12px; padding: 6px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .ev-in { animation: none; }
}

/* ── はじめの画面（読みこみ → タップ） ── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gate { position: fixed; inset: 0; bottom: var(--tb); z-index: 40; display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 45%, #0b1626 0%, #05070b 65%, #020305 100%); overflow: hidden; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.3, .6, .2, 1); }
.gate.out { opacity: 0; transform: scale(1.08); pointer-events: none; }
.g-stars, .g-stars::after { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; box-shadow: var(--stars); animation: gTwinkle 5s ease-in-out infinite alternate; }
.g-stars::after { content: ''; box-shadow: var(--stars2); animation-duration: 7s; animation-delay: -2s; }
@keyframes gTwinkle { from { opacity: .35; } to { opacity: 1; } }
.g-cell { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: gCell 4s ease .3s forwards; pointer-events: none; filter: blur(.6px); }
@keyframes gCell { to { opacity: .42; } }
.g-in { position: relative; text-align: center; padding: 24px; width: min(760px, 100%); }
.g-kicker { margin: 0 0 18px; font-family: var(--serif); font-size: 13px; letter-spacing: .5em; color: var(--ink3); opacity: 0; animation: gFade 1.6s ease .4s forwards; }
.g-logo { margin: 0 -.22em 0 0; white-space: nowrap; font-family: var(--latin); font-weight: 300; font-size: clamp(40px, 11vw, 96px); letter-spacing: .22em; line-height: 1; color: var(--ink); }
.g-logo span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px); animation: gLetter 1.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.g-logo span:nth-child(1) { animation-delay: .7s; } .g-logo span:nth-child(2) { animation-delay: .82s; } .g-logo span:nth-child(3) { animation-delay: .94s; }
.g-logo span:nth-child(4) { animation-delay: 1.06s; } .g-logo span:nth-child(5) { animation-delay: 1.18s; } .g-logo span:nth-child(6) { animation-delay: 1.3s; } .g-logo span:nth-child(7) { animation-delay: 1.42s; }
@keyframes gLetter { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes gFade { to { opacity: 1; } }
.g-count { margin: 28px 0 14px; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 3.4vw, 26px); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink2); opacity: 0; animation: gFade 1s ease 1.6s forwards; }
.g-bar { width: min(320px, 70vw); height: 1px; margin: 0 auto; background: rgba(236, 232, 223, .14); position: relative; overflow: hidden; opacity: 0; animation: gFade 1s ease 1.6s forwards; }
.g-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(242, 195, 91, .2), var(--me)); box-shadow: 0 0 10px var(--me); transition: width .3s ease; }
.g-status { margin: 14px 0 0; min-height: 1.6em; font-size: 12px; letter-spacing: .14em; color: var(--ink3); opacity: 0; animation: gFade 1s ease 1.8s forwards; }
.g-tap { margin-top: 26px; height: 56px; padding: 0 40px; border-radius: 999px; border: 1px solid transparent; background: rgba(242, 195, 91, .08); color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .3em; position: relative; animation: gTapIn 1.1s cubic-bezier(.2, .7, .2, 1) .55s both, gPulse 2.4s ease-in-out 2s infinite; }
/* 縁：線が消えた真ん中から左右へ広がって、ボタンの形を描く */
.g-tap::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(242, 195, 91, .75); clip-path: inset(0 50% 0 50% round 999px); animation: gDraw .9s cubic-bezier(.5, 0, .2, 1) .45s forwards; pointer-events: none; }
.g-tap::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--me); opacity: 0; animation: gRing 2.4s ease-out 2s infinite; pointer-events: none; }
@keyframes gTapIn { from { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(.97); letter-spacing: .6em; } to { opacity: 1; filter: none; transform: none; letter-spacing: .3em; } }
@keyframes gDraw { to { clip-path: inset(0 0 0 0 round 999px); } }
/* 準備ができたら、進み具合の線は真ん中へ縮んで消え、文言は入れかわる */
.gate.ready .g-bar { opacity: 1; animation: gBarOut .8s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes gBarOut { to { transform: scaleX(0); opacity: 0; } }
.gate.ready .g-status { opacity: 1; animation: gSwap .7s ease both; }
@keyframes gSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gPulse { 50% { background: rgba(242, 195, 91, .16); } }
@keyframes gRing { from { transform: scale(1); opacity: .7; } to { transform: scale(1.35, 1.7); opacity: 0; } }
.g-tap:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.g-snd { margin-top: 22px; animation: gUp .9s ease 1.25s both; }
@keyframes gUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.g-snd button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; letter-spacing: .12em; font-family: var(--mono); }
.g-snd button svg, .ib.snd svg { width: 20px; height: 20px; fill: currentColor; }
.g-snd p { margin: 8px 0 0; font-size: 11px; color: var(--ink3); letter-spacing: .04em; }
.snd .x, .snd[aria-pressed="false"] .w, #gSndBtn .x, #gSndBtn[aria-pressed="false"] .w { display: none; }
.snd[aria-pressed="false"] .x, #gSndBtn[aria-pressed="false"] .x { display: inline; }
.snd[aria-pressed="false"], #gSndBtn[aria-pressed="false"] { color: var(--ink3); }
/* タイトルが開くとき、文字が下から浮かぶ */
.title.enter .title-in > * { animation: tUp 1s cubic-bezier(.2, .7, .2, 1) both; }
.title.enter .title-in > *:nth-child(2) { animation-delay: .12s; } .title.enter .title-in > *:nth-child(3) { animation-delay: .24s; }
.title.enter .title-in > *:nth-child(4) { animation-delay: .36s; } .title.enter .title-in > *:nth-child(n+5) { animation-delay: .48s; }
@keyframes tUp { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .g-logo span, .g-kicker, .g-count, .g-bar, .g-status, .g-tap, .g-snd, .title.enter .title-in > * { animation: none !important; opacity: 1; filter: none; transform: none; }
  .g-tap::after { display: none; }
  .g-tap::before { animation: none; clip-path: none; }
  .gate.ready .g-bar { animation: none; opacity: 0; }
}