/* こえこい ｜ 夜更けのビジュアルノベル
   色はインクの黒に、話している相手の色を1色だけ差す（--accent は JS がキャラごとに入れ替える） */

:root {
  --ink: #15121a;
  --ink-2: #1d1924;
  --ink-3: #27222f;
  --panel: rgb(21 18 26 / 0.8);
  --line: rgb(245 240 234 / 0.12);
  --text: #f5f0ea;
  --sub: #b8aea6;
  --err: #ff9a9a;
  --dia: #ffd36e;
  --accent: #f0677e;
  --accent-soft: rgb(240 103 126 / 0.22);
  --on-accent: #fff;
  --r: 12px;
  --pill: 999px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--text);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }
h2 { font-size: 24px; font-weight: 700; line-height: 1.35; }
b, strong { font-weight: 700; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 22px; height: 22px; flex: none; }
.icons { display: none; }

/* ---------- 共通の部品 ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  transition: transform 0.15s var(--ease), filter 0.15s;
}
.cta:active { transform: scale(0.97); }
.cta.small { min-height: 44px; padding: 0 18px; font-size: 15px; }

.ghost {
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  color: var(--sub);
  font-weight: 700;
}

.round-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pill);
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: var(--pill);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.chip-btn svg { width: 16px; height: 16px; color: var(--accent); }
.chip-btn.playing svg { animation: pulse 0.9s ease-in-out infinite; }

.err { color: var(--err); font-size: 14px; min-height: 1em; }
.err:empty { display: none; }

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pill);
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.seg button {
  flex: 1;
  min-height: 44px;
  border-radius: var(--pill);
  color: var(--sub);
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.seg button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.seg.small button { min-height: 38px; font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -20px;
  padding: 2px 20px 6px;
  scrollbar-width: none;
}
.chips.scroll::-webkit-scrollbar { display: none; }
.chips > button,
.chips > label > span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: var(--ink-3);
  border: 1px solid transparent;
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.chips > label { position: relative; display: inline-flex; }
.chips > label > input { position: absolute; opacity: 0; pointer-events: none; }
.chips > label > input:checked + span,
.chips > button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 700;
}
.chips > label > input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* お願いシート: 持っている衣装（押せば必ず着替える）と、まだ持っていないショップ衣装 */
.own { display: grid; gap: 10px; }
.own h3 { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--sub); }
.own h3 small { margin-left: 8px; font-weight: 400; letter-spacing: 0; }
.chips > button.wear { gap: 8px; padding-left: 5px; border-color: var(--accent); }
.chips > button.wear img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: var(--ink-2); }
.chips > button.wear[aria-current="true"] { opacity: 0.5; }
.chips > button.locked { gap: 6px; color: var(--sub); border: 1px dashed rgb(184 174 166 / 0.45); background: transparent; }
.chips > button.locked svg { width: 14px; height: 14px; }
.chips > button.buy { gap: 8px; border: 1px dashed var(--accent); background: transparent; }
.chips > button:is(.buy, .locked):has(img) { padding-left: 5px; }
.chips > button:is(.buy, .locked) img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: var(--ink-2); }
.chips > button .price { display: inline-flex; align-items: center; gap: 2px; color: var(--dia); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chips > button .price svg { width: 14px; height: 14px; }
.chips > button.premium { border-color: var(--dia); }
.chips > button.premium img { box-shadow: 0 0 0 1.5px var(--dia); background: radial-gradient(circle at 50% 40%, rgb(255 226 160 / 0.85), rgb(255 190 90 / 0.35) 75%); } /* 黒い服の影絵でも、空の丸に見えないように明るい地を敷く */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field > span {
  display: block;
  margin-bottom: 8px;
  color: var(--sub);
  font-size: 14px;
  font-weight: 700;
}
.field { display: block; }
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.05);
  font-size: 16px; /* iPhone で拡大されないように16px以上 */
  line-height: 1.6;
  resize: none;
}
input::placeholder, textarea::placeholder { color: rgb(184 174 166 / 0.6); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); background: rgb(255 255 255 / 0.08); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 150px);
  z-index: 100;
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--text);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 合言葉 ---------- */

.login-body { display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 360px; text-align: center; }
.logo {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.logo small {
  display: block;
  margin-top: 6px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.login .logo { margin-bottom: 40px; }
.login .logo::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: url("/icon.svg") center / contain no-repeat;
}
.login-form { display: grid; gap: 12px; text-align: left; }
.login-form label { color: var(--sub); font-size: 14px; font-weight: 700; }
.login-note { margin-top: 28px; color: var(--sub); font-size: 12px; }

/* ---------- ホーム ---------- */

#app { max-width: 520px; margin: 0 auto; }

.home { padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 32px); }
/* 1段目: ロゴ・BGM・プロフィール。2段目: きゅんとダイヤ（押すと売り場） */
.home-head { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: 8px 10px; margin-bottom: 18px; }
.home-head .logo { min-width: 0; white-space: nowrap; }
.home-head .purse { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.home .logo { font-size: 28px; }
.home .seg { margin-bottom: 18px; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-2);
  text-align: left;
  isolation: isolate;
  animation: rise 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.card::before {
  /* キャラの色を背景にうっすら */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, var(--c) 0%, transparent 70%);
  opacity: 0.35;
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s var(--ease);
}
.card:active img { transform: scale(1.03); }
.card .info {
  position: absolute;
  inset: auto 0 0;
  padding: 36px 12px 12px;
  background: linear-gradient(transparent, rgb(21 18 26 / 0.92) 55%);
}
.card .catch { color: var(--sub); font-size: 12px; line-height: 1.4; }
.card .name { font-size: 20px; font-weight: 700; line-height: 1.3; }
.card .name small { margin-left: 6px; color: var(--sub); font-size: 12px; font-weight: 500; }
.card .badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.badge {
  padding: 2px 10px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.72);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge.lv { color: var(--c); filter: brightness(1.35); }
.badge.rel { margin-left: auto; }
.card .badges { flex-wrap: wrap; }
.badge.bday { background: #ffd36e; color: #3a2a00; }
.badge.done { display: inline-flex; align-items: center; gap: 3px; background: var(--c); color: #fff; }
.badge.done svg { width: 13px; height: 13px; }
.card .pips { display: flex; gap: 4px; margin-top: 6px; }
.card .pips i { width: 14px; height: 4px; border-radius: var(--pill); background: rgb(255 255 255 / 0.18); }
.card .pips i.on { background: var(--c); filter: brightness(1.3); }
.home-foot { margin-top: 24px; color: var(--sub); font-size: 13px; text-align: center; }

/* ---------- 会話 ---------- */

.talk {
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
.stage { position: absolute; inset: 0; }
.bg, .sprite { position: absolute; inset: 0; }
.bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bg img.on { opacity: 1; }
.bg::after {
  /* 絵がまだ無いときの夜空 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 60% at 50% 20%, var(--accent-soft), transparent 70%), var(--ink);
}
.sprite .bob {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: breathe 4.2s ease-in-out infinite;
}
.sprite img {
  position: absolute;
  left: 50%;
  /* 絵（縦横 2:3）が頭から足まで全部見える大きさ。下の操作部（セリフ枠・ボタン、高さは --dock-h）には重ねず、その上に立たせる。
     横は画面幅（最大 520px）に収める。ハグ・キス・後ろ姿の寄りの絵も同じ枠 */
  bottom: var(--dock-h, 300px);
  height: min(calc(100dvh - var(--safe-t) - 56px - var(--dock-h, 300px)), 150vw, 780px);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.35s ease, height 0.3s var(--ease), bottom 0.3s var(--ease);
  filter: drop-shadow(0 0 24px rgb(0 0 0 / 0.35));
}
.sprite img.on { opacity: 1; }
.sprite.enter img.on { animation: enter 0.7s var(--ease) both; }
/* ポーズの絵は、出るときにカメラが寄っていく */
.sprite img.on[data-pose="kiss"], .sprite img.on[data-pose="hug"], .sprite img.on[data-pose="hug2"] { animation: push 1.1s var(--ease) both; }
@keyframes push {
  from { transform: translateX(-50%) scale(0.82); }
  to { transform: translateX(-50%) scale(1); }
}
.stage .bg img { transition: opacity 0.9s ease, filter 0.8s ease, transform 0.8s ease; }
.stage[data-pose="kiss"] .bg img, .stage[data-pose="hug"] .bg img, .stage[data-pose="hug2"] .bg img {
  filter: blur(7px) brightness(0.7);
  transform: scale(1.08);
}
.sprite.hop .bob { animation: hop 0.32s var(--ease), breathe 4.2s ease-in-out 0.32s infinite; }
.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(21 18 26 / 0.5), transparent 14%),
    linear-gradient(transparent 70%, rgb(21 18 26 / 0.55) 90%, rgb(21 18 26 / 0.8));
  pointer-events: none;
}

.talk-head {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.who { flex: 1; min-width: 0; line-height: 1.3; text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
.who b { display: block; font-size: 18px; }
.who span { color: var(--sub); font-size: 12px; }
.gauge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 12px;
  border-radius: var(--pill);
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gauge .lv { font-size: 12px; color: var(--sub); white-space: nowrap; }
.gauge .lv b { margin-left: 2px; font-size: 17px; color: var(--accent); }
.gauge .bar { position: relative; width: 64px; height: 6px; border-radius: var(--pill); background: rgb(255 255 255 / 0.12); overflow: hidden; }
.gauge .bar b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.8s var(--ease);
}
.gauge.up { animation: glow 1.1s ease; }
.gauge .delta {
  position: absolute;
  right: 10px;
  top: -4px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
  animation: floatUp 1.3s var(--ease) forwards;
}
.gauge .delta.minus { color: var(--sub); }

/* 画面上部の情報（左: 場所・いまの目標 ／ 右: きゅん・一枚絵・増えた分の通知） */
.hud {
  position: absolute;
  top: calc(var(--safe-t) + 64px);
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.hud-l, .hud-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud-l { align-items: flex-start; flex: 1; }
.hud-r { align-items: flex-end; flex: none; max-width: 58%; }
.hud button { pointer-events: auto; }

.place {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.55);
  color: var(--text);
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.place:empty { display: none; }
.place.new { animation: placeIn 0.7s var(--ease); }

.still-pill {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  animation: rise 0.5s var(--ease), pulse 1.6s ease-in-out 0.5s infinite;
}

/* 服が変わって、新しい服の絵ができるまで */
.dressing {
  position: absolute;
  left: 50%;
  top: calc((100dvh + var(--safe-t) + 56px - var(--dock-h, 300px)) / 2);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.72);
  border: 1px solid var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  animation: rise 0.35s var(--ease);
}
.dressing[hidden] { display: none; }

/* 物語が1歩進んだときの札（STORY 3｜見出し）。言い終わったあとに出て、少しして消える */
.story-card {
  position: absolute;
  left: 50%;
  top: calc((100dvh + var(--safe-t) + 56px - var(--dock-h, 300px)) / 2);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content; /* left: 50% のままだと幅が画面の半分までになり、短い見出しでも折り返す */
  max-width: calc(100% - 48px);
  padding: 10px 24px 12px;
  border-radius: 14px;
  background: rgb(21 18 26 / 0.72);
  border: 1px solid var(--accent);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  animation: storyCard 3.2s var(--ease) both;
}
.story-card[hidden] { display: none; }
.story-card small { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--accent); }
.story-card b { font-size: 17px; letter-spacing: 0.06em; }
.dressing .spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
.sprite .bob { transition: filter 0.5s ease; }
.talk.changing .sprite .bob { filter: blur(6px) brightness(0.55); }

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px calc(var(--safe-b) + 8px);
}
/* 自分の発言と返しの候補は同じ1行の枠に出す（高さを変えない＝立ち絵の大きさが毎回変わらない）。
   候補が出たら候補を、話している途中は聞き取り中の文字を優先する */
.slot { position: relative; height: 40px; }
.slot > * { position: absolute; bottom: 0; }
.slot:has(.hints:not(:empty)) .heard:not(.live) { display: none; }
.slot:has(.heard.live:not(:empty)) .hints { visibility: hidden; }
.heard {
  right: 0;
  max-width: 88%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 6px 14px;
  border-radius: 16px 16px 4px 16px;
  background: rgb(245 240 234 / 0.14);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rise 0.3s var(--ease);
}
.heard:empty { display: none; }
.heard.live { opacity: 0.65; }

.hints {
  left: -12px;
  right: -12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px;
  scrollbar-width: none;
}
.hints::-webkit-scrollbar { display: none; }
.hints:empty { display: none; }
.hints button {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid var(--accent);
  background: rgb(21 18 26 / 0.5);
  font-size: 14px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
  animation: rise 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.hints button.offer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: var(--dia);
  background: linear-gradient(135deg, rgb(255 211 110 / 0.3), rgb(240 103 126 / 0.35));
  font-weight: 700;
  box-shadow: 0 0 14px rgb(255 211 110 / 0.35);
}
.hints button.offer svg { width: 16px; height: 16px; color: var(--dia); }

.box {
  /* 後ろの立ち絵が透けて見えるように、薄い色だけ敷いてぼかさない。文字は影で読ませる */
  position: relative;
  padding: 28px 16px 10px; /* 上は名前の札の下端より下から文字を始める（20px だと札が1行目に重なっていた。2026-09-27） */
  border-radius: var(--r);
  background: rgb(21 18 26 / 0.46);
  border: 1px solid rgb(245 240 234 / 0.14);
  cursor: pointer;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9), 0 0 10px rgb(0 0 0 / 0.55);
}
.box .plate {
  position: absolute;
  top: -16px;
  left: 14px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box .plate b {
  padding: 3px 16px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.keep {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 8px;
  border-radius: var(--pill);
  color: var(--sub);
}
.keep.on { color: var(--accent); }
.keep.on svg { animation: beat 0.5s var(--ease); }
#line {
  /* 枠の高さは3行分で固定。長いセリフは枠の中で送る（枠が伸びて立ち絵に重ならないように） */
  height: calc(1.65em * 3);
  overflow-y: auto;
  scrollbar-width: none;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
}
#line .ch { animation: ink 0.18s ease both; }
.box.wait #line::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 8px;
  margin-left: 4px;
  vertical-align: middle;
  background:
    radial-gradient(circle 3px, var(--sub) 98%, transparent) 0 50% / 8px 8px no-repeat,
    radial-gradient(circle 3px, var(--sub) 98%, transparent) 9px 50% / 8px 8px no-repeat,
    radial-gradient(circle 3px, var(--sub) 98%, transparent) 18px 50% / 8px 8px no-repeat;
  animation: dots 1s steps(3) infinite;
}
.box.more::after {
  /* まだ続きがある印 */
  content: "";
  position: absolute;
  right: 16px;
  bottom: 12px;
  border: 6px solid transparent;
  border-top-color: var(--accent);
  animation: nudge 1s ease-in-out infinite;
}

.typeform { display: flex; gap: 8px; }
.typeform input { flex: 1; border-radius: var(--pill); background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.typeform .send { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); }

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  gap: 4px;
}
.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 0;
  border-radius: var(--r);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}
.ctl svg { width: 24px; height: 24px; }
.ctl[aria-pressed="true"] { color: var(--accent); }
.mic {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 8px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 22px var(--accent-soft);
  transition: background 0.2s, transform 0.15s var(--ease);
}
.mic:active { transform: scale(0.95); }
.mic svg { width: 30px; height: 30px; }
.mic .ring {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(calc(1 + var(--lvl, 0) * 0.35));
  transition: transform 0.08s linear;
}
.mic[data-mode="listening"] .ring { opacity: 0.45; }
.mic[data-mode="hearing"] .ring { opacity: 1; }
.mic[data-mode="connecting"] { background: var(--ink-3); color: var(--sub); }
.mic[data-mode="connecting"] .ring { opacity: 0.6; border-color: var(--sub); border-top-color: transparent; animation: spin 1s linear infinite; }
.mic[data-mode="muted"],
.mic[data-mode="error"] { background: var(--ink-3); color: var(--sub); box-shadow: none; }
.status { margin-top: -4px; color: var(--sub); font-size: 12px; text-align: center; min-height: 1.4em; text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }

/* ときめきが上がったとき */
.hearts { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.hearts i {
  position: absolute;
  bottom: 38%;
  left: var(--x);
  width: 22px;
  height: 22px;
  color: var(--accent);
  animation: heartUp 1.8s var(--ease) forwards;
  animation-delay: var(--d);
  opacity: 0;
}
.hearts i svg { width: 100%; height: 100%; }
.levelup {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  text-align: center;
  animation: flash 2.6s ease forwards;
}
.levelup div {
  padding: 18px 34px;
  border-radius: var(--r);
  background: rgb(21 18 26 / 0.82);
  border: 1px solid var(--accent);
}
.levelup small { display: block; color: var(--sub); font-size: 13px; letter-spacing: 0.2em; }
.levelup b { font-size: 30px; color: var(--accent); letter-spacing: 0.06em; }

/* ---------- 下から出るシート ---------- */

dialog { color: var(--text); padding: 0; border: 0; }
dialog::backdrop { background: rgb(8 6 10 / 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  margin: auto auto 0;
  border-radius: 16px 16px 0 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet.tall { height: 88dvh; }
.sheet[open] { animation: sheetUp 0.32s var(--ease); }
.sheet-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 20px calc(var(--safe-b) + 22px);
}
.sheet-body::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: var(--pill);
  background: var(--line);
}
.sheet .close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pill);
  color: var(--sub);
}
.sheet h2 { padding-right: 44px; }
.sheet .lead { margin-top: -12px; color: var(--sub); font-size: 14px; }
.sheet-foot {
  position: sticky;
  bottom: calc(var(--safe-b) * -1 - 22px);
  display: flex;
  gap: 10px;
  margin: 0 -20px calc(var(--safe-b) * -1 - 22px);
  padding: 14px 20px calc(var(--safe-b) + 18px);
  background: linear-gradient(transparent, var(--ink-2) 28%);
}
.sheet-foot .cta { flex: 1; }

.who-card { display: flex; gap: 16px; align-items: center; padding-right: 36px; }
.who-card img {
  width: 96px;
  height: 120px;
  flex: none;
  border-radius: var(--r);
  object-fit: cover;
  object-position: top;
  background: var(--accent-soft);
}
.who-card .catch { color: var(--accent); font-size: 13px; font-weight: 700; }
.who-card .meta { margin: 2px 0 10px; color: var(--sub); font-size: 13px; }
.progress { margin-top: -10px; color: var(--sub); font-size: 13px; }
.progress:empty { display: none; }
.rel-desc { margin-top: 10px; color: var(--sub); font-size: 13px; line-height: 1.6; }

.adult .switch,
.adult .check,
.notify .switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
}
.adult input[type="checkbox"],
.notify input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--accent);
}
.adult .note,
.notify .note { margin-top: 6px; color: var(--sub); font-size: 12px; }

.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }

/* 思い出 */
.memo-body { min-height: 40dvh; }
.memo-empty { padding: 48px 0; color: var(--sub); font-size: 14px; text-align: center; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.album button { position: relative; border-radius: 8px; overflow: hidden; background: var(--ink-3); }
.album img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.album small { position: absolute; left: 6px; bottom: 4px; font-size: 11px; text-shadow: 0 1px 4px #000; }
.voices, .diaries, .facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voices li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--ink-3);
}
.voices button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--pill);
  background: var(--accent-soft);
  color: var(--accent);
}
.voices button.playing { background: var(--accent); color: var(--on-accent); }
.voices p { font-size: 15px; line-height: 1.55; }
.diaries li { padding: 14px 16px; border-radius: var(--r); background: var(--ink-3); border-left: 3px solid var(--accent); }
.diaries .d { color: var(--sub); font-size: 12px; }
.diaries b { display: block; margin: 2px 0 4px; font-size: 17px; }
.diaries p { color: var(--text); font-size: 14px; }
.facts-list li { padding: 10px 14px; border-radius: var(--r); background: var(--ink-3); font-size: 15px; }

/* 会話の記録 */
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log-list li { max-width: 86%; padding: 8px 14px; border-radius: 14px; background: var(--ink-3); font-size: 15px; line-height: 1.6; }
.log-list li.me { justify-self: end; background: var(--accent-soft); }
.log-list li.sys { max-width: none; justify-self: center; padding: 2px 12px; background: none; color: var(--sub); font-size: 12px; }

/* 一枚絵 */
.still {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  background: #000;
  display: none;
  place-items: center;
}
.still[open] { display: grid; animation: fadeIn 0.8s ease; }
.still::backdrop { background: #000; }
.still img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
.still-foot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 24px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
}
.still-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.still-save svg { width: 18px; height: 18px; }
.still p {
  padding: 6px 16px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.7);
  font-size: 13px;
  white-space: nowrap;
}

/* 今日の日記 */
.d-notify {
  margin: 16px 0 4px;
  padding: 12px;
  border-radius: 14px;
  background: var(--accent-soft);
  text-align: center;
}
.d-notify p { font-size: 14px; line-height: 1.6; }
.d-notify div { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.d-notify .ghost { min-height: 44px; padding: 0 16px; font-size: 14px; }
.modal {
  width: calc(100% - 32px);
  max-width: 400px;
  margin: auto;
  background: none;
}
.modal[open] { animation: pop 0.45s var(--ease); }
.diary-card {
  display: grid;
  gap: 14px;
  padding: 28px 24px 24px;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  text-align: center;
}
.diary-card .date { color: var(--sub); font-size: 13px; letter-spacing: 0.1em; }
.diary-card .episode { font-size: 16px; line-height: 1.8; }
.diary-card .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.diary-card .facts li { padding: 6px 12px; border-radius: 8px; background: var(--ink-3); font-size: 14px; }
.diary-card .facts li::before { content: "覚えた："; color: var(--accent); font-weight: 700; font-size: 12px; }
.diary-card .facts:empty { display: none; }
.diary-stats { display: flex; justify-content: center; gap: 28px; margin: 4px 0 6px; }
.diary-stats span { display: block; color: var(--sub); font-size: 12px; }
.diary-stats b { font-size: 22px; color: var(--accent); }

/* ---------- ゲーム（きゅん・ミッション・エピソード・ショップ） ---------- */

/* きゅん（ポイント）は、キャラの色に関係なくいつも同じピンク金で見せる */
.kyun {
  --kyun: #ff8fb1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px 0 9px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.72);
  border: 1px solid rgb(255 143 177 / 0.35);
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kyun svg { width: 18px; height: 18px; color: var(--kyun); }
.dia-have {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px 0 9px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.72);
  border: 1px solid rgb(255 211 110 / 0.35);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dia-have svg { width: 18px; height: 18px; color: var(--dia); }
button.dia-have { color: var(--text); cursor: pointer; }
button.dia-have::after { content: "+"; margin-left: 2px; color: var(--dia); font-weight: 700; }
.kyun.bump { animation: kyunUp 0.7s var(--ease); }
.kyun.drop { animation: kyunDown 0.5s var(--ease); }

.today {
  margin-bottom: 18px;
  padding: 14px 14px 12px;
  border-radius: var(--r);
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.today-head h2 { font-size: 16px; }
.today-login { color: var(--sub); font-size: 12px; }
.today-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--sub); font-size: 12px; }
.today-foot .chip-btn b { margin-left: 2px; }

.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.missions li { display: flex; align-items: center; gap: 10px; }
.missions .check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.missions li.done .check { border-color: #ff8fb1; background: #ff8fb1; color: #2a0d17; }
.missions .check svg { width: 14px; height: 14px; }
.missions li > div { flex: 1; min-width: 0; }
.missions p { font-size: 14px; line-height: 1.45; }
.missions li.done p { color: var(--sub); }
.m-bar { display: block; height: 4px; margin-top: 4px; border-radius: var(--pill); background: rgb(255 255 255 / 0.1); overflow: hidden; }
.m-bar b { display: block; height: 100%; border-radius: inherit; background: #ff8fb1; transition: width 0.6s var(--ease); }
.m-pt { display: grid; justify-items: end; flex: none; min-width: 44px; color: var(--sub); font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.m-pt small { color: #ff8fb1; font-size: 12px; font-weight: 700; }

/* 会話中の目標。ふだんは「EP2/5」だけの小さな札に畳み、目標が変わったときだけ数秒ひらく（立ち絵の顔にかぶらないように） */
.goal-chip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: min(100%, 250px);
  padding: 4px 11px 5px 8px;
  border-radius: 10px;
  background: rgb(21 18 26 / 0.66);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  text-align: left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.goal-chip svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.goal-chip span { display: grid; min-width: 0; line-height: 1.35; }
.goal-chip small { color: var(--sub); font-size: 11px; letter-spacing: 0.04em; }
.goal-chip:not(.open) { align-items: center; }
.goal-chip:not(.open) svg { margin-top: 0; }
.goal-chip:not(.open) b { display: none; }
.goal-chip b {
  font-size: 13px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goal-chip.locked { border-left-color: var(--sub); }
.goal-chip.locked svg { color: var(--sub); }
.goal-chip.locked b { color: var(--sub); }
.goal-chip.pulse { animation: glow 1.2s ease 2; }

.feed { display: grid; justify-items: end; gap: 4px; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: rgb(21 18 26 / 0.8);
  font-size: 12px;
  line-height: 1.5;
  animation: feedIn 0.4s var(--ease);
  transition: opacity 0.5s, transform 0.5s var(--ease);
}
.feed-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item b { flex: none; color: #ff8fb1; }
.feed-item.mission { border: 1px solid rgb(255 143 177 / 0.5); }
.feed-item.ach { background: #3a2d10; color: #ffe2a0; }
.feed-item.ach b { color: #ffd36e; }
.feed-item.ep { background: var(--accent); color: var(--on-accent); }
.feed-item.ep b { color: inherit; }
.feed-item.react.love { background: #ff8fb1; color: #2a0d17; font-weight: 700; }
.feed-item.react.hate { color: var(--sub); }
.feed-item.out { opacity: 0; transform: translateY(-6px); }

/* シートの見出しに残高を並べる */
.sheet-title { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.sheet-title h2 { padding-right: 0; }
.sub-h { font-size: 15px; margin-bottom: -12px; }
.sheet .note { color: var(--sub); font-size: 12px; line-height: 1.7; }

/* ふれあうショップ */
.shop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop .item {
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--ink-3);
  border: 1px solid transparent;
  text-align: left;
}
.shop .item:not(:disabled):active { transform: scale(0.97); border-color: var(--accent); }
.shop .item b { font-size: 14px; line-height: 1.4; }
.shop .item .desc { color: var(--sub); font-size: 12px; line-height: 1.4; }
.shop .item .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; }
.shop .cost { display: inline-flex; align-items: center; gap: 3px; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.shop .cost svg { width: 14px; height: 14px; color: #ff8fb1; }
.shop .item.locked { opacity: 1; background: transparent; border: 1px dashed var(--line); }
.shop .item.locked b, .shop .item.locked .cost { color: var(--sub); }
.shop .item.locked .cost svg { color: var(--sub); }
.shop .item.short .cost { color: var(--err); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.08);
  color: var(--sub);
  font-size: 11px;
  font-weight: 700;
}
.tag.love { background: #ff8fb1; color: #2a0d17; }
.tag.like { background: rgb(255 143 177 / 0.2); color: #ffc2d4; }
.tag.hate { background: rgb(255 255 255 / 0.06); color: var(--sub); text-decoration: line-through; }
.tag.today { background: none; border: 1px solid var(--line); }
.tag.bday { background: #ffd36e; color: #3a2a00; }
.tag svg { width: 13px; height: 13px; color: #ff8fb1; }
.confess { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent-soft); }
.confess .cta small { margin-left: 8px; font-size: 12px; opacity: 0.85; }

/* エピソード */
.ep-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--ink-3);
  border-left: 3px solid var(--accent);
}
.ep-card .kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.ep-card .ep-title { font-size: 17px; line-height: 1.4; }
.ep-card .ep-goal { font-size: 14px; line-height: 1.6; }
.ep-card .ep-sub { color: var(--sub); font-size: 12px; }
.ep-card.locked { border-left-color: var(--sub); }
.ep-card.locked .kicker, .ep-card.locked .ep-goal { color: var(--sub); }
.ep-card.done { background: linear-gradient(120deg, var(--accent-soft), var(--ink-3) 70%); }
.ep-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
.ep-steps span {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.06);
  color: var(--sub);
  font-size: 11px;
  letter-spacing: -0.05em;
}
.ep-steps span.on { background: var(--accent); color: var(--on-accent); }
.ep-steps span.now { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text); }

.s-game { display: grid; gap: 10px; margin-top: -8px; }
.s-game:empty { display: none; }
.s-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s-tags .tag { padding: 3px 10px; font-size: 12px; font-weight: 500; color: var(--text); }
.s-tags .tag.bday { font-weight: 700; color: #3a2a00; }

/* プロフ帳 */
.memo-body { display: grid; align-content: start; gap: 14px; }
.book { margin: 0; display: grid; gap: 1px; border-radius: var(--r); overflow: hidden; background: var(--line); }
.book > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 10px 14px; background: var(--ink-3); }
.book dt { color: var(--sub); font-size: 13px; }
.book dd { margin: 0; font-size: 14px; line-height: 1.6; }
.book .lock { display: inline-flex; align-items: center; gap: 4px; color: var(--sub); font-size: 12px; }
.book .lock svg { width: 13px; height: 13px; }

/* 実績 */
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ach-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--ink-3); }
.ach-list li > div { flex: 1; min-width: 0; line-height: 1.45; }
.ach-list b { font-size: 15px; }
.ach-list p { color: var(--sub); font-size: 12px; }
.ach-list .medal { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgb(255 255 255 / 0.05); color: var(--sub); }
.ach-list .medal svg { width: 20px; height: 20px; }
.ach-list li.got .medal { background: #ffd36e; color: #3a2a00; }
.ach-list li:not(.got) b { color: var(--sub); }

/* ログインボーナス・クリア */
.bonus-card, .clear-card {
  display: grid;
  gap: 14px;
  padding: 26px 22px 22px;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  text-align: center;
}
.kicker { color: #ff8fb1; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; }
.stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.stamps li {
  display: grid;
  gap: 0;
  padding: 6px 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.05);
  color: var(--sub);
  line-height: 1.3;
}
.stamps small { font-size: 10px; }
.stamps b { font-size: 13px; font-variant-numeric: tabular-nums; }
.stamps li.on { background: rgb(255 143 177 / 0.2); color: #ffc2d4; }
.stamps li.today { background: #ff8fb1; color: #2a0d17; animation: pop 0.5s var(--ease) 0.2s both; }
.gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.gains li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--ink-3); font-size: 14px; }
.gains b { color: #ff8fb1; font-variant-numeric: tabular-nums; }

.clear-card { border-top: 4px solid var(--accent); }

/* 衣装を買う */
.buy-card {
  display: grid;
  gap: 12px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  text-align: center;
}
#buy.premium .buy-card { border-top-color: var(--dia); background: radial-gradient(120% 60% at 50% 0%, rgb(255 211 110 / 0.14), var(--ink-2) 70%); }
#buy.premium .kicker { color: var(--dia); letter-spacing: 0.12em; }
.buy-img { display: grid; place-items: center; }
.buy-img img { width: 150px; aspect-ratio: 3 / 4; border-radius: 12px; object-fit: cover; object-position: 50% 8%; background: var(--ink-3); }
.buy-img img[hidden] { display: none; }
#buy.premium .buy-img img { box-shadow: 0 0 0 1.5px var(--dia), 0 0 28px rgb(255 211 110 / 0.3); }
.buy-card h2 { font-size: 21px; }
.buy-desc { color: var(--sub); font-size: 13px; line-height: 1.7; }
.buy-price { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy-price svg { width: 22px; height: 22px; color: var(--dia); }
.buy-have { color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.buy-card .cta:disabled { filter: grayscale(0.8) brightness(0.7); }
.buy-card .ghost { min-height: 44px; }
.clear-card h2 { font-size: 22px; }
.clear-card .kicker { color: var(--accent); }
.stars { display: flex; justify-content: center; gap: 8px; font-size: 38px; line-height: 1; }
.stars span { color: rgb(255 255 255 / 0.12); }
.stars span.on { color: #ffd36e; animation: starIn 0.5s var(--ease) both; animation-delay: calc(0.25s + var(--i) * 0.22s); text-shadow: 0 0 18px rgb(255 211 110 / 0.6); }
.clear-pt { color: #ff8fb1; font-size: 20px; font-weight: 700; }
.clear-next { color: var(--sub); font-size: 13px; }
.clear-next:empty { display: none; }
#clear.ending .clear-card { background: radial-gradient(120% 70% at 50% 0%, var(--accent-soft), var(--ink-2) 70%); border-color: var(--accent); }
#clear.ending h2 { font-size: 24px; }

/* ---------- 動き ---------- */

@keyframes kyunUp { 35% { transform: scale(1.14); box-shadow: 0 0 0 3px rgb(255 143 177 / 0.35); } }
@keyframes kyunDown { 40% { transform: translateY(2px); } }
@keyframes feedIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes starIn { from { opacity: 0; transform: scale(2.2) rotate(-20deg); } }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.4; } }
@keyframes breathe { 50% { transform: scale(1.006, 1.012); } }
@keyframes hop { 40% { transform: translateY(-9px); } }
@keyframes enter { from { opacity: 0; transform: translateX(-50%) translateY(26px); } }
@keyframes ink { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes beat { 40% { transform: scale(1.35); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes nudge { 50% { transform: translateY(3px); } }
@keyframes dots { from { width: 8px; } to { width: 26px; } }
@keyframes glow { 30% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px var(--accent); } }
@keyframes floatUp { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-26px); } }
@keyframes storyCard {
  0% { opacity: 0; scale: 0.94; }
  12%, 82% { opacity: 1; scale: 1; }
  100% { opacity: 0; }
}
@keyframes placeIn { from { opacity: 0; transform: translateX(-10px); } }
@keyframes heartUp {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46vh) translateX(var(--sway)) scale(1.1); }
}
@keyframes flash {
  0% { opacity: 0; transform: scale(0.9); }
  12%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sprite .bob { animation: none; }
  .hearts { display: none; }
}

/* 横に広い画面では、会話の画面を中央に置いて左右を暗く */
@media (min-width: 560px) {
  body { background: #0e0c12; }
  .talk { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- タイトル ----------
   夜空から地平の桜色へ。20人が奥の列から順にふわっと現れ、ロゴが1文字ずつ弾んで、最後に「はじめる」 */

.title {
  --u: min(1vw, 0.6vh); /* 画面の短い方に合わせた単位（縦長スマホは幅、横長PCは高さ） */
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  isolation: isolate;
  background: #0e0c22;
  -webkit-user-select: none;
  user-select: none;
}
@supports (height: 1dvh) {
  .title { --u: min(1vw, 0.6dvh); }
}
@media (max-aspect-ratio: 4/5) {
  .title { --u: min(1vw, 0.46vh); }
  @supports (height: 1dvh) {
    .title { --u: min(1vw, 0.46dvh); }
  }
}

/* 一枚絵（public/img/title-kv.webp、1080×1935）。縦長のスマホは左右を少し切って全面に。
   絵より横長の画面（PC・iPad）は絵を真ん中に置き、左右は同じ絵をぼかして埋める。届くまでは小さな下絵を敷く */
.ti-kv {
  position: absolute;
  inset: 0;
  background: url("") 50% 0 / cover no-repeat;
}
.ti-kv img {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(100%, calc(100vh * 1080 / 1935));
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  translate: -50% 0;
  transform-origin: 50% 32%;
  opacity: 0;
  transition: opacity 0.9s ease-out, scale 0.65s ease-in;
}
@supports (height: 1dvh) {
  .ti-kv img { width: min(100%, calc(100dvh * 1080 / 1935)); }
}
.ti-kv.ok img { opacity: 1; animation: tiKv 16s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (min-aspect-ratio: 1080/1935) {
  .ti-kv::before {
    content: "";
    position: absolute;
    inset: -48px;
    background: url("/img/title-kv.webp") 50% 40% / cover no-repeat;
    filter: blur(36px) brightness(0.4) saturate(1.2);
    opacity: 0;
    transition: opacity 0.9s ease-out;
  }
  .ti-kv.ok::before { opacity: 1; }
  .ti-kv img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}

/* 絵の雪に合わせて、手前にも少し雪が降る */
.ti-float { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ti-float i {
  position: absolute;
  left: var(--l);
  top: -12px;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, rgb(255 255 255 / 0.5) 55%, transparent 72%);
  opacity: 0;
  animation: tiSnow var(--t) linear var(--dl) infinite;
}

/* 下を暗くして、ロゴとボタンを読みやすく */
.ti-fade {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 54%;
  background: linear-gradient(rgb(14 12 34 / 0), rgb(14 12 34 / 0.55) 30%, rgb(14 12 34 / 0.9) 70%, rgb(14 12 34 / 0.96));
  pointer-events: none;
}

.ti-sound {
  position: absolute;
  top: calc(var(--safe-t) + 14px);
  right: 14px;
  z-index: 4;
  color: #ffd6e0;
  animation: fadeIn 0.4s ease-out 0.3s both;
}

/* ロゴと「はじめる」は下にまとめる（ふたりの顔は画面の上半分にある） */
.ti-foot {
  position: absolute;
  inset: auto 0 calc(var(--safe-b) + clamp(32px, 7vh, 72px));
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3.2vh, 30px);
}
.ti-logo {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
  pointer-events: none;
}
.ti-kicker {
  color: #ffc9d6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0;
}
.ti-word {
  position: relative;
  display: flex;
  gap: 0.02em;
  font-size: clamp(60px, calc(var(--u) * 19), 104px);
  font-weight: 900;
  line-height: 1.05;
}
.ti-word i {
  --o: #f0677e;
  display: inline-block;
  font-style: normal;
  color: #fff;
  opacity: 0;
  translate: 0 var(--ty);
  rotate: var(--rot);
  text-shadow:
    0.045em 0 0 var(--o), -0.045em 0 0 var(--o), 0 0.045em 0 var(--o), 0 -0.045em 0 var(--o),
    0.032em 0.032em 0 var(--o), -0.032em 0.032em 0 var(--o), 0.032em -0.032em 0 var(--o), -0.032em -0.032em 0 var(--o),
    0 0.1em 0 #6e1f40, 0 0.14em 0.2em rgb(0 0 0 / 0.45), 0 0 0.5em rgb(255 120 160 / 0.55);
}
/* 「こえ」は白に桜色のふち、「こい」は桜色に白のふち */
.ti-word i:nth-child(1) { --rot: -8deg; --ty: 0.05em; }
.ti-word i:nth-child(2) { --rot: 5deg; --ty: -0.07em; }
.ti-word i:nth-child(3) { --rot: -5deg; --ty: 0.03em; --o: #fff; color: #ff6f90; }
.ti-word i:nth-child(4) { --rot: 8deg; --ty: -0.06em; --o: #fff; color: #ff6f90; }
.ti-heart {
  position: absolute;
  top: -0.16em;
  right: -0.24em;
  width: 0.44em;
  height: 0.44em;
  color: #ffd166;
  rotate: 16deg;
  filter: drop-shadow(0 0 0.12em rgb(255 209 102 / 0.8));
  opacity: 0;
}
.ti-logo small {
  padding: 3px 16px;
  border-radius: var(--pill);
  background: rgb(20 12 24 / 0.55);
  border: 1px solid rgb(255 214 226 / 0.28);
  color: #ffe6ec;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  opacity: 0;
}
.go .ti-kicker { animation: tiUp 0.6s var(--ease) 0.75s both; }
.go .ti-word i { animation: tiPop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.go .ti-word i:nth-child(1) { animation-delay: 0.9s; }
.go .ti-word i:nth-child(2) { animation-delay: 0.99s; }
.go .ti-word i:nth-child(3) { animation-delay: 1.08s; }
.go .ti-word i:nth-child(4) { animation-delay: 1.17s; }
.go .ti-heart { animation: tiHeart 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s both, beat 1.6s ease-in-out 2.4s infinite; }
.go .ti-logo small { animation: tiUp 0.6s var(--ease) 1.5s both; }
/* 横向きのスマホなど背の低い画面では、ロゴの添え字を省いて人と重ならないように */
@media (max-height: 480px) {
  .ti-kicker, .ti-logo small { display: none; }
  .ti-word { font-size: clamp(44px, calc(var(--u) * 21), 116px); }
}

/* はじめる */
.ti-start {
  display: grid;
  justify-items: center;
}
.ti-btn {
  position: relative;
  overflow: hidden;
  min-width: 236px;
  min-height: 60px;
  padding: 0 36px;
  border: 0;
  border-radius: var(--pill);
  background: linear-gradient(180deg, #ff97ae, #f0677e 62%, #de5069);
  color: #fff;
  font: inherit;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-shadow: 0 1px 2px rgb(110 31 64 / 0.6);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 8px rgb(240 103 126 / 0.3), 0 12px 32px rgb(240 103 126 / 0.5);
  cursor: pointer;
  opacity: 0;
  transition: scale 0.12s var(--ease), filter 0.15s;
}
.ti-btn::after {
  /* ときどき光が横切る */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%);
  translate: -120% 0;
  animation: tiSheen 3.6s ease-in-out 2.8s infinite;
}
.ti-btn:hover { filter: brightness(1.06); }
.ti-btn:active { scale: 0.96; }
.ti-btn:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.go .ti-btn:enabled { animation: tiUp 0.6s var(--ease) 1.75s both, tiBreathe 2.6s ease-in-out 2.4s infinite; }

/* はじめたら、光って消える */
.ti-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle at 50% 60%, #fff, #ffd6e0 45%, rgb(255 214 224 / 0));
  opacity: 0;
  pointer-events: none;
}
.title.leave { pointer-events: none; animation: tiLeave 0.65s ease-in both; }
.title.leave .ti-flash { animation: tiFlash 0.65s ease-out both; }
.title.leave .ti-kv img { scale: 1.05; }

@keyframes tiKv { from { transform: scale(1.07); } to { transform: none; } }
@keyframes tiPop { from { opacity: 0; transform: translateY(-0.5em) scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes tiHeart { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes tiUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tiBreathe { 50% { transform: scale(1.035); } }
@keyframes tiSheen { 0% { translate: -120% 0; } 45%, 100% { translate: 120% 0; } }
@keyframes tiSnow {
  0% { opacity: 0; transform: translate(0, 0); }
  10%, 85% { opacity: var(--op); }
  100% { opacity: 0; transform: translate(var(--sw), 105vh); }
}
@keyframes tiLeave { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tiFlash { 0% { opacity: 0; } 40% { opacity: 0.85; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .title, .title * { animation-delay: 0s !important; }
  .ti-float, .ti-btn::after { display: none; }
  .ti-kv.ok img { animation: none !important; }
}

/* ダイヤを買う（アプリ内課金） */
.dia-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px 18px 18px;
  border-radius: 16px;
  background: radial-gradient(120% 50% at 50% 0%, rgb(255 211 110 / 0.12), var(--ink-2) 70%);
  border: 1px solid var(--line);
  border-top: 4px solid var(--dia);
  text-align: center;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.dia-card .close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pill); color: var(--sub); }
.dia-card .close svg { width: 20px; height: 20px; }
.dia-card .kicker { color: var(--dia); letter-spacing: 0.18em; }
.dia-card h2 { font-size: 21px; }
.ds-have { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.ds-have svg { width: 16px; height: 16px; color: var(--dia); }
.ds-have b { color: var(--text); font-size: 16px; }
.ds-need { color: #ffb4a8; font-size: 13px; font-weight: 700; }
.ds-need[hidden], .ds-owed[hidden], .ds-consent[hidden] { display: none; }
.ds-list { display: grid; gap: 8px; }
.ds-wait { color: var(--sub); font-size: 13px; padding: 18px 0; }
.pack {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--ink-3);
  border: 1px solid rgb(255 211 110 / 0.22);
  color: var(--text);
  text-align: left;
  transition: transform 0.15s var(--ease);
}
.pack:active:not(:disabled) { transform: scale(0.98); }
.pack:disabled { opacity: 0.55; }
.pack.first { border-color: var(--dia); background: linear-gradient(90deg, rgb(255 211 110 / 0.16), var(--ink-3) 70%); }
.pack-dia { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pack-dia svg { width: 20px; height: 20px; color: var(--dia); }
.pack-sub { color: var(--sub); font-size: 12px; }
.pack.first .pack-sub { color: var(--dia); font-weight: 700; }
.pack-price { min-width: 72px; padding: 6px 10px; border-radius: var(--pill); background: var(--dia); color: #2a1d00; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pack:disabled .pack-price { background: rgb(255 255 255 / 0.12); color: var(--sub); }
.ds-note { color: var(--sub); font-size: 13px; line-height: 1.7; }
.ds-note:empty { display: none; }
.ds-owed { padding: 8px 12px; border-radius: 8px; background: rgb(255 180 168 / 0.1); color: #ffb4a8; font-size: 12px; line-height: 1.6; text-align: left; }
.ds-consent { display: flex; gap: 10px; align-items: flex-start; color: var(--sub); font-size: 12px; line-height: 1.6; text-align: left; }
.ds-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--dia); }
.ds-fine { color: rgb(184 174 166 / 0.75); font-size: 11px; line-height: 1.6; text-align: left; }

/* ---------- 安心のための部品（AIの表示・同意・知らせる・相談窓口。public/js/trust.js） ---------- */

.ti-ai {
  margin-top: 14px;
  text-wrap: balance;
  padding: 0 24px;
  color: rgb(255 255 255 / 0.82);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.7);
}
.home-ai { margin-top: 10px; color: var(--sub); font-size: 12px; line-height: 1.7; text-align: center; }
.home-ai svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--sub); }
.doc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 14px; font-size: 12px; }
.doc-links a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(184 174 166 / 0.4); padding: 6px 0; }
.sheet .doc-links { justify-content: flex-start; margin-top: -6px; }

.ai-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid rgb(255 255 255 / 0.35);
  color: rgb(255 255 255 / 0.8);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.plate-acts { display: flex; align-items: center; }
.keep.report { color: rgb(184 174 166 / 0.7); }
.keep.report svg { width: 19px; height: 19px; }

/* 同意 */
.consent-card,
.help-card {
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 26px 22px 20px;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.consent-lead { font-size: 14.5px; line-height: 1.75; }
.consent-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.consent-table th,
.consent-table td { padding: 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.consent-table th { width: 38%; padding-right: 10px; font-weight: 700; }
.consent-table small { display: block; color: var(--sub); font-size: 11px; font-weight: 500; }
.consent-table td { color: var(--sub); }
.consent-fine { color: var(--sub); font-size: 12px; line-height: 1.7; }
.consent-fine a,
.acct-warn a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.consent-card .cta,
.consent-card .ghost,
.help-card .ghost { width: 100%; }
.consent-card .ghost { min-height: 44px; margin-top: -6px; border: 0; }

/* 知らせる */
.rp-quote {
  margin: -6px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--ink-3);
  font-size: 14px;
  line-height: 1.7;
  max-height: 7.2em;
  overflow: auto;
}

/* 相談窓口 */
.help-card { border-top-color: #8fc9ff; }
.help-card h2 { font-size: 20px; }
.help-card #hc-text { color: var(--sub); font-size: 14px; line-height: 1.75; }
.hc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc-lines a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--ink-3);
  color: var(--text);
  text-decoration: none;
}
.hc-lines svg { color: #8fc9ff; }
.hc-lines b { display: block; font-size: 15px; }
.hc-lines small { display: block; color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.hc-urgent { font-size: 13px; }
.hc-urgent a { color: #8fc9ff; font-weight: 700; }
.hc-more { color: var(--sub); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* プロフィールの「アカウントとデータ」 */
fieldset.rows { display: grid; gap: 8px; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--line);
  text-align: left;
}
.row b { display: block; font-size: 15px; }
.row small { display: block; color: var(--sub); font-size: 12px; line-height: 1.5; }
.row svg { color: var(--sub); }
#p-consent:not(.on) svg { opacity: 0.2; }
#p-consent.on svg { color: var(--accent); }

/* アカウント（public/js/account.js） */
#acct-body .acct-btns { display: grid; gap: 10px; }
#acct-body > .cta,
#acct-body > .danger-btn { width: 100%; }
#acct-body .field + .field { margin-top: -8px; }
.link-btn {
  justify-self: center;
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--sub);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  border-radius: var(--pill);
  background: #fff;
  color: #000;
  font-family: -apple-system, "Hiragino Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
}
.apple-btn span { font-size: 20px; line-height: 1; }
.acct-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.acct-rows dt { color: var(--sub); }
.acct-rows dd { margin: 0; overflow-wrap: anywhere; }
.acct-warn { margin: 0; padding: 12px 14px 12px 32px; border-radius: 12px; background: rgb(255 154 154 / 0.08); border: 1px solid rgb(255 154 154 / 0.25); font-size: 13.5px; line-height: 1.7; }
.acct-warn li + li { margin-top: 6px; }
.danger { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--sub); font-size: 13px; }
.danger-btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--pill);
  border: 1px solid rgb(255 154 154 / 0.5);
  color: var(--err);
  font-weight: 700;
}
#acct-body .note { color: var(--sub); font-size: 12px; line-height: 1.7; }