/* ミニゲーム「わくラボ 3Dクレーンゲーム」（js/crane.js）… ゲームセンターの 筐体を のぞきこむ */
.cr3 { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 10px; background: radial-gradient(circle at 50% 30%, rgba(80, 20, 90, .6), rgba(8, 4, 20, .88)); backdrop-filter: blur(3px); font-family: "M PLUS Rounded 1c", sans-serif; perspective: 1400px; }
.cr3-cab { position: relative; display: grid; grid-template-rows: auto 1fr auto; width: min(94vw, 66vh, 620px); height: min(92vh, 900px); max-height: calc(94vw * 1.55); border-radius: 30px 30px 22px 22px; padding: 10px;
  background: linear-gradient(180deg, #ff5fb8, #a03ad8 55%, #4a1a8a); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 0 4px #ffd23d, 0 0 40px rgba(255, 95, 184, .6), 0 30px 80px rgba(0, 0, 0, .6);
  animation: cr3-in .6s cubic-bezier(.25, 1.4, .5, 1); user-select: none; -webkit-user-select: none; }
@keyframes cr3-in { from { transform: rotateX(30deg) translateY(80px) scale(.82); opacity: 0; } }
.cr3-marquee { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 6px 10px 10px; }
.cr3-marquee b { font-size: clamp(24px, 5vmin, 36px); font-weight: 900; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #ff5fb8, 0 0 30px #ff5fb8; animation: cr3-flick 3s infinite; }
.cr3-marquee i { font-style: normal; font-weight: 900; font-size: clamp(12px, 2.4vmin, 16px); letter-spacing: .15em; color: #bff4ff; text-shadow: 0 0 8px #38d8ff, 0 0 18px #38d8ff; }
@keyframes cr3-flick { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .5; } 96% { opacity: 1; } 97% { opacity: .6; } }
.cr3-view { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background: #2a1040; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), inset 0 0 30px rgba(0, 0, 0, .5); }
.cr3-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 12%, transparent 22% 60%, rgba(255, 255, 255, .1) 66%, transparent 74%); }   /* ガラスの 反射 */
.cr3-gl, .cr3-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cr3-timer, .cr3-plays { position: absolute; top: 10px; z-index: 3; margin: 0; display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 16px; background: rgba(20, 8, 40, .75); box-shadow: 0 0 0 2px #5fe8ff, 0 0 14px rgba(95, 232, 255, .6); pointer-events: none; }
.cr3-timer { left: 10px; } .cr3-plays { right: 10px; }
.cr3-timer b { font-size: clamp(24px, 5.4vmin, 40px); font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 10px #5fe8ff; }
.cr3-timer.is-hurry b { color: #ff5f7a; text-shadow: 0 0 12px #ff5f7a; animation: cr3-beat .5s ease-in-out infinite; }
.cr3-plays i { width: clamp(20px, 4vmin, 28px); aspect-ratio: 1; border-radius: 50%; background: #4a3a6a; }
.cr3-plays i.is-on { background: radial-gradient(circle at 35% 30%, #fff6c0, #f0a800); box-shadow: 0 0 10px #ffd23d; }
@keyframes cr3-beat { 50% { transform: scale(1.18); } }
/* ボタン（アーケードの 丸ボタン） */
.cr3-panel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 6px 4px; }
.cr3-say { margin: 0; min-width: 7em; text-align: center; font-weight: 900; font-size: clamp(13px, 2.6vmin, 17px); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.cr3-btn { position: relative; justify-self: center; display: grid; place-items: center; align-content: center; width: clamp(92px, 20vmin, 128px); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font: inherit; touch-action: none;
  -webkit-tap-highlight-color: transparent; transition: transform .08s, box-shadow .08s, filter .2s; }
.cr3-btn b { font-size: clamp(20px, 4.4vmin, 28px); line-height: 1; } .cr3-btn span { font-size: clamp(15px, 3.2vmin, 20px); font-weight: 900; } .cr3-btn i { font-style: normal; font-size: 14px; }
.cr3-btn--x { background: radial-gradient(circle at 35% 30%, #ff9aa8, #e8412d 60%, #a82a1c); box-shadow: 0 8px 0 #6b1a10, 0 12px 20px rgba(0, 0, 0, .4), inset 0 -6px 0 rgba(0, 0, 0, .15); }
.cr3-btn--z { background: radial-gradient(circle at 35% 30%, #a8e8ff, #2f8bff 60%, #1b4fb8); box-shadow: 0 8px 0 #0f2f70, 0 12px 20px rgba(0, 0, 0, .4), inset 0 -6px 0 rgba(0, 0, 0, .15); }
.cr3-btn.is-down { transform: translateY(7px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .3), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.cr3-btn.is-ready { animation: cr3-ready 1s ease-in-out infinite; }
@keyframes cr3-ready { 50% { filter: brightness(1.25) drop-shadow(0 0 14px #fff6a0); } }
.cr3-btn:disabled { filter: grayscale(.85) brightness(.75); cursor: default; }
.cr3-x { position: absolute; right: -12px; top: -12px; z-index: 5; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fffaf0; color: #a03ad8; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 3px #a03ad8, 0 4px 8px rgba(0, 0, 0, .3); }
/* カード */
.cr3-ov { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.cr3-ov[hidden] { display: none; }
.cr3-ov > * { pointer-events: auto; }
.cr3-loading { color: #fff; font-weight: 900; font-size: 20px; text-shadow: 0 0 10px #ff5fb8; }
.cr3-card { position: relative; width: min(84%, 440px); margin-top: 24%; padding: 16px 16px 14px; border-radius: 22px; text-align: center; color: #2a1040; background: linear-gradient(180deg, #fffaff, #f3e6ff);
  box-shadow: inset 0 0 0 4px #ff9ad0, 0 0 24px rgba(255, 95, 184, .5), 0 16px 40px rgba(0, 0, 0, .4); animation: cr3-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cr3-pop { from { transform: scale(.6); opacity: 0; } }
.cr3-chara { position: absolute; left: 50%; bottom: calc(100% - 24px); width: 34%; transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); animation: cr3-jump .8s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.cr3-card.is-win .cr3-chara { animation: cr3-jump .8s cubic-bezier(.3, 1.6, .5, 1), cr3-dance 1.1s ease-in-out .8s infinite; }
@keyframes cr3-jump { from { transform: translateX(-50%) translateY(120px) scale(.4); opacity: 0; } 60% { transform: translateX(-50%) translateY(-30px) scale(1.15); opacity: 1; } }
@keyframes cr3-dance { 50% { transform: translateX(-50%) translateY(-10px) rotate(-5deg); } }
.cr3-card h2 { margin: 0 0 8px; font-size: clamp(22px, 4.6vmin, 32px); font-weight: 900; line-height: 1.25; color: #a03ad8; word-break: keep-all; }
.cr3-card p { margin: 0 0 8px; font-weight: 800; font-size: clamp(13px, 2.5vmin, 17px); line-height: 1.6; }
.cr3-yatta { font-size: clamp(36px, 8vmin, 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; 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: cr3-gold .9s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes cr3-gold { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } 60% { transform: scale(.9) rotate(2deg); opacity: 1; } }
.cr3-lab { color: #a03ad8; }
.cr3-prize { padding: 8px 12px; border-radius: 14px; background: #fff3d6; }
.cr3-prize.is-demo { background: #eaf4ff; color: #1b4f8a; font-size: 14px !important; }
.cr3-badge { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 22px !important; border-radius: 20px; color: #fff; font-size: clamp(28px, 6vmin, 42px) !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: cr3-pop .8s .25s cubic-bezier(.3, 1.8, .5, 1) both, cr3-shine 1.4s 1s ease-in-out infinite; }
@keyframes cr3-shine { 50% { box-shadow: 0 6px 0 #9a5a06, 0 0 44px rgba(255, 230, 100, 1); } }
.cr3-badge img { width: 1.2em; height: auto; } .cr3-badge small { font-size: .5em; }
.cr3-go, .cr3-sub { display: block; width: 100%; min-height: 54px; margin-top: 8px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 900; font-size: clamp(18px, 3.4vmin, 22px); }
.cr3-go { color: #fff; background: linear-gradient(180deg, #ff7fc4, #d82f8a); box-shadow: 0 6px 0 #8a1a58, 0 10px 18px rgba(216, 47, 138, .4); }
.cr3-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #8a1a58; }
.cr3-sub { min-height: 44px; font-size: 16px; color: #8a1a58; background: #fff; box-shadow: inset 0 0 0 2px #ffc4e4; }
.cr3-confetti { position: fixed; inset: 0; z-index: 96; width: 100vw; height: 100vh; pointer-events: none; }
.cr3-open-btn { background: linear-gradient(135deg, #ff7fc4, #a03ad8 60%, #4a1a8a) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 0 0 2px #5fe8ff, 0 0 18px rgba(95, 232, 255, .75), 0 5px 0 #2a0a50, 0 12px 22px rgba(160, 58, 216, .4) !important; animation: cr3-neon 1.8s ease-in-out infinite; }
@keyframes cr3-neon { 50% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8), 0 0 0 2px #bff4ff, 0 0 30px rgba(255, 95, 184, 1), 0 5px 0 #2a0a50, 0 12px 22px rgba(160, 58, 216, .4) !important; } }
@media (prefers-reduced-motion: reduce) { .cr3-open-btn, .cr3-btn.is-ready, .cr3-badge, .cr3-marquee b { animation: none; } }