/* 3D スポーツ（SP3D1023）の共通の見た目。卓の本格版ステージ（css/g4pro.css）の真ん中を 3D の舞台にする */
.g4p--bowling .g4p__center, .g4p--basketball .g4p__center, .g4p--darts .g4p__center, .g4p--billiards .g4p__center { padding: 0 4px; align-items: stretch; }
.g4p--bowling .g4p__mat, .g4p--basketball .g4p__mat, .g4p--darts .g4p__mat, .g4p--billiards .g4p__mat { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #0d1020; }
.sp3d-host { position: relative; flex: 1 1 auto; min-height: 260px; width: 100%; }
.sp3d-wrap { position: absolute; inset: 0; }
.sp3d-cv { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; }
.sp3d-nogl { color: #fff; padding: 24px; text-align: center; font-weight: 700; }
.sp3d-word { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; color: #fff; font-weight: 900; font-size: 34px; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,255,255,.35); transition: transform .25s cubic-bezier(.2,1.6,.4,1), opacity .2s; white-space: nowrap; }
.sp3d-word.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sp3d-word.is-big { font-size: 52px; color: #ffe066; text-shadow: 0 4px 0 #b4561f, 0 0 28px rgba(255,200,60,.8); }
.sp3d-word.is-wait { font-size: 26px; opacity: .7; }
.sp3d-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(10,12,24,.72); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; line-height: 1.35; text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s; max-width: 92%; }
.sp3d-hint.is-on { opacity: 1; animation: sp3dPulse 1.6s ease-in-out infinite; }
.sp3d-hint b { display: block; font-size: 14px; }
.sp3d-hint span { display: block; font-size: 11px; opacity: .85; }
@keyframes sp3dPulse { 50% { transform: translateX(-50%) translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sp3d-hint.is-on { animation: none; } .sp3d-word { transition: none; } }
/* 点数表 */
.sp3d-board { width: 100%; border-collapse: collapse; background: #151a2e; color: #e8ecff; font-size: 11px; table-layout: fixed; }
.sp3d-board th { width: 5.2em; text-align: left; padding: 3px 6px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp3d-board td { border-left: 1px solid rgba(255,255,255,.12); text-align: center; padding: 2px 0 3px; vertical-align: top; }
.sp3d-board tr + tr td, .sp3d-board tr + tr th { border-top: 1px solid rgba(255,255,255,.12); }
.sp3d-board tr.is-turn th { color: #ffe066; }
.sp3d-board td.is-cur { background: rgba(255,224,102,.14); }
.sp3d-board .sp3d-rl { display: flex; justify-content: flex-end; gap: 1px; min-height: 13px; padding-right: 2px; }
.sp3d-board .sp3d-rl i { font-style: normal; min-width: 11px; font-weight: 800; }
.sp3d-board td b { display: block; font-size: 12px; min-height: 14px; }
.sp3d-board .sp3d-tot { font-size: 14px; font-weight: 900; vertical-align: middle; color: #ffe066; }
.sp3d-board.is-big { font-size: 12px; color: #222; background: #fff; border-radius: 10px; overflow: hidden; }
.sp3d-board.is-big td, .sp3d-board.is-big th { border-color: #e5e5ef; }
.sp3d-board.is-big .sp3d-tot { color: #c2410c; }
.sp3d-qk { text-align: center; margin: 10px 0 0; }
.sp3d-aw { text-align: center; font-weight: 800; color: #c2410c; margin: 8px 0 0; }
/* 強さのゲージ（シュート対決・ビリヤード） */
.sp3d-gauge { position: absolute; right: 10px; top: 18%; bottom: 18%; width: 16px; border-radius: 10px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.sp3d-gauge.is-on { opacity: 1; }
.sp3d-gauge__band { position: absolute; left: 0; right: 0; height: 10%; background: rgba(255,214,64,.75); }
.sp3d-gauge__fill { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 8px; background: linear-gradient(#ff7a3d, #ffd23f); }
/* シュート対決の成功・失敗の丸 */
.sp3d-dots { display: flex; justify-content: center; gap: 3px; padding: 3px 0; }
.sp3d-dots i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); font-style: normal; font-size: 9px; line-height: 13px; font-weight: 900; }
.sp3d-dots i.is-money { border-color: #ffd34d; }
.sp3d-dots i.is-in { background: #ff8a3d; border-color: #ff8a3d; color: #fff; }
.sp3d-dots i.is-out { color: rgba(255,255,255,.5); }
.sp3d-board.is-big .sp3d-dots i { border-color: #ccc; }
.sp3d-board.is-big .sp3d-dots i.is-out { color: #999; }
/* ダーツの表 */
.sp3d-board--dt .sp3d-rem { font-size: 18px; font-weight: 900; color: #ffe066; vertical-align: middle; }
.sp3d-board--dt .sp3d-hist { font-size: 11px; opacity: .9; vertical-align: middle; }
.sp3d-board--dt .sp3d-hist b { color: #8affb0; }
.sp3d-board--dt td { vertical-align: middle; }
.sp3d-board.is-big.sp3d-board--dt .sp3d-rem { color: #c2410c; }
/* ビリヤード: 強さと「打つ」・台の上の球の列 */
.sp3d-shot { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
.sp3d-shot label { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: #fff; }
.sp3d-shot output { min-width: 2.2em; text-align: right; color: #ffe066; }
.sp3d-shot input[type=range] { flex: 1 1 auto; accent-color: #ffb020; height: 28px; }
.sp3d-shot .g4p__btn { flex: 0 0 auto; min-width: 88px; }
.sp3d-blbar { background: #151a2e; padding: 4px 6px; }
.sp3d-rack { display: flex; justify-content: center; gap: 4px; }
.sp3d-rack i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-weight: 900; font-size: 11px; line-height: 20px; text-align: center; box-shadow: inset 0 0 0 4px rgba(255,255,255,.0); }
.sp3d-rack i:nth-child(9) { background: linear-gradient(#fff 28%, var(--c) 28% 72%, #fff 72%); color: #111; }
.sp3d-rack i.is-off { opacity: .2; }
.sp3d-rack i.is-low { outline: 2px solid #ffe066; outline-offset: 1px; }
.sp3d-board--bl td b { display: inline; font-size: 15px; color: #ffe066; margin-left: 4px; }
.sp3d-board.is-big.sp3d-board--bl td b { color: #c2410c; }

/* ===================== v2（SP3D2 1024）: 全画面の舞台・HUD・演出 ===================== */
html.sp3d-noscroll, html.sp3d-noscroll body { overflow: hidden !important; overscroll-behavior: none; }
.sp3d-imm { position: fixed; inset: 0; z-index: 2147483000; background: #0b0d18; display: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.sp3d-imm.is-on { display: block; }
.sp3d-imm__cv, .sp3d-imm__hud, .sp3d-imm__vig { position: absolute; inset: 0; }
.sp3d-imm__vig { pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
.sp3d-imm__hud { pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.sp3d-imm__hud > * { pointer-events: auto; }
.sp3d-imm__hud > .sp3d-fx { pointer-events: none; }
.sp3d-imm__top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; pointer-events: none; }
.sp3d-imm__top > * { pointer-events: auto; }
.sp3d-imm__b { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(12,14,30,.55); color: #fff; font-size: 17px; font-weight: 900; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sp3d-imm__t { color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
.sp3d-imm__sp { flex: 1; }
/* 演出の層（舞台の上・指は通す） */
.sp3d-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
body > .sp3d-fx { position: fixed; z-index: 2147483001; }
.sp3d-ban { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.sp3d-ban b { display: block; font-weight: 900; font-size: clamp(40px, 13vw, 76px); letter-spacing: .02em; line-height: 1; }
.sp3d-ban b i { display: inline-block; font-style: normal; animation: sp3dLetter .55s cubic-bezier(.2,1.8,.4,1) both; -webkit-text-stroke: 3px #2a1a4a; paint-order: stroke fill; }
.sp3d-ban small { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: sp3dFade .4s .3s both; }
.sp3d-ban.is-strike b, .sp3d-ban.is-perfect b { color: #ffe066; text-shadow: 0 5px 0 #c4561f, 0 0 30px rgba(255,200,60,.85); }
.sp3d-ban.is-strike b i { -webkit-text-stroke: 4px #5a1f0a; }
.sp3d-ban.is-nice b, .sp3d-ban.is-good b { color: #fff; text-shadow: 0 4px 0 #3d7bff, 0 0 22px rgba(120,170,255,.8); }
.sp3d-ban.is-miss b { color: #d9dbe8; font-size: clamp(30px, 9vw, 52px); text-shadow: 0 3px 0 #4a4f66; }
.sp3d-ban.is-info b { color: #fff; font-size: clamp(22px, 6.5vw, 34px); text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.sp3d-ban.is-out { transition: opacity .35s, transform .35s; opacity: 0; transform: translate(-50%, -70%) scale(1.08); }
@keyframes sp3dLetter { 0% { transform: translateY(40px) scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sp3dFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp3d-flash { position: absolute; inset: 0; transition: opacity .55s ease-out; }
.sp3d-conf { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp3d-pop { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 26px; color: #ffe066; -webkit-text-stroke: 2px #3a1a0a; paint-order: stroke fill; animation: sp3dPop 1.2s ease-out forwards; }
@keyframes sp3dPop { 0% { transform: translate(-50%, -20%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }
.is-pop { animation: sp3dBump .4s cubic-bezier(.2,1.8,.4,1); display: inline-block; }
@keyframes sp3dBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* 手の案内 */
.sp3d-tut { position: absolute; inset: 0; }
.sp3d-tut__hand { position: absolute; width: 56px; height: 56px; margin: -10px 0 0 -18px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.sp3d-tut__trail { position: absolute; left: 18px; top: 8px; width: 6px; height: 0; border-radius: 3px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.9)); }
.sp3d-tut.is-swipe-up .sp3d-tut__hand { animation: sp3dSwUp 1.6s ease-in-out infinite; }
.sp3d-tut.is-swipe-up .sp3d-tut__trail { animation: sp3dTrail 1.6s ease-in-out infinite; }
.sp3d-tut.is-pull-up .sp3d-tut__hand { animation: sp3dPull 1.8s ease-in-out infinite; }
.sp3d-tut.is-drag-x .sp3d-tut__hand { animation: sp3dDragX 1.8s ease-in-out infinite; }
.sp3d-tut.is-tap .sp3d-tut__hand { animation: sp3dTap 1.1s ease-in-out infinite; }
.sp3d-tut.is-aim-release .sp3d-tut__hand { animation: sp3dAim 2.2s ease-in-out infinite; }
.sp3d-tut.is-drag-any .sp3d-tut__hand { animation: sp3dAny 2.4s ease-in-out infinite; }
@keyframes sp3dSwUp { 0%,15% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(-140px); opacity: 1; } 85%,100% { transform: translateY(-160px); opacity: 0; } }
@keyframes sp3dTrail { 0%,25% { height: 0; top: 8px; } 70% { height: 140px; top: 8px; } 100% { height: 0; top: -150px; } }
@keyframes sp3dPull { 0%,10% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateY(70px); } 75% { transform: translateY(-110px); opacity: 1; } 90%,100% { transform: translateY(-130px); opacity: 0; } }
@keyframes sp3dDragX { 0%,100% { transform: translateX(-60px); } 50% { transform: translateX(60px); } }
@keyframes sp3dTap { 0%,100% { transform: scale(1); } 50% { transform: scale(.82) translateY(4px); } }
@keyframes sp3dAim { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(20px,-40px); } 75% { transform: translate(20px,-40px) scale(.9); } 100% { transform: translate(20px,-60px); opacity: 0; } }
@keyframes sp3dAny { 0% { transform: translate(0,0); } 33% { transform: translate(50px,-30px); } 66% { transform: translate(-40px,-60px); } 100% { transform: translate(0,0); } }
.sp3d-tut__t { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18%); transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(10,12,28,.78); color: #fff; font-weight: 900; font-size: 15px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
@media (prefers-reduced-motion: reduce) { .sp3d-ban b i, .sp3d-ban small, .sp3d-pop, .is-pop, .sp3d-tut__hand, .sp3d-tut__trail { animation: none !important; } }
.sp3d-fps { position: fixed; left: 6px; bottom: 6px; z-index: 2147483002; background: rgba(0,0,0,.6); color: #7fff9a; font: 11px/1.3 monospace; padding: 3px 6px; border-radius: 4px; pointer-events: none; }
/* 2回目: 上の帯の題は左に小さく、真ん中は HUD の置き場（stage.hudTop） */
.sp3d-imm__t { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .9; }
.sp3d-imm__slot { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 6px; pointer-events: auto; }
.sp3d-imm__slot:empty { pointer-events: none; }