/* 耳年齢テスト — 夜の音波パープル */
:root { --accent: #4b38b8; --accent-soft: #e8e4fb; --mm-wave: #f0a92c; --mm-ear: #f2c7a5; --mm-ear-in: #c98f6c; --mm-rung: #e4e1f2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #a99bff; --accent-soft: #2a2552; --mm-wave: #ffd36e; --mm-ear: #d9ab89; --mm-ear-in: #a8765a; --mm-rung: #2a2f48; }
}
:root[data-theme="dark"] { --accent: #a99bff; --accent-soft: #2a2552; --mm-wave: #ffd36e; --mm-ear: #d9ab89; --mm-ear-in: #a8765a; --mm-rung: #2a2f48; }

.mm-hero { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; }
@media (max-width: 420px) { .mm-hero { grid-template-columns: 1fr; } .mm-hero-art { justify-self: center; width: 180px; } }
.mm-hero-art svg, .mm-trial-art svg { display: block; width: 100%; height: auto; }
.mm-trial-art { width: 180px; margin: 0 auto 6px; }
.mm-ear-out { fill: var(--mm-ear); }
.mm-ear-in { fill: none; stroke: var(--mm-ear-in); stroke-width: 6; stroke-linecap: round; }
.mm-w { fill: none; stroke: var(--mm-wave); stroke-width: 7; stroke-linecap: round; opacity: .35; }
.mm-ear.is-anim .mm-w { animation: mm-pulse 1.2s ease-in-out infinite; }
.mm-ear.is-anim .mm-w2 { animation-delay: .2s; }
.mm-ear.is-anim .mm-w3 { animation-delay: .4s; }
@keyframes mm-pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mm-ear.is-anim .mm-w { animation: none; opacity: .9; } }

.mm-warn { border-left: 5px solid var(--warn); }
.mm-list { padding-left: 20px; margin: 8px 0; line-height: 1.7; }
.mm-list li { margin: 4px 0; }
.mm-agree { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 700; }
.mm-agree input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); }
.mm-play { margin: 10px 0; }
.mm-volrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.mm-slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 36px; }
.mm-vol { white-space: nowrap; font-variant-numeric: tabular-nums; }

.mm-big-play { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 88px; border: 0; border-radius: 20px; background: var(--accent); color: var(--accent-ink); font-size: 22px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.mm-big-play:disabled { opacity: .55; cursor: default; }
.mm-play-ic { display: inline-grid; place-items: center; }
.mm-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-ans { min-height: 64px; }

.mm-ladder { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 96px; margin: 8px 0; }
.mm-rung { position: relative; flex: 1; max-width: 30px; border-radius: 6px 6px 2px 2px; background: var(--mm-rung); }
.mm-rung.is-heard { background: var(--mm-wave); }
.mm-rung.is-cur { outline: 3px solid var(--accent); }
.mm-rung span { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 10px; color: var(--text-sub); white-space: nowrap; }
.mm-ladder { margin-bottom: 22px; }

.mm-result .mn-big small { font-size: 22px; color: var(--text-sub); }
.mm-res-k { margin: 0; font-weight: 700; color: var(--text-sub); }
.mm-res-hz { font-size: 18px; margin: 4px 0; }
.mm-res-hz b { color: var(--accent); font-size: 28px; }
.mm-top { font-size: 16px; margin: 4px 0; }
.mm-top span { color: var(--accent); font-weight: 900; font-size: 22px; }
.mm-caution { color: var(--bad); }
.mm-again { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-fam { display: grid; gap: 6px; }
.mm-fam-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.mm-name { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-bar { display: grid; grid-template-columns: 56px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.mm-bar.is-me { font-weight: 800; }
.mm-bar-m { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.mm-bar-m i { display: block; height: 100%; background: var(--accent); }
.mm-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }