/* ミニゲーム「イモッチの駄菓子キャッチ！」（js/catch.js） */
.ct { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 10px; background: rgba(40, 24, 8, .55); backdrop-filter: blur(3px); font-family: "M PLUS Rounded 1c", sans-serif; }
.ct-box { position: relative; width: min(94vw, 92vh, 820px); aspect-ratio: 1; background: center / 100% 100% no-repeat; border-radius: 28px; box-shadow: 0 26px 70px rgba(0, 0, 0, .5); animation: ct-in .45s cubic-bezier(.3, 1.5, .5, 1); user-select: none; -webkit-user-select: none; }
@keyframes ct-in { from { transform: scale(.8) translateY(20px); opacity: 0; } }
.ct-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ct-timer { position: absolute; left: 14.4%; top: 14.2%; width: 14%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.ct-timer b { font-size: clamp(34px, 8vmin, 70px); font-weight: 900; line-height: 1; color: #ffe27a; -webkit-text-stroke: 3px #7a3408; paint-order: stroke fill; text-shadow: 0 4px 0 #7a3408, 0 6px 8px rgba(0, 0, 0, .35); }
.ct-timer.is-hurry b { color: #ff5a3c; animation: ct-beat .5s ease-in-out infinite; }
@keyframes ct-beat { 50% { transform: scale(1.18); } }
.ct-count { position: absolute; left: 75.4%; top: 7%; width: 21.9%; height: 14.6%; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; pointer-events: none; color: #fff; }
.ct-count small { align-self: center; margin-right: 6px; font-size: clamp(11px, 2.2vmin, 18px); font-weight: 900; color: #ffe9b8; }
.ct-count b { align-self: center; font-size: clamp(30px, 7vmin, 60px); font-weight: 900; line-height: 1; color: #ffe27a; -webkit-text-stroke: 3px #5a2e0a; paint-order: stroke fill; text-shadow: 0 3px 0 #5a2e0a; }
.ct-count i { align-self: center; font-style: normal; font-size: clamp(14px, 3vmin, 24px); font-weight: 900; color: #ffe9b8; }
.ct-count.is-bump b { animation: ct-bump .4s cubic-bezier(.3, 1.8, .5, 1); }
.ct-count.is-clear b { color: #7dff9e; }
@keyframes ct-bump { 40% { transform: scale(1.5) rotate(-6deg); } }
.ct-arrow { position: absolute; top: 77.5%; width: 15.6%; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ct-arrow--l { left: 5%; } .ct-arrow--r { left: 79.4%; }
.ct-arrow.is-down { background: rgba(255, 255, 255, .25); transform: scale(.94); }
.ct-x { position: absolute; right: -10px; top: -10px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fffaf0; color: #6b3a14; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 3px #8a5222, 0 4px 8px rgba(0, 0, 0, .3); }
.ct-ov { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.ct-ov[hidden] { display: none; }
.ct-ov > * { pointer-events: auto; }
.ct-card { width: min(78%, 520px); padding: 22px 22px 18px; border-radius: 24px; text-align: center; color: #3b2a14; background: linear-gradient(180deg, #fffaf0, #fbefd6); box-shadow: inset 0 0 0 4px #e9c98f, 0 16px 40px rgba(0, 0, 0, .35); animation: ct-in .4s cubic-bezier(.3, 1.6, .5, 1); }
.ct-card h2 { margin: 0 0 10px; font-size: clamp(24px, 5vmin, 40px); font-weight: 900; line-height: 1.25; color: #e06a00; -webkit-text-stroke: 1px #7a3408; }
.ct-card p { margin: 0 0 10px; font-weight: 800; font-size: clamp(14px, 2.6vmin, 19px); line-height: 1.6; }
.ct-card p b { color: #e06a00; }
.ct-how { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ct-how span { padding: 3px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #ecd6ad; font-size: 13px; }
.ct-prize { padding: 8px 12px; border-radius: 14px; background: #fff3d6; }
.ct-prize.is-demo { background: #eaf4ff; color: #1b4f8a; font-size: 14px !important; }
.ct-go, .ct-sub { display: block; width: 100%; min-height: 60px; margin-top: 8px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 900; font-size: clamp(18px, 3.4vmin, 24px); }
.ct-go { color: #fff; background: linear-gradient(180deg, #ffa14a, #ff8a1f 55%, #f07400); box-shadow: 0 6px 0 #c45f00, 0 10px 18px rgba(255, 138, 31, .35); animation: ct-throb 1.4s ease-in-out infinite; }
.ct-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #c45f00; }
.ct-sub { min-height: 46px; font-size: 16px; color: #6b3a14; background: #fff; box-shadow: inset 0 0 0 2px #ecd6ad; }
@keyframes ct-throb { 50% { transform: scale(1.04); } }
.ct-cd { margin: 0; font-size: clamp(90px, 26vmin, 220px); font-weight: 900; color: #fff; -webkit-text-stroke: 8px #e06a00; paint-order: stroke fill; text-shadow: 0 10px 0 #7a3408, 0 18px 30px rgba(0, 0, 0, .35); animation: ct-cd .7s cubic-bezier(.3, 1.8, .5, 1); }
.ct-cd.is-go { font-size: clamp(56px, 14vmin, 120px); color: #ffe27a; }
@keyframes ct-cd { from { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
.ct-yatta { font-size: clamp(34px, 7vmin, 56px) !important; color: #ffc21a !important; -webkit-text-stroke: 2px #7a3408 !important; text-shadow: 0 5px 0 #7a3408; animation: ct-cd .7s cubic-bezier(.3, 1.8, .5, 1); }
.ct-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; animation: ct-cd .8s .2s cubic-bezier(.3, 1.8, .5, 1) both; }
.ct-badge img { width: 1.2em; height: auto; }
.ct-badge small { font-size: .5em; }
.ct-confetti { position: fixed; inset: 0; z-index: 96; width: 100vw; height: 100vh; pointer-events: none; }
/* 起動ボタン（受付・マップ） */
.ct-open-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; margin-top: 10px; padding: 6px 14px; border: 0; border-radius: 18px; font: inherit; font-weight: 900; font-size: 18px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ff7eb3, #ff5a8a 60%, #e63d73); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 5px 0 #a8284f, 0 10px 18px rgba(230, 60, 115, .35); }
.ct-open-btn img { width: 40px; height: 40px; }
.ct-open-btn small { display: block; font-size: 12px; opacity: .95; }
.ct-open-btn:active { transform: scale(.95) translateY(3px); }
.dash-ct { position: absolute; z-index: 6; right: 14px; bottom: 260px; width: clamp(74px, 6vw, 96px); aspect-ratio: 1; padding: 6px; border: 0; border-radius: 22px; cursor: pointer; background: linear-gradient(135deg, #ff9ec4, #ff5a8a); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 5px 0 #a8284f, 0 10px 18px rgba(0, 0, 0, .3); animation: ct-throb 2s ease-in-out infinite; }
.dash-ct img { width: 100%; height: 100%; object-fit: contain; }
.dash-ct b { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: #fff; color: #e63d73; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
@media (min-width: 1081px) { .app--dash .dash-ct { position: fixed; right: calc(var(--right-w) + 30px); bottom: 290px; } }
@media (max-width: 720px) { .dash-ct { width: 64px; bottom: 300px; right: 10px; } }
@media (prefers-reduced-motion: reduce) { .ct-go, .dash-ct, .ct-timer.is-hurry b { animation: none; } }