/* 未年の年賀状メーカー：生成りの紙と朱・金 */
:root {
  --accent: #c0392b; --accent-ink: #ffffff; --accent-soft: #f8e1dc;
  --hn-paper: #fbf6ea; --hn-gold: #b8860b; --hn-ink: #1d1a16;
  --serif: "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d; --hn-gold: #f3c03b; }
}
:root[data-theme="dark"] { --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d; --hn-gold: #f3c03b; }

.mn-title { font-family: var(--serif); letter-spacing: .04em; font-size: clamp(26px, 7.4vw, 38px); }
.hn-hero { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--hn-paper); }
.hn-hero-svg, .hn-hero-svg svg { display: block; width: 100%; height: 100%; }
.hn-hero-svg svg { animation: hn-bob 3.6s ease-in-out infinite; transform-origin: 50% 80%; }
.hn-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hn-hero-badge { position: absolute; right: 12px; top: 12px; background: var(--hn-paper); color: #c0392b; border: 2px solid #c0392b; border-radius: 10px; padding: 4px 10px; font-family: var(--serif); font-weight: 700; font-size: 13px; line-height: 1.3; text-align: center; transform: rotate(4deg); }
.hn-hero-badge b { display: block; font-size: 26px; }
@keyframes hn-bob { 50% { transform: translateY(-4px) scale(1.01); } }
.hn-label { display: block; font-weight: 700; font-size: 14px; margin: 8px 0 4px; }
.hn-input { width: 100%; min-height: 48px; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; background: var(--surface); color: var(--text); }
.hn-input:focus { border-color: var(--accent); outline: none; }
.hn-dres { font-family: var(--serif); font-weight: 700; margin: 0 0 8px; }
.hn-friend { display: flex; gap: 12px; align-items: center; }
.hn-mini { width: 76px; flex: none; border-radius: 12px; overflow: hidden; }
.hn-mini svg { display: block; width: 100%; height: auto; }

/* 選ぶ */
.hn-q { font-family: var(--serif); font-size: 24px; text-align: center; margin: 6px 0 0; }
.hn-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hn-pick-i { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 8px 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.hn-pick-i:hover { border-color: var(--accent); }
.hn-pick-i.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(.98); }
.hn-pick-i small { font-size: 12px; color: var(--text-sub); line-height: 1.4; }
.hn-pick-svg { width: 100%; border-radius: 10px; overflow: hidden; }
.hn-pick-svg svg { display: block; width: 100%; height: auto; }

/* もこもこチャレンジ */
.hn-kgrow { align-items: baseline; }
.hn-kg { font-size: 40px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.hn-rec { width: 120px; font-size: 11px; color: var(--text-sub); }
.hn-rec-g { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hn-rec-g i { display: block; height: 100%; background: var(--hn-gold); }
.hn-timer > i { background: var(--hn-gold); transition: none; }
.hn-tap { display: block; width: 100%; padding: 0; border: 3px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--hn-paper); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hn-tap svg { display: block; width: 100%; height: auto; }
.hn-tap.bump { animation: hn-bump .16s ease-out; }
@keyframes hn-bump { 50% { transform: scale(.985); } }
.hn-tapmsg { text-align: center; font-weight: 700; min-height: 3em; margin: 0; }
.hn-tapmsg b { color: var(--accent); font-size: 22px; }

/* あいさつ */
.hn-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-seg-i { border: 2px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.hn-seg-i.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.hn-preview { width: min(260px, 72%); margin: 0 auto; box-shadow: var(--shadow); border-radius: 4px; overflow: hidden; }
.hn-preview svg, .hn-nenga svg { display: block; width: 100%; height: auto; }

/* みくじ */
.hn-mwrap { display: flex; flex-direction: column; align-items: center; min-height: 290px; justify-content: center; cursor: pointer; }
.hn-mbox { transition: transform .3s; }
.hn-mbox.shake { animation: hn-shake .18s linear 5; }
.hn-mbox.out .hn-stick { transform: translateY(-34px); transition: transform .4s ease-out; }
@keyframes hn-shake { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.hn-fortune { display: flex; flex-direction: column; align-items: center; background: var(--hn-paper); color: var(--hn-ink); border: 2px solid #c0392b; border-radius: 8px; padding: 6px 26px 8px; margin-top: -10px; animation: mn-pop .4s cubic-bezier(.2, 1.6, .4, 1); font-family: var(--serif); }
.hn-fortune b { font-size: 44px; line-height: 1.1; }
.hn-fortune small { font-size: 12px; font-weight: 700; }
.hn-fortune .mn-tiny { color: #66615a; }
.hn-fortune.rare { border-color: #c99a1a; box-shadow: 0 0 0 6px rgba(243, 192, 59, .35), 0 0 40px rgba(243, 192, 59, .6); }

/* 結果 */
.hn-result { border-radius: var(--radius); padding: 16px 14px; background: linear-gradient(160deg, #6a1e16, #c0392b); color: #fff; text-align: center; }
.hn-result.rare { background: linear-gradient(160deg, #3a2a08, #b8860b); }
.hn-res-kicker { font-size: 13px; letter-spacing: .1em; font-weight: 700; color: #ffe7a0; margin: 0 0 4px; }
.hn-res-title { font-family: var(--serif); font-weight: 900; font-size: clamp(24px, 7vw, 34px); margin: 0 0 12px; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.hn-res-img { display: block; width: min(320px, 86%); height: auto; margin: 0 auto 12px; border-radius: 12px; }
.hn-nenga { width: min(300px, 82%); margin: 0 auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transform: rotate(-1.5deg); border-radius: 4px; overflow: hidden; }
.hn-ftext { font-size: 14px; margin: 14px 0 10px; color: #fff3ea; }
.hn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hn-stats > div { background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.hn-stats .mn-tiny { color: #ffe3d6; font-size: 11px; }
.hn-stats b { font-size: 18px; color: #fff; }
.hn-stats b[style] { background: #fbf6ea; border-radius: 6px; margin: 0 auto; padding: 0 8px; }
.hn-bar { display: grid; grid-template-columns: 88px 1fr 52px; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; }
.hn-bar-g { height: 12px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hn-bar-g i { display: block; height: 100%; background: var(--text-sub); }
.hn-bar.me .hn-bar-g i { background: var(--accent); }
.hn-bar.me .hn-bar-k { color: var(--accent); font-weight: 800; }
.hn-bar-v { text-align: right; font-variant-numeric: tabular-nums; }

/* 図鑑 */
.hn-zk { display: grid; grid-template-columns: 70px repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 11px; align-items: center; }
.hn-zk-h { font-weight: 700; text-align: center; line-height: 1.2; }
.hn-zk-i { text-align: center; border: 1px dashed var(--line); border-radius: 6px; padding: 6px 0; color: var(--text-sub); }
.hn-zk-i.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 900; }
.hn-zk-i.rare.on { border-color: var(--hn-gold); color: var(--hn-gold); }
.hn-ai { font-size: 11px; color: #ffe3d6; margin: -8px 0 10px; }
.hn-ai-tag { position: absolute; left: 8px; bottom: 6px; font-size: 10px; color: #fff; background: rgba(0, 0, 0, .45); padding: 1px 6px; border-radius: 4px; }