/* 誕生日の“生まれやすさ”ランキング */
:root {
  --tr-bg1: #fff3dd; --tr-bg2: #f7d9c4; --tr-sp1: #f6dca8; --tr-sp2: #d9a86a; --tr-cream: #fffaf2; --tr-berry: #e23d3d;
  --tr-leaf: #2e9e6a; --tr-plate: #e9e3d8; --tr-flame: #ffb52e; --tr-c1: #e4572e; --tr-c2: #2f6fd6; --tr-c3: #2e9e6a; --tr-c4: #c98a12;
  --tr-cd1: #f1a3b8; --tr-cd2: #9fc5f0; --tr-cd3: #f7d36b; --tr-text: #5a2a20; --tr-mark: #1d1b18;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tr-bg1: #3b2a35; --tr-bg2: #1f1820; --tr-plate: #4a4440; --tr-text: #fff1d6; --tr-mark: #ffffff;
  }
}
:root[data-theme="dark"] { --tr-bg1: #3b2a35; --tr-bg2: #1f1820; --tr-plate: #4a4440; --tr-text: #fff1d6; --tr-mark: #ffffff; }

.tr-hero h1 em { font-style: normal; color: var(--accent); }
.tr-hero .lead { margin-top: 12px; }
.tr-title-img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }

/* ケーキ */
.tr-cake { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.tr-bg1 { stop-color: var(--tr-bg1); } .tr-bg2 { stop-color: var(--tr-bg2); }
.tr-sp1 { stop-color: var(--tr-sp1); } .tr-sp2 { stop-color: var(--tr-sp2); }
.tr-cream { fill: var(--tr-cream); }
.tr-berry { fill: var(--tr-berry); }
.tr-leaf { fill: none; stroke: var(--tr-leaf); stroke-width: 2; }
.tr-plate { fill: var(--tr-plate); }
.tr-candle.tr-cd0 { fill: var(--tr-cd1); } .tr-candle.tr-cd1 { fill: var(--tr-cd2); } .tr-candle.tr-cd2 { fill: var(--tr-cd3); }
.tr-flame { fill: var(--tr-flame); transform-box: fill-box; transform-origin: 50% 100%; animation: tr-flicker .6s ease-in-out infinite alternate; }
@keyframes tr-flicker { from { transform: scale(1, 1); opacity: .9; } to { transform: scale(.82, 1.12); opacity: 1; } }
.tr-confetti.tr-c0 { fill: var(--tr-c1); } .tr-confetti.tr-c1 { fill: var(--tr-c2); } .tr-confetti.tr-c2 { fill: var(--tr-c3); } .tr-confetti.tr-c3 { fill: var(--tr-c4); }
.tr-cake-t { font-size: 18px; font-weight: 900; fill: var(--tr-text); letter-spacing: 1px; }

/* 入力 */
.tr-dob { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tr-today { width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); display: block; }
.tr-today:hover { border-color: var(--accent); }
.tr-twobtn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.tr-twobtn .btn { padding: 10px 8px; font-size: 14px; min-width: 0; }

/* 発表 */
.tr-drum { text-align: center; }
.tr-rank { font-size: clamp(56px, 18vw, 96px); font-weight: 900; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tr-rank small { font-size: 18px; color: var(--text-sub); font-weight: 700; }
.tr-rank-final { font-size: clamp(48px, 15vw, 80px); }
.tr-res { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: center; }
@media (min-width: 560px) { .tr-res { grid-template-columns: 240px 1fr; text-align: left; align-items: center; } }
.tr-res.is-rare { border: 2px solid var(--accent); }
.tr-res-img { width: 100%; max-width: 260px; height: auto; border-radius: 16px; margin: 0 auto; display: block; }
.tr-res .tr-cake { max-width: 320px; margin: 0 auto; }
.tr-type { font-size: clamp(22px, 6.5vw, 30px); font-weight: 900; line-height: 1.3; margin: 4px 0 6px; }
.tr-stats { margin-bottom: 14px; }
.tr-stats .stat b { font-size: 20px; }
.tr-note { color: var(--text-sub); }
.tr-special { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; }

/* 地図 */
.tr-heat { width: 100%; height: auto; display: block; margin-top: 6px; }
.tr-heat-t, .tr-heat-m { font-size: 8px; fill: var(--text-sub); font-weight: 700; }
.tr-mark { fill: none; stroke: var(--tr-mark); stroke-width: 2; }
.tr-mark-t { font-size: 10px; font-weight: 900; fill: var(--accent); }
.tr-mark-l { stroke: var(--accent); stroke-width: 1; }
.tr-cell.is-leap { stroke: var(--text-sub); stroke-width: .6; stroke-dasharray: 1 1; }
.tr-list { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.tr-list li { margin-bottom: 6px; }
.tr-dist { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 130px; margin-top: 8px; }
.tr-dist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 16px; }
.tr-dist-bar { width: 100%; max-width: 36px; background: var(--surface-2); border-radius: 6px 6px 0 0; }
.tr-dist-col.is-me .tr-dist-bar { background: var(--accent); }
.tr-dist-col .tiny { color: var(--text-sub); white-space: nowrap; }

/* デイリー */
.tr-daily { border-top: 4px solid var(--accent); }
.tr-dq-lead { font-weight: 700; margin: 10px 0 6px; }
.tr-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.tr-vs-btn { text-align: center; font-size: 20px; }
.tr-dscore { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.tr-dmarks { letter-spacing: 3px; }
.tr-dlist { padding-left: 18px; font-size: 13px; margin: 8px 0 0; }

.tr-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-badge { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: .55; }
.tr-badge.on { opacity: 1; border: 1px solid var(--accent); background: var(--accent-soft); }
.tr-badge-emoji { font-size: 24px; }
.tr-friend { border-left: 6px solid var(--accent); }
.tr-disclaimer { font-size: 12px; color: var(--text-sub); margin-top: 16px; }
.tr-table-wrap { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-table th, .tr-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.tr-about h2 { font-size: 18px; }
.tr-rank-final { font-size: clamp(44px, 13vw, 64px); white-space: nowrap; }
.ai-note { margin: 4px 0 8px; text-align: right; }