/* あなたの80年、円グラフにすると：ゲーム固有のスタイル（色はCSS変数のみ） */
:root {
  --jp-sleep: #5b6fd6;
  --jp-phone: #e4572e;
  --jp-work: #2e9e6a;
  --jp-commute: #d49a1c;
  --jp-house: #c9559a;
  --jp-other: #a9b1a3;
  --jp-rest: #ebe7f5;
  --jp-label: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --jp-sleep: #7d8ff0; --jp-phone: #ff7a50; --jp-work: #4cc48b; --jp-commute: #e9b04a; --jp-house: #e27bb8; --jp-other: #737a6e; --jp-rest: #2b2838; --jp-label: #10101a; }
}
:root[data-theme="dark"] { --jp-sleep: #7d8ff0; --jp-phone: #ff7a50; --jp-work: #4cc48b; --jp-commute: #e9b04a; --jp-house: #e27bb8; --jp-other: #737a6e; --jp-rest: #2b2838; --jp-label: #10101a; }

.jp-hero { padding: 12px 0 4px; }
.jp-hero h1 em { font-style: normal; color: var(--accent); }
.jp-start { margin: 12px 0 16px; }
.jp-list { margin: 6px 0 0; padding-left: 1.2em; }
.jp-list li + li { margin-top: 4px; }
.jp-friend { border-color: var(--accent); background: var(--accent-soft); }
.jp-daily .btn { white-space: normal; }
.jp-disclaimer { font-size: 11px; color: var(--text-sub); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; margin: 16px 0 0; line-height: 1.6; }

/* 円グラフ */
.jp-hero-pie { display: flex; justify-content: center; margin: 6px 0; }
.jp-pie { width: 100%; max-width: 260px; height: auto; }
.jp-small-pie .jp-pie { max-width: 160px; }
.jp-seg { animation: jp-in .6s ease both; transform-origin: 110px 110px; }
@keyframes jp-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.jp-seg-label { fill: var(--jp-label); font-size: 12px; font-weight: 800; pointer-events: none; }
.jp-l-other, .jp-l-rest { fill: var(--text); }
.jp-center-big { fill: var(--text); font-size: 24px; font-weight: 900; }
.jp-center-sub { fill: var(--text-sub); font-size: 11px; font-weight: 700; }
.jp-c-sleep { fill: var(--jp-sleep); } .jp-c-phone { fill: var(--jp-phone); } .jp-c-work { fill: var(--jp-work); }
.jp-c-commute { fill: var(--jp-commute); } .jp-c-house { fill: var(--jp-house); } .jp-c-other { fill: var(--jp-other); } .jp-c-rest { fill: var(--jp-rest); }
.jp-bg-sleep { background: var(--jp-sleep); } .jp-bg-phone { background: var(--jp-phone); } .jp-bg-work { background: var(--jp-work); }
.jp-bg-commute { background: var(--jp-commute); } .jp-bg-house { background: var(--jp-house); } .jp-bg-other { background: var(--jp-other); }
.jp-legend { display: grid; gap: 4px; max-width: 360px; margin: 6px auto 0; text-align: left; font-size: 14px; }
.jp-legend-row { display: flex; align-items: center; gap: 8px; }
.jp-legend-row b { font-variant-numeric: tabular-nums; }
.jp-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* 80マス */
.jp-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 320px; margin: 6px auto 0; }
.jp-grid i { display: block; aspect-ratio: 1 / 1; border-radius: 3px; animation: jp-pop .35s ease both; }
@keyframes jp-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* 入力 */
.jp-q { font-size: 20px; margin: 12px 0 6px; }
.jp-val { font-size: clamp(36px, 11vw, 52px); font-weight: 900; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.jp-natline { color: var(--text-sub); margin-bottom: 6px; }
.jp-stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: center; margin: 10px 0; }
.jp-stepper .btn { padding: 8px 0; font-size: 22px; min-width: 0; }
.jp-daybar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--jp-rest); margin: 10px 0 4px; }
.jp-daybar i { display: block; height: 100%; transition: width .2s ease; }
.jp-daybar i.is-cur { box-shadow: inset 0 0 0 2px var(--text); }
.jp-warn { color: var(--bad); font-weight: 700; min-height: 1.2em; margin-top: 4px; }
.jp-next { margin-top: 14px; }

/* 結果 */
.jp-line1 { font-weight: 800; font-size: 17px; margin: 8px 0; }
.jp-type { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: left; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.jp-type b { font-size: 22px; }
.jp-type-emoji { font-size: 36px; }
.jp-gain { border-left: 4px solid var(--jp-phone); }
.jp-diff { display: grid; gap: 4px; max-width: 420px; margin: 6px auto 0; text-align: left; }
.jp-diff-row { display: grid; grid-template-columns: 1fr auto 4.4em; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.jp-diff-row b { text-align: right; font-variant-numeric: tabular-nums; }
.jp-diff-row.is-plus b { color: var(--accent); }
.jp-diff-row.is-minus b { color: var(--info); }
.jp-diff-row.is-even b { color: var(--text-sub); }
.jp-again { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 16px; }
.jp-again .btn { padding: 10px 12px; font-size: 14px; white-space: normal; line-height: 1.35; }
.jp-dist { margin-top: 10px; display: grid; gap: 4px; }
.jp-dist-row { display: grid; grid-template-columns: 9em 1fr 3em; gap: 6px; align-items: center; font-size: 12px; }
.jp-dist-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.jp-dist-bar i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.jp-dist-row.is-me { font-weight: 800; color: var(--accent); }
.jp-dist-row.is-me .jp-dist-bar i { background: var(--accent); }
.jp-dist-pct { text-align: right; font-variant-numeric: tabular-nums; }
.jp-sources ul { padding-left: 1.2em; margin: 8px 0; }
.jp-sources li + li { margin-top: 6px; }
.jp-big { font-size: 22px; font-weight: 800; }
.jp-big b { font-size: 56px; color: var(--accent); }
.jp-marks { font-size: 30px; letter-spacing: 4px; margin: 6px 0; }
.jp-quiz .choice { text-align: center; }

/* 図鑑 */
.jp-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.jp-zukan-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .6; }
.jp-zukan-item.on { opacity: 1; background: var(--surface); border: 1px solid var(--line); }
.jp-zukan-emoji { font-size: 26px; }

/* 静的解説 */
.jp-about h2 { font-size: 18px; margin-top: 8px; }
.jp-about p, .jp-about li { font-size: 14px; }
.jp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.jp-table th, .jp-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.jp-table th { color: var(--text-sub); white-space: nowrap; }
.jp-table a { word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .jp-seg, .jp-grid i { animation: none; } .jp-daybar i { transition: none; } }