/* 日本が100人の村なら */
:root {
  --hm-sky1: #bfe3f2; --hm-sky2: #fff5dc; --hm-hill1: #8fcf7f; --hm-hill2: #4f9a5c; --hm-mtn: #9cc0b4;
  --hm-sun: #ffd36b; --hm-road: #e8d6aa; --hm-wall: #fffaf0; --hm-roof: #e4572e; --hm-door: #7a4a2a;
  --hm-head: #fbf5ea; --hm-cheek: #ef6b5b; --hm-eye: #1d1b18; --hm-dim: #b9c8bf; --hm-shadow: rgba(30, 50, 30, .25);
  --hm-label: #1d3b2c; --hm-glow1: #2c5a7a; --hm-glow2: #142636; --hm-star: #fff6cc;
  --hm-green: #2e9e6a; --hm-yellow: #d9a515; --hm-red: #d64545;
  --hm-res-hill: #2f5a3a; --hm-doll-body: #2f6fd6; --hm-paper: #f7f0e3; --hm-paper-line: #d9cdb6; --hm-ink: #2a2420; --hm-eye-white: #ffffff; --hm-kuma: #5b4e6b; --hm-mouth: #7a2a20;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hm-sky1: #14263a; --hm-sky2: #2b3b4a; --hm-hill1: #2f5a3a; --hm-hill2: #1c3524; --hm-mtn: #24413f;
    --hm-sun: #f3e3a0; --hm-road: #6d5f43; --hm-wall: #e8dfcd; --hm-roof: #ff7a50; --hm-door: #4a2e1b;
    --hm-head: #efe6d6; --hm-dim: #4a5a51; --hm-shadow: rgba(0, 0, 0, .4); --hm-label: #f1ede4;
    --hm-green: #4cc48b; --hm-yellow: #e7bd3b; --hm-red: #ef6b6b;
  }
}
:root[data-theme="dark"] {
  --hm-sky1: #14263a; --hm-sky2: #2b3b4a; --hm-hill1: #2f5a3a; --hm-hill2: #1c3524; --hm-mtn: #24413f;
  --hm-sun: #f3e3a0; --hm-road: #6d5f43; --hm-wall: #e8dfcd; --hm-roof: #ff7a50; --hm-door: #4a2e1b;
  --hm-head: #efe6d6; --hm-dim: #4a5a51; --hm-shadow: rgba(0, 0, 0, .4); --hm-label: #f1ede4;
  --hm-green: #4cc48b; --hm-yellow: #e7bd3b; --hm-red: #ef6b6b;
}

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

/* 村の絵 */
.hm-village { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.hm-sky1 { stop-color: var(--hm-sky1); } .hm-sky2 { stop-color: var(--hm-sky2); }
.hm-hill1 { stop-color: var(--hm-hill1); } .hm-hill2 { stop-color: var(--hm-hill2); }
.hm-mtn { fill: var(--hm-mtn); opacity: .8; }
.hm-sun { fill: var(--hm-sun); }
.hm-sun-halo { fill: var(--hm-sun); opacity: .25; }
.hm-road { fill: none; stroke: var(--hm-road); stroke-width: 10; stroke-linecap: round; opacity: .8; }
.hm-house-wall { fill: var(--hm-wall); }
.hm-house-roof { fill: var(--hm-roof); }
.hm-house-door { fill: var(--hm-door); }
.hm-head { fill: var(--hm-head); }
.hm-cheek { fill: var(--hm-cheek); opacity: .85; }
.hm-eye { fill: var(--hm-eye); }
.hm-shadow { fill: var(--hm-shadow); }
.hm-doll { transition: opacity .6s ease; }
.hm-doll.is-dim { opacity: .14; }
.hm-doll.is-dim .hm-body { fill: var(--hm-dim); }
.hm-vlabel { font-size: 15px; font-weight: 900; fill: var(--hm-label); paint-order: stroke; stroke: var(--hm-sky2); stroke-width: 3px; }
.hm-vsub { font-size: 10px; font-weight: 700; fill: var(--hm-label); opacity: .75; }
.hm-vwrap { margin-bottom: 10px; }

/* プレイ */
.hm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hm-board { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-bottom: 12px; min-height: 46px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.hm-board-g { border-left-color: var(--hm-green); }
.hm-board-y { border-left-color: var(--hm-yellow); }
.hm-board-r { border-left-color: var(--hm-red); }
.hm-sq { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; flex: none; }
.hm-sq-g { background: var(--hm-green); } .hm-sq-y { background: var(--hm-yellow); } .hm-sq-r { background: var(--hm-red); }
.hm-q.is-locked { opacity: .7; }
.hm-qt { font-size: 20px; }
.hm-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.hm-grid-2 { grid-template-columns: 1fr 1fr; }
.hm-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.hm-grid-5 { grid-template-columns: 1fr 1fr; }
@media (min-width: 520px) { .hm-grid-5 { grid-template-columns: repeat(5, 1fr); } .hm-grid-3 { grid-template-columns: repeat(4, 1fr); } }
.hm-choice { min-height: 52px; padding: 10px 12px; text-align: center; }
.hm-choice b { display: block; }
.hm-toggle { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hm-emo { font-size: 24px; line-height: 1.2; }
.hm-twobtn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.hm-twobtn .btn { padding: 10px 8px; font-size: 14px; min-width: 0; }

/* 結果 */
.hm-counting { font-weight: 700; color: var(--text-sub); animation: hm-blink 1s ease-in-out infinite alternate; }
@keyframes hm-blink { from { opacity: .4; } to { opacity: 1; } }
.hm-res { display: grid; grid-template-columns: 1fr; gap: 14px; text-align: center; }
@media (min-width: 560px) { .hm-res { grid-template-columns: 200px 1fr; text-align: left; align-items: center; } }
.hm-res.is-rare { border: 2px solid var(--accent); }
.hm-res-img, .hm-res-art { width: 100%; max-width: 240px; height: auto; border-radius: 16px; margin: 0 auto; display: block; }
.hm-glow1 { stop-color: var(--hm-glow1); } .hm-glow2 { stop-color: var(--hm-glow2); }
.hm-star { fill: var(--hm-star); }
.hm-res-hill { fill: var(--hm-res-hill); }
.hm-hero-body { fill: var(--hm-doll-body); }
.hm-hero-collar { fill: var(--hm-roof); }
.hm-hero-head { fill: var(--hm-paper); stroke: var(--hm-paper-line); stroke-width: 1; }
.hm-hero-hair { fill: var(--hm-ink); }
.hm-hero-eyew { fill: var(--hm-eye-white); stroke: var(--hm-ink); stroke-width: 1.2; }
.hm-hero-kuma { fill: none; stroke: var(--hm-kuma); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.hm-hero-mouth { fill: none; stroke: var(--hm-mouth); stroke-width: 2; stroke-linecap: round; }
.hm-hero-gap { fill: var(--hm-mouth); }
.hm-res-emoji { font-size: 34px; }
.hm-type { font-size: clamp(24px, 7vw, 32px); font-weight: 900; line-height: 1.3; margin: 2px 0 6px; }
.hm-big { color: var(--accent); }
.hm-onein { font-size: 20px; font-weight: 800; }
.hm-squares { font-size: 22px; letter-spacing: 2px; margin-top: 6px; }
.hm-scale { font-weight: 700; }
.hm-note { color: var(--text-sub); }
.hm-best { color: var(--accent); font-weight: 700; }
.hm-friend { border-left: 6px solid var(--accent); }
.hm-friend-cmp { border-left: 6px solid var(--info); }
.hm-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.hm-steps li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hm-steps li:last-child { border-bottom: 0; }
.hm-step-q { color: var(--text-sub); font-size: 12px; grid-column: 2; }
.hm-step-a { grid-column: 2; grid-row: 2; font-weight: 700; }
.hm-steps li > .hm-sq { grid-row: 1 / span 2; }
.hm-steps li > b { grid-column: 3; grid-row: 1 / span 2; }
.hm-steps li > .tag { grid-column: 4; grid-row: 1 / span 2; }
.hm-dist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 130px; margin-top: 8px; }
.hm-dist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 16px; }
.hm-dist-bar { width: 100%; max-width: 40px; background: var(--surface-2); border-radius: 6px 6px 0 0; }
.hm-dist-col.is-me .hm-dist-bar { background: var(--accent); }
.hm-dist-col .tiny { color: var(--text-sub); white-space: nowrap; }

/* デイリー */
.hm-daily { border-top: 4px solid var(--hm-green); }
.hm-dq-lead { font-weight: 700; margin: 10px 0 6px; }
.hm-dq { font-size: 17px; margin: 4px 0 10px; }
.hm-dscore { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.hm-dmarks { letter-spacing: 3px; }
.hm-dlist { padding-left: 18px; font-size: 13px; margin: 8px 0 0; }

/* 図鑑・称号 */
.hm-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-badge { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: .55; }
.hm-badge.on { opacity: 1; border: 1px solid var(--accent); background: var(--accent-soft); }
.hm-badge-emoji { font-size: 24px; }

.hm-disclaimer { font-size: 12px; color: var(--text-sub); margin-top: 16px; }
.hm-about h2 { font-size: 18px; }
.hm-table-wrap { overflow-x: auto; }
.hm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hm-table th, .hm-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.hm-big { font-size: clamp(38px, 10vw, 60px); white-space: nowrap; }
.ai-note { margin: 4px 0 8px; text-align: right; }