/* みんなで押すボタン */
:root {
  --accent: #c0392b; --accent-soft: #fbe3df; --accent-ink: #ffffff;
  --mb-gold: #d4a017; --mb-purple: #8e44ad; --mb-blue: #2e6fd8; --mb-green: #1f9d55; --mb-yellow: #d9b310; --mb-orange: #e67e22; --mb-red: #d63031;
  --mb-sleep: #7f8799; --mb-dead: #4a4f5c; --mb-base: #2a2d38; --mb-base-2: #14161f; --mb-shine: rgba(255, 255, 255, .45); --mb-tick: rgba(0, 0, 0, .25);
  --mb-on: #ffffff; --mb-sh1: rgba(0, 0, 0, .35); --mb-sh2: rgba(0, 0, 0, .25); --mb-sh3: rgba(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #ff7b6b; --accent-soft: #3a1d22; --accent-ink: #0f1220; --mb-tick: rgba(255, 255, 255, .25); --mb-base: #0b0c12; } }
:root[data-theme="dark"] { --accent: #ff7b6b; --accent-soft: #3a1d22; --accent-ink: #0f1220; --mb-tick: rgba(255, 255, 255, .25); --mb-base: #0b0c12; }

.mb-state { font-weight: 800; font-size: 18px; margin: 0; min-height: 1.8em; }
.mb-stage { --c: var(--mb-sleep); position: relative; width: min(300px, 82vw); aspect-ratio: 1 / 1; margin: 6px auto; }
.mb-stage[data-c="purple"] { --c: var(--mb-purple); } .mb-stage[data-c="blue"] { --c: var(--mb-blue); } .mb-stage[data-c="green"] { --c: var(--mb-green); }
.mb-stage[data-c="yellow"] { --c: var(--mb-yellow); } .mb-stage[data-c="orange"] { --c: var(--mb-orange); } .mb-stage[data-c="red"] { --c: var(--mb-red); }
.mb-stage[data-c="sleep"] { --c: var(--mb-gold); } .mb-stage[data-c="dead"] { --c: var(--mb-dead); }
.mb-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb-ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.mb-ring-fg { fill: none; stroke: var(--c); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke .3s; }
.mb-ticks line { stroke: var(--mb-tick); stroke-width: 2; }
.mb-button { position: absolute; inset: 15%; border-radius: 50%; border: 0; cursor: pointer; padding: 0; color: var(--accent-ink);
  background: radial-gradient(circle at 35% 30%, var(--mb-shine), transparent 38%), var(--c);
  box-shadow: 0 14px 0 var(--mb-base), 0 18px 30px var(--mb-sh1), inset 0 -10px 18px var(--mb-sh2);
  transition: transform .08s, box-shadow .08s, background-color .3s; touch-action: manipulation; }
.mb-button:not(:disabled):hover { filter: brightness(1.06); }
.mb-button:active:not(:disabled), .mb-button.is-down { transform: translateY(10px); box-shadow: 0 4px 0 var(--mb-base), 0 6px 12px var(--mb-sh1), inset 0 -6px 12px var(--mb-sh2); }
.mb-button:disabled { cursor: default; filter: saturate(.55); }
.mb-stage[data-c="red"] .mb-button:not(:disabled) { animation: mb-throb .5s ease-in-out infinite alternate; }
@keyframes mb-throb { to { transform: scale(1.04); } }
.mb-cap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.mb-secs { font-size: clamp(54px, 18vw, 84px); font-weight: 900; line-height: 1; color: var(--mb-on); text-shadow: 0 2px 6px var(--mb-sh1); font-variant-numeric: tabular-nums; }
.mb-cap-sub { font-size: 15px; font-weight: 800; color: var(--mb-on); opacity: .95; margin-top: 4px; text-shadow: 0 1px 3px var(--mb-sh3); }
.mb-sub { margin-top: 18px; }

.mb-result { border-top-width: 6px; }
.mb-badge { --c: var(--mb-red); display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; font-size: 34px; font-weight: 900; color: var(--mb-on);
  background: radial-gradient(circle at 35% 30%, var(--mb-shine), transparent 40%), var(--c); box-shadow: 0 8px 0 var(--mb-base); margin: 6px auto 10px; }
.mb-badge[data-c="gold"] { --c: var(--mb-gold); } .mb-badge[data-c="purple"] { --c: var(--mb-purple); } .mb-badge[data-c="blue"] { --c: var(--mb-blue); }
.mb-badge[data-c="green"] { --c: var(--mb-green); } .mb-badge[data-c="yellow"] { --c: var(--mb-yellow); } .mb-badge[data-c="orange"] { --c: var(--mb-orange); }
.mb-badge-name { font-size: 22px; font-weight: 900; margin: 0; }

.mb-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 10px; }
.mb-nums b { display: block; font-size: clamp(17px, 5vw, 22px); line-height: 1.3; color: var(--accent); }
.mb-nums small { font-size: 12px; color: var(--text-sub); }
.mb-dist { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.mb-dist i { display: block; min-width: 4px; }
.mb-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-sub); margin-top: 6px; }
.mb-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mb-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mb-hist { list-style: none; padding: 0; margin: 0; }
.mb-hist li { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mb-hist small { color: var(--text-sub); }
.mb-zukan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mb-z { display: grid; grid-template-columns: 22px 1fr; gap: 0 8px; align-items: center; border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.35; }
.mb-z i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); }
.mb-z b { font-size: 14px; } .mb-z small { font-size: 11px; color: var(--text-sub); }
.mb-z.is-got { border-style: solid; }
@media (min-width: 560px) { .mb-zukan { grid-template-columns: repeat(4, 1fr); } }