/* ミニゲーム「激闘！東平山 めんこバトラー」（js/menko.js） */
.mk2 { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 10px; background: radial-gradient(circle at 50% 40%, rgba(90, 30, 10, .55), rgba(20, 8, 2, .8)); backdrop-filter: blur(3px); font-family: "M PLUS Rounded 1c", sans-serif; perspective: 1400px; }
.mk2-box { position: relative; width: min(94vw, 90vh, 820px); aspect-ratio: 1; border-radius: 30px; transform-style: preserve-3d; animation: mk2-in .6s cubic-bezier(.25, 1.4, .5, 1);
  box-shadow: 0 0 0 7px #c0392b, 0 0 0 12px #ffd23d, 0 0 0 16px #7a1f10, 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 170, 40, .35); user-select: none; -webkit-user-select: none; }
@keyframes mk2-in { from { transform: rotateX(38deg) translateY(60px) scale(.8); opacity: 0; } }
.mk2-cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 30px; touch-action: none; cursor: grab; }
.mk2-cv:active { cursor: grabbing; }
.mk2-x { position: absolute; right: -14px; top: -14px; z-index: 5; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fffaf0; color: #c0392b; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 3px #c0392b, 0 4px 8px rgba(0, 0, 0, .3); }
.mk2-timer, .mk2-tries { position: absolute; top: 3%; z-index: 3; margin: 0; display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 18px; background: rgba(255, 250, 238, .95); box-shadow: 0 4px 0 #7a1f10; pointer-events: none; }
.mk2-timer { left: 3%; } .mk2-tries { right: 3%; }
.mk2-timer b { font-size: clamp(26px, 6vmin, 48px); font-weight: 900; color: #c0392b; line-height: 1; }
.mk2-timer.is-hurry b { color: #ff3b30; animation: mk2-beat .5s ease-in-out infinite; }
.mk2-tries i { width: clamp(22px, 4.4vmin, 34px); aspect-ratio: 1; border-radius: 50%; background: #d8cfc0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); transition: transform .3s; }
.mk2-tries i.is-on { background: radial-gradient(circle at 35% 30%, #ffe27a, #e8412d); box-shadow: inset 0 0 0 3px #ffd23d, 0 2px 4px rgba(0, 0, 0, .3); }
.mk2-ov { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.mk2-ov[hidden] { display: none; }
.mk2-ov > * { pointer-events: auto; }
.mk2-ov > .mk2-hint { pointer-events: none; align-self: end; margin-bottom: 5%; padding: 10px 22px; border-radius: 999px; background: rgba(255, 250, 238, .95); color: #7a1f10; font-weight: 900; font-size: clamp(14px, 2.8vmin, 20px); box-shadow: 0 5px 0 #c0392b; white-space: nowrap; animation: mk2-bob 1.6s ease-in-out infinite; }
@keyframes mk2-bob { 50% { transform: translateY(-8px); } }
.mk2-card { position: relative; width: min(76%, 500px); margin-top: 20%; padding: 22px 22px 18px; border-radius: 24px; text-align: center; color: #3b2a14; background: linear-gradient(180deg, #fffaf0, #ffeede);
  box-shadow: inset 0 0 0 4px #ffb366, 0 16px 40px rgba(0, 0, 0, .4); animation: mk2-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mk2-pop { from { transform: scale(.6); opacity: 0; } }
.mk2-chara { position: absolute; left: 50%; bottom: calc(100% - 26px); width: 40%; transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); animation: mk2-jump .8s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.mk2-card.is-win .mk2-chara { animation: mk2-jump .8s cubic-bezier(.3, 1.6, .5, 1), mk2-dance 1.1s ease-in-out .8s infinite; }
@keyframes mk2-jump { from { transform: translateX(-50%) translateY(120px) scale(.4); opacity: 0; } 60% { transform: translateX(-50%) translateY(-30px) scale(1.15); opacity: 1; } }
@keyframes mk2-dance { 50% { transform: translateX(-50%) translateY(-10px) rotate(-5deg); } }
.mk2-card h2 { margin: 0 0 10px; font-size: clamp(22px, 4.6vmin, 36px); font-weight: 900; line-height: 1.25; color: #e8412d; -webkit-text-stroke: 1px #6b1a0a; word-break: keep-all; }
.mk2-card p { margin: 0 0 10px; font-weight: 800; font-size: clamp(13px, 2.5vmin, 18px); line-height: 1.6; }
/* 金の 立体文字 */
.mk2-yatta { font-size: clamp(34px, 7.4vmin, 60px) !important; background: linear-gradient(180deg, #fffbe0 0%, #ffe27a 35%, #f5a90e 60%, #c27400 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  -webkit-text-stroke: 2px #7a3a00 !important; filter: drop-shadow(0 2px 0 #b35f00) drop-shadow(0 4px 0 #8a4400) drop-shadow(0 6px 0 #5c2c00) drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); animation: mk2-gold .9s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes mk2-gold { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } 60% { transform: scale(.9) rotate(2deg); opacity: 1; } }
.mk2-prize { padding: 8px 12px; border-radius: 14px; background: #fff3d6; }
.mk2-prize.is-demo { background: #eaf4ff; color: #1b4f8a; font-size: 14px !important; }
.mk2-badge { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 22px !important; border-radius: 20px; color: #fff; font-size: clamp(28px, 6vmin, 44px) !important; font-weight: 900; background: linear-gradient(180deg, #ffd23d, #f5a90e); text-shadow: 0 3px 0 rgba(150, 70, 0, .5); box-shadow: 0 6px 0 #9a5a06, 0 0 28px rgba(255, 210, 60, .9); animation: mk2-pop .8s .25s cubic-bezier(.3, 1.8, .5, 1) both, mk2-shine 1.4s 1s ease-in-out infinite; }
@keyframes mk2-shine { 50% { box-shadow: 0 6px 0 #9a5a06, 0 0 44px rgba(255, 230, 100, 1); } }
.mk2-badge img { width: 1.2em; height: auto; } .mk2-badge small { font-size: .5em; }
.mk2-go, .mk2-sub { display: block; width: 100%; min-height: 58px; margin-top: 8px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 900; font-size: clamp(18px, 3.4vmin, 23px); }
.mk2-go { color: #fff; background: linear-gradient(180deg, #ff6b4a, #c0392b); box-shadow: 0 6px 0 #7a1f10, 0 10px 18px rgba(192, 57, 43, .4); }
.mk2-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #7a1f10; }
.mk2-sub { min-height: 46px; font-size: 16px; color: #7a1f10; background: #fff; box-shadow: inset 0 0 0 2px #ffc7a8; }
.mk2-cd { margin: 0; font-size: clamp(90px, 26vmin, 220px); font-weight: 900; color: #fff; -webkit-text-stroke: 8px #c0392b; paint-order: stroke fill; text-shadow: 0 10px 0 #6b1a0a; animation: mk2-cdin .55s cubic-bezier(.3, 1.8, .5, 1); }
.mk2-cd.is-go { font-size: clamp(50px, 13vmin, 110px); color: #ffe27a; }
@keyframes mk2-cdin { from { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
@keyframes mk2-beat { 50% { transform: scale(1.18); } }
.mk2-confetti { position: fixed; inset: 0; z-index: 96; width: 100vw; height: 100vh; pointer-events: none; }
/* 受付の「あそぶ」ボタン（ネオン） */
.mk2-open-btn { position: relative; background: linear-gradient(135deg, #ff6b4a, #c0392b 60%, #7a1f10) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 220, 120, .55), 0 0 0 2px #ffd23d, 0 0 18px rgba(255, 90, 60, .75), 0 5px 0 #5c1508, 0 12px 22px rgba(192, 57, 43, .4) !important; animation: mk2-neon 1.8s ease-in-out infinite; }
@keyframes mk2-neon { 50% { box-shadow: inset 0 0 0 3px rgba(255, 240, 160, .9), 0 0 0 2px #fff3a0, 0 0 30px rgba(255, 120, 60, 1), 0 5px 0 #5c1508, 0 12px 22px rgba(192, 57, 43, .4) !important; } }
@media (prefers-reduced-motion: reduce) { .mk2-open-btn, .mk2-ov > .mk2-hint, .mk2-badge { animation: none; } }
@media (max-width: 720px) {
  .mk2-card { width: 84%; margin-top: 26%; padding: 14px 14px 12px; }
  .mk2-chara { width: 34%; }
  .mk2-go { min-height: 50px; } .mk2-sub { min-height: 42px; }
}