/* 時代ガチャ 固有スタイル：墨絵・木版画・古文書の世界観
 * 色は common.css のトークンを上書き＋このゲーム固有の --jg-* 変数のみ使用。
 * --jg-tex-l / --jg-tex-d（和紙テクスチャ）は art.js の JGArt.init() が設定する。 */
:root {
  --jg-ink: #1a1714; --jg-paper: #efe6d2; --jg-paper2: #e0d2b2; --jg-shu: #b8322a; --jg-kin: #a87b2f; --jg-ai: #3d5a80; --jg-sumi: #6b625a;
  --jg-tex: var(--jg-tex-l, none);
  --jg-board: #ece2cb; --jg-board-ink: #1a1714; --jg-board-shu: #9e2a22;
  --bg: #ebe2cc; --surface: #f7f1e3; --surface-2: #ece2ca; --text: #1f1a15; --text-sub: #6a5d4d; --line: #d8caab;
  --accent: #b8322a; --accent-ink: #fff8ec; --accent-soft: #f3ddd3;
  --good: #3f7a4f; --good-soft: #dfeadb; --info: #3d5a80; --info-soft: #dde4ee; --warn: #a87b2f; --bad: #b8322a; --bad-soft: #f3ddd3;
  --shadow: 0 2px 10px rgba(60, 40, 20, .10);
  --radius: 12px; --radius-sm: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jg-ink: #e9dfc8; --jg-paper: #1d1914; --jg-paper2: #2c251c; --jg-shu: #d9574a; --jg-kin: #c9a04e; --jg-ai: #7b9cc8; --jg-sumi: #a89c8a;
    --jg-tex: var(--jg-tex-d, none);
    --bg: #17130f; --surface: #221d17; --surface-2: #2c251d; --text: #eee4cf; --text-sub: #ad9f88; --line: #3d342a;
    --accent: #e0675a; --accent-ink: #1a0f0a; --accent-soft: #3d201b;
    --good: #7fb08a; --good-soft: #1f2e22; --info: #7b9cc8; --info-soft: #1d2735; --warn: #c9a04e; --bad: #e0675a; --bad-soft: #3d201b;
    --shadow: 0 2px 10px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --jg-ink: #e9dfc8; --jg-paper: #1d1914; --jg-paper2: #2c251c; --jg-shu: #d9574a; --jg-kin: #c9a04e; --jg-ai: #7b9cc8; --jg-sumi: #a89c8a;
  --jg-tex: var(--jg-tex-d, none);
  --bg: #17130f; --surface: #221d17; --surface-2: #2c251d; --text: #eee4cf; --text-sub: #ad9f88; --line: #3d342a;
  --accent: #e0675a; --accent-ink: #1a0f0a; --accent-soft: #3d201b;
  --good: #7fb08a; --good-soft: #1f2e22; --info: #7b9cc8; --info-soft: #1d2735; --warn: #c9a04e; --bad: #e0675a; --bad-soft: #3d201b;
  --shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* 和紙の地 */
body { background-color: var(--bg); background-image: var(--jg-tex); }
.card { background-image: var(--jg-tex); }
.app h2, .app h3, .jg-q { font-family: var(--font-serif); }
.btn-primary { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); letter-spacing: .06em; }
.btn-primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #000); transform: translateY(2px); }
.jga { display: block; overflow: visible; }

/* 画像（実写差し込み／SVGフォールバック） */
.jg-pic { position: relative; overflow: hidden; width: 100%; height: 100%; }
.jg-pic > svg, .jg-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.jg-credit {
  position: absolute; right: 4px; bottom: 4px; max-width: 86%; font-size: 9px; line-height: 1.35; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 2;
}

/* ---------- タイトル ---------- */
.jg-hero-t {
  position: relative; margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--jg-paper) var(--jg-tex); aspect-ratio: 16 / 11; min-height: 220px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 0 64px; box-shadow: var(--shadow);
}
.jg-hero-t::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, color-mix(in srgb, var(--jg-ink) 10%, transparent) 100%);
}
.jg-hero-media { position: absolute; inset: 0; }
.jg-hero-media video, .jg-hero-media .jg-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jg-hero-t.has-media { --jg-ink: #f3ead6; --jg-paper: #1d1914; }
.jg-hero-t.has-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 12, 8, .55) 0%, rgba(16, 12, 8, .25) 50%, rgba(16, 12, 8, 0) 70%); }
/* 写真・動画のタイトル：人形の顔を右に見せ、題字は左下に小さく置く */
.jg-hero-t.has-media { aspect-ratio: 16 / 10; justify-content: flex-end; align-items: flex-start; padding: 0 0 16px 16px; }
.jg-hero-t.has-media .jg-hero-media video, .jg-hero-t.has-media .jg-hero-media img { object-position: 78% 40%; }
.jg-hero-t.has-media .jg-emaki { display: none; }
.jg-hero-t.has-media .jg-logo { width: 58%; max-width: 300px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.jg-hero-t.has-media .jg-hero-sub { font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
@media (min-width: 560px) { .jg-hero-t.has-media { padding: 0 0 24px 28px; } .jg-hero-t.has-media .jg-hero-sub { font-size: 15px; } }
.jg-logo { position: relative; z-index: 3; width: 88%; max-width: 440px; margin: 0; line-height: 0; }
.jg-logo svg { width: 100%; height: auto; }
.jg-hero-sub { position: relative; z-index: 3; margin: 2px 0 0; font-family: var(--font-serif); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--jg-ink); }
.jg-emaki {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 58px; overflow: hidden; z-index: 2; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.jg-emaki-track { display: flex; width: max-content; animation: jg-emaki 110s linear infinite; will-change: transform; }
.jg-emaki-item { width: 54px; height: 54px; margin-right: 12px; flex: none; }
.jg-emaki-item svg { width: 100%; height: 100%; animation: jg-rot 48s linear infinite; }
.jg-emaki-item.rev svg { animation-direction: reverse; }
@keyframes jg-emaki { to { transform: translateX(-50%); } }
@keyframes jg-rot { to { transform: rotate(360deg); } }
/* 題字：墨が走る */
.jga-dj { animation: jg-brush 1.3s cubic-bezier(.5, 0, .3, 1) both; }
.jga-dj1 { animation-delay: .3s; } .jga-dj2 { animation-delay: .6s; } .jga-dj3 { animation-delay: .82s; } .jga-dj4 { animation-delay: 1.02s; }
@keyframes jg-brush {
  0% { stroke-dasharray: 220; stroke-dashoffset: 220; fill-opacity: 0; }
  65% { stroke-dasharray: 220; stroke-dashoffset: 0; fill-opacity: .15; }
  100% { stroke-dasharray: 220; stroke-dashoffset: 0; fill-opacity: 1; }
}
.jga-djline { animation: jg-slow .9s ease 1.6s both; }
.jga-djseal { transform-box: fill-box; transform-origin: center; animation: jg-stamp .42s cubic-bezier(.3, 1.4, .5, 1) 2.2s both; }
@keyframes jg-stamp { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: none; opacity: 1; } }

.jg-meta { margin: 4px 0 16px; }
.jg-start { margin: 8px 0 16px; }
.jg-friend { display: flex; gap: 12px; align-items: center; border-color: var(--accent); background-color: var(--accent-soft); }
.jg-friend-emb { width: 58px; height: 58px; flex: none; }
.jg-friend-emb svg { width: 100%; height: 100%; }
.jg-daily .daily-box { align-items: center; }
.jg-daily-seal { width: 44px; height: 44px; flex: none; transform: rotate(-6deg); }
.jg-daily-meta { margin: 8px 0 12px; gap: 4px 16px; }
.jg-epi-mini { font-size: 15px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 10px; }
.jg-zk-ico { width: 40px; height: 40px; flex: none; }

/* ---------- ガチャ（3枚の札） ---------- */
.jg-gacha-h { font-size: 22px; letter-spacing: .06em; }
.gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.gcard { position: relative; perspective: 900px; height: 236px; animation: jg-deal .6s cubic-bezier(.2, .8, .3, 1.1) both; }
.gcard:nth-child(2) { animation-delay: .12s; }
.gcard:nth-child(3) { animation-delay: .24s; }
@keyframes jg-deal { from { transform: translateY(-70px) rotate(-10deg) scale(.82); opacity: 0; } }
.gcard-inner { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3, .7, .3, 1.15); transform-style: preserve-3d; }
.gcard.is-flipped .gcard-inner { transform: rotateY(180deg); }
.gcard-face {
  position: absolute; inset: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 8px 5px 10px; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow); overflow: hidden;
}
.gcard-front { background: var(--jg-ai); border: 2px solid var(--jg-kin); padding: 0; justify-content: flex-end; }
.gcard-backart { position: absolute; inset: 0; }
.gcard-backart svg, .gcard-backart .jg-pic, .gcard-backart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gcard-front .gcard-label {
  position: relative; z-index: 1; margin-bottom: 10px; background: var(--jg-paper); color: var(--jg-ink); padding: 1px 12px; border-radius: 3px;
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .3em; border: 1px solid var(--jg-kin);
}
.gcard-back { justify-content: center; transform: rotateY(180deg); background: var(--surface) var(--jg-tex); border: 2px solid color-mix(in srgb, var(--jg-ink) 70%, transparent); color: var(--text); }
.gcard-back::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--jg-ink) 25%, transparent); border-radius: 7px; pointer-events: none; }
.gcard-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.gcard-back .gcard-label { color: var(--accent); font-family: var(--font-serif); }
.gcard-art { width: 74px; height: 74px; margin: 4px 0 4px; flex: none; }
.gc-house .gcard-art { width: 64px; height: 77px; margin-top: 0; }
.gc-land .gcard-art { width: 86px; height: 58px; margin: 12px 0 8px; }
.gcard-art svg { width: 100%; height: 100%; }
.gcard-main { font-size: 14px; line-height: 1.3; font-family: var(--font-serif); word-break: keep-all; overflow-wrap: anywhere; }
.gcard-sub { font-size: 11px; color: var(--text-sub); line-height: 1.35; margin-top: 3px; }
.gcard-seal { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; transform: rotate(-8deg); }
.gcard.is-flipped .gcard-seal { animation: jg-stamp .4s cubic-bezier(.3, 1.4, .5, 1) .48s both; }
.gcard.is-rare .gcard-back { border-color: var(--jg-kin); box-shadow: 0 0 0 2px var(--jg-kin), 0 0 22px color-mix(in srgb, var(--jg-kin) 70%, transparent); }
.gcard.is-rare .gcard-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 170, .55) 50%, transparent 65%); background-size: 260% 100%;
  animation: jg-shine 2.4s ease 1s infinite;
}
@keyframes jg-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.jg-splash { position: absolute; inset: -18%; pointer-events: none; z-index: 3; }
.jg-splash svg { width: 100%; height: 100%; }
.jga-splat { transform-box: fill-box; transform-origin: center; animation: jg-splat .9s ease-out both; }
@keyframes jg-splat { 0% { transform: scale(.15); opacity: .95; } 35% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
.jga-drop { animation: jg-drop .9s ease-out both; }
@keyframes jg-drop { 0% { transform: translate(calc(var(--dx) * -2.4), calc(var(--dy) * -2.4)) scale(.3); opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.jg-rare {
  display: flex; flex-direction: column; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); text-align: center;
  background: linear-gradient(135deg, #f6e3a1, #c9a04e 55%, #8a6a22); color: #2a1d08; box-shadow: 0 2px 12px rgba(168, 123, 47, .45);
}
.jg-rare b { font-family: var(--font-serif); font-size: 18px; letter-spacing: .08em; }
.jg-rare span { font-size: 12px; }
.jg-gold-rain { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.jg-gold {
  position: absolute; top: -24px; left: var(--x, 50%); width: var(--s, 10px); height: calc(var(--s, 10px) * .8);
  background: linear-gradient(135deg, #fbefc0, #d8b45a 45%, #9c7a2a); opacity: .95;
  clip-path: polygon(0 12%, 38% 0, 100% 18%, 88% 70%, 60% 100%, 8% 84%);
  animation: jg-gold var(--d, 3s) linear var(--dl, 0s) both;
}
@keyframes jg-gold { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--sx, 0), 110vh) rotate(var(--r, 360deg)); } }
.jg-birth-text { font-size: 17px; line-height: 1.8; margin-bottom: 12px; }
.jg-stat-s { font-size: 13px !important; line-height: 1.5 !important; font-weight: 700; margin-top: 2px; }
.jg-era-note { margin: 10px 0 0; }
.jg-after > * + * { margin-top: 10px; }

/* ---------- 人生 ---------- */
.jg-banner {
  position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 6; max-height: 170px; width: 100%; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--jg-paper); box-shadow: var(--shadow);
}
.jg-banner-pic { position: absolute; inset: 0; }
.jg-banner-name {
  position: absolute; left: 12px; top: 10px; z-index: 2; writing-mode: vertical-rl; font-family: var(--font-serif); font-weight: 800;
  font-size: 19px; letter-spacing: .14em; color: var(--jg-ink); text-shadow: 0 0 6px var(--jg-paper), 0 0 2px var(--jg-paper);
}
.jg-banner.has-photo .jg-banner-name { color: #f3ead6; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.jg-banner.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 6, .45), transparent 40%); pointer-events: none; }
.jg-head { margin-bottom: 10px; }
.jg-headrow { display: flex; gap: 10px; align-items: center; }
.jg-fig { width: 50px; height: 60px; flex: none; }
.jg-fig svg { width: 100%; height: 100%; }
.jg-who { line-height: 1.5; }
.jg-yearrow { align-items: baseline; margin: 2px 0 6px; }
.jg-year { font-family: var(--font-serif); font-weight: 800; font-size: 17px; }
.jg-age { font-weight: 900; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-serif); }
.jg-progmeta { margin: 2px 0 8px; }
.jg-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.jg-meter-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-sub); line-height: 1.4; }
.jg-meter-top > span { display: inline-flex; align-items: center; gap: 4px; }
.jg-meter-top b { color: var(--text); font-variant-numeric: tabular-nums; }
.jg-meter-ico { width: 18px; height: 18px; display: inline-block; flex: none; }
.jg-meter-ico svg { width: 100%; height: 100%; }
.jg-meter .meter { height: 8px; }
.m-h .meter > span { background: var(--good); }
.m-hp .meter > span { background: var(--jg-shu); }
.m-kn .meter > span { background: var(--jg-ai); }
.m-bd .meter > span { background: var(--jg-kin); }

.jg-tlbox {
  max-height: 44vh; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface) var(--jg-tex);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; margin-bottom: 12px; scroll-behavior: smooth;
}
.jg-tlbox.jg-quake { animation: jg-quake .42s ease both; }
@keyframes jg-quake { 10%, 90% { transform: translate(-1px, 0); } 25%, 75% { transform: translate(3px, -1px); } 40% { transform: translate(-4px, 1px); } 60% { transform: translate(4px, 0); } }
.jg-tlbox-result { max-height: 360px; min-height: 0; background: var(--surface-2); border: 0; }
.jg-tl { list-style: none; margin: 0; padding: 0; }
.jg-tl-item {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 7px 0 7px 8px; border-bottom: 1px dashed var(--line);
  border-left: 3px solid transparent; font-size: 14px; line-height: 1.55; animation: jg-in .3s ease both;
}
.jg-tl-item:last-child { border-bottom: 0; }
@keyframes jg-in { from { opacity: 0; } to { opacity: 1; } }
.jg-tl-text { min-width: 0; animation: jg-write .7s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes jg-write { from { clip-path: inset(0 100% 0 0); filter: blur(1.2px); } to { clip-path: inset(0 0 0 0); filter: none; } }
.jg-tl-when { display: flex; flex-direction: column; font-size: 12px; color: var(--text-sub); line-height: 1.3; }
.jg-tl-when b { color: var(--text); font-size: 13px; }
.jg-tl-item.is-big {
  background: radial-gradient(ellipse 70% 130% at 30% 50%, color-mix(in srgb, var(--jg-ink) 11%, transparent), transparent 75%);
}
.jg-tl-item.is-big .jg-tl-text { font-weight: 700; text-shadow: 0 0 5px color-mix(in srgb, var(--jg-ink) 28%, transparent); }
.jg-tl-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-right: 6px; border-radius: 3px;
  background: var(--jg-shu); color: var(--jg-paper); font-family: var(--font-serif); font-size: 12px; font-weight: 800; line-height: 1;
  transform: rotate(-7deg); vertical-align: 1px; text-shadow: none; animation: jg-stamp .35s cubic-bezier(.3, 1.4, .5, 1) .35s both;
}
.k-famine, .k-epidemic, .k-war, .k-disaster, .k-loss { border-left-color: var(--jg-shu); }
.k-choice { border-left-color: var(--accent); font-weight: 700; }
.k-family, .k-love, .k-luck { border-left-color: var(--good); }
.k-witness, .k-era, .k-gengo, .k-note { border-left-color: var(--jg-ai); }
.k-gengo .jg-tl-text, .k-era .jg-tl-text, .k-note .jg-tl-text { color: var(--text-sub); font-size: 13px; }
.k-birth .jg-tl-text { font-family: var(--font-serif); }
.k-death .jg-tl-text { font-family: var(--font-serif); color: var(--text-sub); }
.k-bad { border-left-color: var(--jg-kin); }

.jg-controls { margin-bottom: 8px; }
.jg-choice-card { border: 2px solid var(--accent); }
.jg-q { font-size: 18px; font-weight: 800; line-height: 1.5; margin: 0 0 12px; }

/* 最期（画面内の静かなフェード。演出オーバーレイの下にも残す） */
.jg-life.is-ending .jg-head, .jg-life.is-ending .jg-tlbox, .jg-life.is-ending .jg-banner { opacity: .4; transition: opacity 2.4s ease; }
.jg-end { text-align: center; padding: 12px 4px 4px; animation: jg-slow 2.2s ease both; }
.jg-end-age { font-size: 28px; font-weight: 800; margin: 0 0 6px; letter-spacing: .1em; }
.jg-end-epi { font-size: 16px; line-height: 1.9; color: var(--text-sub); margin: 0 0 16px; }
.jg-end-btn { animation: jg-slow 1.2s ease 1.8s both; }
@keyframes jg-slow { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 最期の演出（オーバーレイ） ---------- */
body.jg-noscroll { overflow: hidden; }
.jg-death {
  position: fixed; inset: 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  color: #e9dfc8; background-color: #120f0c; animation: jg-dbg 1.7s ease both;
  --jg-ink: #e9dfc8; --jg-paper: #16120e; --jg-paper2: #2a231b; --jg-shu: #d9574a; --jg-kin: #c9a04e; --jg-ai: #7b9cc8; --jg-sumi: #a89c8a;
}
@keyframes jg-dbg { 0%, 70% { background-color: rgba(18, 15, 12, 0); } 100% { background-color: #120f0c; } }
.jg-death-ink { position: fixed; inset: 0; pointer-events: none; }
.jg-death-ink svg { width: 100%; height: 100%; }
.jga-ink1, .jga-ink2, .jga-ink3 { transform-box: fill-box; transform-origin: center; }
.jga-ink1 { animation: jg-ink 1.5s cubic-bezier(.55, 0, .3, 1) .1s both; }
.jga-ink2 { animation: jg-ink 1s cubic-bezier(.55, 0, .3, 1) both; }
.jga-ink3 { animation: jg-ink 1.1s cubic-bezier(.55, 0, .3, 1) .25s both; }
@keyframes jg-ink { from { transform: scale(.01); } to { transform: scale(1); } }
.jg-death-body {
  position: relative; z-index: 1; min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
}
.jg-tablet {
  position: relative; z-index: 2; writing-mode: vertical-rl; text-orientation: mixed; display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; height: min(300px, 44vh); max-width: 100%; margin: 0; padding: 56px 16px 16px; color: var(--jg-board-ink); font-family: var(--font-serif);
  background: var(--jg-board) linear-gradient(90deg, rgba(0, 0, 0, .07), transparent 22%, transparent 78%, rgba(0, 0, 0, .08));
  clip-path: polygon(50% 0, 100% 26px, 100% 36px, 92% 42px, 100% 48px, 100% 100%, 0 100%, 0 48px, 8% 42px, 0 36px, 0 26px);
  animation: jg-rise 1.1s ease 1.2s both;
}
.jg-tablet p { margin: 0; }
.jg-tablet-txt { font-size: 17px; line-height: 1.8; letter-spacing: .1em; font-weight: 700; }
.jg-tablet-age { align-self: flex-end; font-size: 18px; letter-spacing: .14em; font-weight: 800; color: var(--jg-board-shu); margin-top: auto; }
.jg-tablet-age b { font-size: 26px; }
.jg-tablet.is-scroll {
  clip-path: none; border-top: 10px solid #6b4a2a; border-bottom: 10px solid #6b4a2a; border-radius: 3px; padding-top: 22px;
  box-shadow: 0 0 0 3px var(--jg-kin) inset, 0 8px 24px rgba(90, 60, 20, .3);
}
@keyframes jg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.jg-death-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin-top: -22px;
  box-shadow: 0 0 0 1px rgba(233, 223, 200, .16); animation: jg-slow 1.4s ease 2.2s both;
}
.jg-death-scene .jg-pic { position: absolute; inset: 0; }
.jg-death-cap { margin: 12px 0 0; font-family: var(--font-serif); letter-spacing: .14em; font-size: 14px; opacity: .8; animation: jg-slow 1s ease 2.6s both; }
.jg-death-btn { margin-top: 14px; background: transparent; color: inherit; border-color: currentColor; animation: jg-slow .8s ease 3s both; }
.jg-death.is-bright {
  color: #1a1714; background-color: #f4ead2; animation: none;
  --jg-ink: #1a1714; --jg-paper: #efe6d2; --jg-paper2: #e0d2b2; --jg-shu: #b8322a; --jg-kin: #a87b2f; --jg-ai: #3d5a80; --jg-sumi: #6b625a;
}
.jg-death-sun {
  position: fixed; inset: 0; pointer-events: none; background-color: #f4ead2;
  background-image: radial-gradient(circle at 50% 108%, rgba(214, 90, 50, .55), rgba(232, 176, 96, .35) 32%, rgba(244, 234, 210, 0) 68%);
  animation: jg-sunrise 2.2s ease both;
}
@keyframes jg-sunrise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.jg-death.is-bright .jg-tablet { animation-delay: .6s; }
.jg-death.is-bright .jg-death-scene { animation-delay: 1.2s; box-shadow: 0 6px 20px rgba(90, 60, 20, .2); }
.jg-death.is-bright .jg-death-cap { animation-delay: 1.6s; }
.jg-death.is-bright .jg-death-btn { animation-delay: 2s; }
.jg-death-fig { width: 76px; height: 92px; margin-top: -60px; position: relative; z-index: 3; align-self: flex-end; margin-right: 8%; animation: jg-hop .9s ease 1.6s both; }
.jg-death-fig svg { width: 100%; height: 100%; }
@keyframes jg-hop { 0% { opacity: 0; transform: translateY(24px); } 60% { opacity: 1; transform: translateY(-8px); } 100% { transform: none; } }
.jg-crane-fly { position: fixed; z-index: 2; top: 12%; left: -40%; width: 130px; pointer-events: none; animation: jg-flyby 7s ease-in-out .8s both; }
.jg-crane-fly.c2 { top: 22%; width: 90px; animation-delay: 1.6s; animation-duration: 8s; }
.jg-crane-fly svg { width: 100%; height: auto; animation: jg-flap .9s ease-in-out infinite alternate; }
@keyframes jg-flyby { from { transform: translate(0, 30px); opacity: 0; } 10% { opacity: 1; } to { transform: translate(170vw, -40px); opacity: 1; } }
@keyframes jg-flap { from { transform: scaleY(1); } to { transform: scaleY(.72); } }
.jg-petals { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.jg-petal { position: absolute; top: -20px; left: var(--x, 50%); width: calc(14px * var(--s, 1)); height: calc(13px * var(--s, 1)); animation: jg-petal var(--d, 6s) linear var(--dl, 0s) both; }
.jg-petal svg { width: 100%; height: 100%; }
@keyframes jg-petal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(var(--sx, 40px), 108vh) rotate(var(--r, 540deg)); opacity: .9; } }

/* 挿絵の小さな動き（演出オーバーレイ内だけ） */
.jg-anim .jga-spin { transform-box: fill-box; transform-origin: center; animation: jg-rot 5s linear infinite; }
.jg-anim .jga-steam { animation: jg-steam 3s ease-in-out infinite; }
.jg-anim .jga-swing { transform-box: fill-box; transform-origin: 50% 0; animation: jg-swing 3.4s ease-in-out infinite alternate; }
.jg-anim .jga-drift, .jg-anim .jga-smoke { animation: jg-drift 8s ease-in-out infinite alternate; }
.jg-anim .jga-bob, .jg-anim .jga-fly { animation: jg-bob 2.8s ease-in-out infinite alternate; }
.jg-anim .jga-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: jg-sway 3.6s ease-in-out infinite alternate; }
.jg-anim .jga-shake { animation: jg-quake .5s ease-in-out infinite; }
.jg-anim .jga-fall { animation: jg-leaf 6s ease-in-out infinite alternate; }
@keyframes jg-steam { 0%, 100% { opacity: .35; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes jg-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes jg-drift { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes jg-bob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@keyframes jg-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes jg-leaf { from { transform: translate(-6px, -4px); } to { transform: translate(8px, 10px); } }

/* ---------- 結果 ---------- */
.jg-hero { text-align: center; }
.jg-hero-vis { position: relative; margin: 4px -6px 10px; }
.jg-hero-pic { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.jg-hero-pic .jg-pic { position: absolute; inset: 0; }
/* 人形の肖像：正方形で顔を大きく見せる */
.jg-hero-pic.has-portrait { aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto; background: #14110e; }
.jg-death-scene.has-portrait { aspect-ratio: 1 / 1; max-width: 340px; margin-left: auto; margin-right: auto; }
.jg-pic.is-portrait > img { object-position: 50% 28%; }
.jg-hero-emb { position: absolute; left: 8px; top: 8px; width: 64px; height: 64px; z-index: 2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.jg-hero-emb svg { width: 100%; height: 100%; }
.jg-epi { font-size: 18px; line-height: 1.85; margin: 8px 0 6px; }
.jg-kyonen { display: flex; align-items: flex-end; justify-content: center; gap: 6px; font-weight: 800; font-family: var(--font-serif); }
.jg-kyonen > span { padding-bottom: 10px; }
.jg-kyonen .big-num { color: var(--accent); }
.jg-kyonen-fig { width: 52px; height: 62px; margin-right: 6px; align-self: center; }
.jg-kyonen-fig svg { width: 100%; height: 100%; }
.jg-tags { justify-content: center; margin: 10px 0 0; gap: 6px; }
.jg-titles { display: flex; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; gap: 8px; }
.jg-tbadge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--surface-2);
  font-size: 13px; font-weight: 700; line-height: 1.3; text-align: left; border: 1px solid var(--line);
}
.jg-tbadge.is-new { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.jg-tbadge-seal { width: 30px; height: 30px; flex: none; transform: rotate(-6deg); }
.jg-tbadge-seal svg { width: 100%; height: 100%; }
.jg-end-label { margin: 12px 0 0; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.jg-share { margin: 4px 0 10px; }
.jg-again { display: grid; gap: 8px; margin-bottom: 16px; }
.jg-daily-next { text-align: center; }
.jg-h3-tl { margin-top: 18px; }
.jg-agg-big { font-size: 22px; color: var(--accent); }
.jg-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; margin: 8px 0 4px; }
.jg-bar { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.jg-bar-col { height: 80px; width: 100%; background: var(--surface-2); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.jg-bar-col > span { display: block; width: 100%; background: var(--info-soft); border-top: 2px solid var(--jg-ai); min-height: 0; }
.jg-bar.is-me .jg-bar-col > span { background: var(--jg-shu); border-top-color: var(--jg-shu); }
.jg-bar-l { font-size: 10px; color: var(--text-sub); margin-top: 2px; }
.jg-colrow { display: flex; justify-content: space-between; font-size: 14px; margin: 8px 0 4px; }
.jg-colbtn { margin-top: 14px; }
.jg-src { padding-left: 1.2em; margin: 6px 0 10px; }
.jg-src li { margin: 2px 0; }

/* 図鑑モーダル */
.jg-zrow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.jg-zera { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 4px; font-family: var(--font-serif); }
.jg-zemb { width: 34px; height: 34px; flex: none; }
.jg-zemb svg { width: 100%; height: 100%; }
.jg-zrow.is-none .jg-zemb { filter: grayscale(1); opacity: .45; }
.jg-zrow .row-wrap { gap: 4px; }
.jg-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jg-tcell { position: relative; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; color: var(--text-sub); line-height: 1.45; }
.jg-tcell b { display: block; font-size: 13px; color: var(--text-sub); }
.jg-tcell.is-got { background: var(--good-soft); padding-right: 40px; }
.jg-tcell.is-got b { color: var(--good); }
.jg-tcell-seal { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; transform: rotate(-6deg); }
.jg-tcell-seal svg { width: 100%; height: 100%; }

/* 解説（静的テキスト） */
.jg-about h2 { font-size: 20px; margin-top: 28px; font-family: var(--font-serif); }
.jg-about h3 { font-size: 16px; margin-top: 18px; font-family: var(--font-serif); }
.jg-about p, .jg-about li { font-size: 14px; line-height: 1.85; }
.jg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 12px; }
.jg-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.55; background: var(--surface); }
.jg-table th, .jg-table td { border: 1px solid var(--line); padding: 6px 6px; vertical-align: top; text-align: left; }
.jg-table th { background: var(--surface-2); white-space: nowrap; }

@media (min-width: 560px) {
  .gcard { height: 256px; }
  .gcard-art { width: 92px; height: 92px; }
  .gc-house .gcard-art { width: 80px; height: 96px; }
  .gc-land .gcard-art { width: 110px; height: 74px; }
  .gcard-main { font-size: 16px; }
  .gcard-sub { font-size: 12px; }
  .jg-hero-t { aspect-ratio: 16 / 9; }
}
@media (max-width: 350px) {
  .gcard { height: 222px; }
  .gcard-main { font-size: 13px; }
}
/* 動きを減らす設定：common.css でアニメは止まる。演出用の要素は最初から最終状態で表示される */
@media (prefers-reduced-motion: reduce) {
  .jg-emaki-track { transform: none; }
  .jg-crane-fly, .jg-petals, .jg-gold-rain, .jg-splash { display: none; }
}

/* ---------- 自分と家族の写真ステージ ---------- */
.jg-stage { position: relative; height: 236px; margin: 0 0 12px; border-radius: 14px; overflow: hidden; background: #14110e; box-shadow: var(--shadow); isolation: isolate; }
.jg-st-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #3a2f25 0%, #14110e 70%); }
.jg-st-me { position: absolute; left: 50%; bottom: 0; width: 230px; height: 230px; margin-left: -115px; z-index: 2; transform-origin: 50% 100%; transition: transform .6s ease, filter .6s ease; }
.jg-st-me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; opacity: 0; transition: opacity .45s ease;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, #000 62%, transparent 100%); }
.jg-st-me img.is-on { opacity: 1; animation: jg-breathe 4.2s ease-in-out infinite; }
@keyframes jg-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-2px); } }
.jg-stage.is-child .jg-st-me { transform: scale(.8); }
.jg-stage.is-old .jg-st-me { filter: grayscale(.45) sepia(.25) contrast(1.05); }
.jg-stage.is-dead .jg-st-me { filter: grayscale(1) brightness(.6); }
/* 配偶者：右後ろに少し小さく */
.jg-st-spouse { position: absolute; right: -6px; bottom: 0; width: 160px; height: 170px; z-index: 1; opacity: .92; }
.jg-st-spouse img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  -webkit-mask-image: radial-gradient(ellipse 58% 68% at 50% 42%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 58% 68% at 50% 42%, #000 58%, transparent 100%); }
.jg-st-spouse.is-in { animation: jg-slidein .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes jg-slidein { from { transform: translateX(80px); opacity: 0; } to { transform: none; opacity: .92; } }
/* 子ども：左下に並ぶ */
.jg-st-kids { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap-reverse; gap: 4px; max-width: 34%; }
.jg-st-kid { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #efe6d2; border: 2px solid #efe6d2; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: filter .8s ease, opacity .8s ease; }
.jg-st-kids.is-many .jg-st-kid { width: 30px; height: 30px; }
.jg-st-kid img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.jg-st-kid svg { width: 100%; height: 130%; margin-top: -2px; }
.jg-st-kid.is-new { animation: jg-kidpop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes jg-kidpop { from { transform: scale(0) translateY(20px); } to { transform: none; } }
.jg-st-kid.is-lost { filter: grayscale(1) brightness(.55); opacity: .55; border-color: #6b625a; }
/* 出来事のしるし（朱の判子） */
.jg-st-tag { position: absolute; left: 12px; top: 12px; z-index: 4; min-width: 48px; height: 48px; padding: 0 6px; border: 3px solid #d0473a; border-radius: 8px; color: #e2574a;
  font-family: var(--font-serif); font-weight: 900; font-size: 26px; line-height: 42px; text-align: center; opacity: 0; transform: rotate(-10deg) scale(1.6); background: rgba(20, 17, 14, .55); }
.jg-st-tag.is-on { animation: jg-stampin 2.4s ease both; }
@keyframes jg-stampin { 0% { opacity: 0; transform: rotate(-10deg) scale(1.8); } 12% { opacity: 1; transform: rotate(-10deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(-10deg) scale(1); } }
/* 出来事への反応 */
.jg-st-me.fx-smile { animation: jg-hop .7s ease; }
.jg-st-me.fx-shock { animation: jg-jolt .8s ease; }
.jg-st-me.fx-cry { animation: jg-sink 1.4s ease; }
.jg-st-me.fx-anger { animation: jg-rage .6s ease; filter: drop-shadow(0 0 12px rgba(208, 71, 58, .7)); }
@keyframes jg-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) rotate(-2deg); } 60% { transform: translateY(0) rotate(1deg); } 80% { transform: translateY(-5px); } }
@keyframes jg-jolt { 0% { transform: none; } 15% { transform: scale(1.14); } 25% { transform: scale(1.12) translateX(-6px); } 35% { transform: scale(1.12) translateX(6px); } 45% { transform: scale(1.1) translateX(-3px); } 100% { transform: none; } }
@keyframes jg-sink { 0% { transform: none; } 40% { transform: translateY(10px) rotate(-3deg); } 100% { transform: none; } }
@keyframes jg-rage { 0%, 100% { transform: none; } 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.jg-stage.is-child .jg-st-me.fx-smile, .jg-stage.is-child .jg-st-me.fx-shock, .jg-stage.is-child .jg-st-me.fx-cry, .jg-stage.is-child .jg-st-me.fx-anger { animation: none; }
.jg-stage.is-rm .jg-st-me img.is-on { animation: none; }
/* 年表の史実 */
.jg-tl-item.k-history .jg-tl-text { color: var(--text-sub); font-size: 13px; }
.jg-tl-item.k-history { opacity: .85; }
@media (min-width: 560px) { .jg-stage { height: 280px; } .jg-st-me { width: 280px; height: 280px; margin-left: -140px; } .jg-st-spouse { width: 190px; height: 200px; right: 40px; } }

/* ---------- 1画面レイアウト（家族の情景・状態・年表を同時に） ---------- */
.jg-life.is-compact { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 78px); height: calc(100dvh - 78px); min-height: 520px; margin-top: -6px; }
.jg-life.is-compact .jg-head { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 9px; box-shadow: var(--shadow); }
.jg-life.is-compact .jg-yearrow { gap: 8px; align-items: baseline; margin: 0; }
.jg-life.is-compact .jg-year { font-size: 16px; }
.jg-life.is-compact .jg-age { font-size: 24px; }
.jg-era-tag { flex: none; background: var(--jg-shu, #b8322a); color: #fff; }
.jg-life.is-compact .jg-who { font-size: 12px; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-progrow { gap: 8px; margin-bottom: 6px; }
.jg-progrow .progress { height: 6px; }
.jg-life.is-compact .jg-meters { grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
.jg-life.is-compact .jg-meter-top { font-size: 11px; }
.jg-life.is-compact .jg-meter-name { display: none; }
.jg-life.is-compact .jg-meter .meter { height: 5px; }
@media (min-width: 420px) { .jg-life.is-compact .jg-meter-name { display: inline; } }
.jg-tlwrap { position: relative; flex: 1 1 auto; min-height: 140px; }
.jg-life.is-compact .jg-tlbox { position: absolute; inset: 0; max-height: none; height: auto; overflow-y: auto; margin: 0; }
.jg-life.is-compact .jg-choice { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 100%; overflow-y: auto; margin: 0; filter: drop-shadow(0 -6px 16px rgba(0, 0, 0, .25)); }
.jg-life.is-compact .jg-choice .card { margin: 0; }
.jg-life.is-compact .jg-controls { flex: none; margin: 0; }
.jg-life.is-compact .jg-end { flex: none; }

/* ---------- 家族の情景 ---------- */
.jg-scene { position: relative; flex: none; height: 32vh; min-height: 170px; max-height: 250px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); isolation: isolate; }
.jg-sc-sky { position: absolute; inset: 0; transition: background 1.2s ease; background: linear-gradient(#cfd9df 0%, #efe6d2 70%); }
.jg-sc-sun { position: absolute; right: 14%; top: 10%; width: 46px; height: 46px; border-radius: 50%; background: #f3c86a; box-shadow: 0 0 30px rgba(243, 200, 106, .7); transition: all 1.2s ease; }
.jg-sc-home { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.jg-sc-fx { position: absolute; inset: 0; pointer-events: none; transition: background 1.2s ease; }
.sky-joy .jg-sc-sky { background: linear-gradient(#f6d9b5 0%, #fbeee0 70%); }
.sky-joy .jg-sc-fx { background: radial-gradient(circle at 50% 40%, rgba(255, 220, 160, .35), transparent 60%); }
.sky-famine .jg-sc-sky { background: linear-gradient(#a08a6a 0%, #cbb38a 70%); }
.sky-famine .jg-sc-sun { background: #b0773a; box-shadow: none; opacity: .6; }
.sky-epidemic .jg-sc-sky { background: linear-gradient(#7c7a8e 0%, #b7b3bd 70%); }
.sky-epidemic .jg-sc-sun { opacity: 0; }
.sky-epidemic .jg-sc-fx { background: radial-gradient(ellipse at 50% 60%, rgba(120, 100, 150, .25), transparent 70%); }
.sky-war .jg-sc-sky { background: linear-gradient(#5a2a22 0%, #c06a3a 70%); }
.sky-war .jg-sc-sun { background: #e04a2a; box-shadow: 0 0 40px rgba(224, 74, 42, .8); }
.sky-disaster .jg-sc-sky { background: linear-gradient(#3e4650 0%, #7d8790 70%); }
.sky-disaster .jg-sc-sun { opacity: 0; }
.sky-loss .jg-sc-sky { background: linear-gradient(#4a4e58 0%, #8e929a 70%); }
.sky-loss .jg-sc-sun { opacity: .25; filter: grayscale(1); }
.sky-loss .jg-sc-fx { background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(200, 210, 230, .25) 14px 15px); animation: jg-rain .6s linear infinite; }
@keyframes jg-rain { to { background-position: 0 30px; } }
.jg-scene.is-quake { animation: jg-quake .7s ease; }
@keyframes jg-quake { 10%, 50%, 90% { transform: translateX(-4px); } 30%, 70% { transform: translateX(4px); } }
/* 人物の配置：父母は左奥、本人は中央、配偶者は右、子どもは手前に並ぶ */
.jg-sc-floor { position: absolute; left: 0; right: 0; bottom: 4%; height: 78%; z-index: 2; }
.jg-p { --w: 64px; --h: 77px; position: absolute; bottom: 0; width: var(--w); height: var(--h); transform-origin: 50% 100%; transition: left .9s ease, opacity 1.2s ease, filter 1.2s ease; }
.jg-p svg { width: 100%; height: 100%; display: block; animation: jg-idle 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 100%; }
@keyframes jg-idle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(1.015); } }
.jg-p-me { --w: 92px; --h: 110px; left: calc(50% - 46px); z-index: 3; }
.jg-p-father { left: 5%; bottom: 10%; z-index: 1; }
.jg-p-mother { left: calc(5% + 50px); bottom: 10%; z-index: 1; }
.jg-p-spouse { --w: 78px; --h: 94px; left: calc(50% + 34px); z-index: 2; }
.jg-p-kid { --w: 60px; --h: 72px; left: calc(100% - 52px - var(--k, 0) * 36px); bottom: -2%; z-index: 4; }
.jg-scene:not(.has-spouse) .jg-p-kid { left: calc(100% - 52px - var(--k, 0) * 34px); }
.jg-p-label { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 10px; color: #3a3028; background: rgba(239, 230, 210, .85); padding: 0 5px; border-radius: 6px; }
.jg-p.is-enter { animation: jg-pin .9s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes jg-pin { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }
.jg-p.is-leave { animation: jg-pout 1.4s ease forwards; }
@keyframes jg-pout { to { opacity: 0; transform: translateX(-40px); } }
.jg-p.is-ghost { animation: jg-ghost 1.6s ease forwards; }
@keyframes jg-ghost { 30% { filter: grayscale(1) brightness(1.3); } 100% { opacity: 0; transform: translateY(-30px); filter: grayscale(1) brightness(1.5); } }
.jg-p.is-dead { filter: grayscale(1) brightness(.75); }
.jg-p.is-dead svg { animation: none; }
/* まばたき */
.jga-lid { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: jg-blink 5.5s infinite; animation-delay: var(--d, 0s); }
@keyframes jg-blink { 0%, 93%, 100% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } }
/* 出来事への反応 */
.jg-p.r-smile svg { animation: jg-phop .8s ease; }
.jg-p.r-shock svg { animation: jg-pjolt .9s ease; }
.jg-p.r-cry svg { animation: jg-pdroop 1.6s ease; }
.jg-p.r-anger svg { animation: jg-pshake .7s ease; }
@keyframes jg-phop { 0%, 100% { transform: none; } 30% { transform: translateY(-16px) rotate(-4deg); } 55% { transform: translateY(0) rotate(2deg); } 75% { transform: translateY(-6px); } }
@keyframes jg-pjolt { 0% { transform: none; } 12% { transform: translateY(-10px) scale(1.08); } 24% { transform: translateX(-5px) scale(1.06); } 36% { transform: translateX(5px) scale(1.06); } 50% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes jg-pdroop { 0% { transform: none; } 40% { transform: translateY(6px) rotate(-5deg) scaleY(.94); } 100% { transform: none; } }
@keyframes jg-pshake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.jg-scene .jg-st-tag { z-index: 6; }
.jg-scene.is-rm .jg-p svg, .jg-scene.is-rm .jga-lid { animation: none; }
/* 年齢で大きさが変わる（赤子・子ども・老人） */
.jg-p.st-baby { width: calc(var(--w) * .55); height: calc(var(--h) * .55); }
.jg-p.st-child { width: calc(var(--w) * .74); height: calc(var(--h) * .74); }
.jg-p.st-elder { width: calc(var(--w) * .94); height: calc(var(--h) * .94); }
@media (min-width: 560px) { .jg-p { --w: 74px; --h: 89px; } .jg-p-me { --w: 110px; --h: 132px; left: calc(50% - 55px); } .jg-p-spouse { --w: 88px; --h: 106px; } .jg-p-kid { --w: 66px; --h: 79px; } }
.jg-p-me.st-child { width: calc(var(--w) * .62); height: calc(var(--h) * .62); left: calc(50% - 28px); }
.jg-p-me.st-baby { width: calc(var(--w) * .45); height: calc(var(--h) * .45); left: calc(50% - 20px); }
/* 選択の「その後」 */
.jg-tl-item.k-conseq .jg-tl-text { color: #2e7d4f; font-weight: 700; }
.jg-tl-item.k-conseqbad .jg-tl-text { color: #b8322a; font-weight: 700; }
.jg-tl-item.k-conseq, .jg-tl-item.k-conseqbad { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: 6px; }
/* 数値の変化 */
.jg-meter-top { position: relative; }
.jg-delta { position: absolute; right: 0; top: -12px; font-size: 11px; font-weight: 800; animation: jg-delta 1.5s ease forwards; pointer-events: none; }
.jg-delta.up { color: #2e7d4f; } .jg-delta.down { color: #b8322a; }
@keyframes jg-delta { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
/* ペット */
.jg-p-pet { --w: 48px; --h: 36px; left: calc(50% - 96px); bottom: -1%; z-index: 4; }
.jg-p-pet svg { animation: jg-petidle 1.8s ease-in-out infinite; }
@keyframes jg-petidle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.jg-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: jg-wag .5s ease-in-out infinite alternate; }
@keyframes jg-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.jg-scene.has-parents .jg-p-pet { left: calc(50% - 90px); }
@media (min-width: 560px) { .jg-p-pet { --w: 58px; --h: 44px; left: calc(50% - 120px); } }
.jg-p-label { white-space: nowrap; }
.jg-p-pet { left: calc(50% + 22px); bottom: -3%; z-index: 5; }
.jg-scene.has-parents .jg-p-pet { left: calc(50% + 22px); }
.jg-p-pet .jg-p-label { top: -12px; font-size: 9px; }
@media (min-width: 560px) { .jg-p-pet { left: calc(50% + 34px); } }