/* 고양이점프 STAGE 6 — 우주냥(우주 RPG). static/catjump_space.js 와 함께 쓴다.
   사이트의 '우주' 몰입 화면처럼: 아주 어두운 남색(#02030c), 가는 글자에 넓은 자간, 은은한 푸른 유리 패널. */
.sp-root { position:absolute; inset:0; z-index:6; overflow:hidden; display:none; background:#02030c; color:#f2f5ff; font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; -webkit-user-select:none; user-select:none; touch-action:none; }
.sp-root.on { display:block; }
.sp-view { position:absolute; left:0; top:0; width:960px; height:500px; transform-origin:0 0; overflow:visible; background:#02030c; }
.sp-bg { position:absolute; left:-340px; top:0; width:1640px; height:500px; transition:opacity .6s; }
.sp-stars { position:absolute; inset:-40px -380px; background-image:radial-gradient(1.4px 1.4px at 20px 30px,#fff 98%,transparent),radial-gradient(1px 1px at 90px 120px,#cfe0ff 98%,transparent),radial-gradient(1.6px 1.6px at 160px 60px,#fff 98%,transparent),radial-gradient(1px 1px at 230px 170px,#ffe9c8 98%,transparent),radial-gradient(1.2px 1.2px at 300px 90px,#fff 98%,transparent),radial-gradient(1px 1px at 60px 210px,#bcd0ff 98%,transparent); background-size:340px 250px; animation:spTwinkle 5s ease-in-out infinite alternate,spDrift 90s linear infinite; opacity:.85; }
.sp-stars.b { background-size:210px 170px; background-position:70px 40px; animation-duration:7s,140s; opacity:.55; }
@keyframes spTwinkle { to { opacity:.4; } } @keyframes spDrift { to { background-position:-340px 250px; } }
.sp-decor { position:absolute; inset:0; pointer-events:none; }
.sp-planet { position:absolute; border-radius:50%; box-shadow:inset -22px -14px 40px rgba(0,0,12,.65),0 0 60px rgba(120,160,255,.16); }
.sp-floor { position:absolute; left:-340px; right:-340px; top:262px; bottom:0; }
.sp-floor::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.32)); border-top:1px solid rgba(190,208,255,.28); }
.sp-ents { position:absolute; inset:0; }
.sp-ent { position:absolute; width:0; height:0; }
.sp-ent > svg { position:absolute; overflow:visible; pointer-events:none; filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); }
.sp-ent .lab { position:absolute; left:0; bottom:100%; transform:translateX(-50%); margin-bottom:6px; padding:3px 12px; border:1px solid rgba(190,208,255,.5); border-radius:99px; background:rgba(8,12,36,.78); color:#e6eeff; font-size:12px; font-weight:600; letter-spacing:.12em; white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; }
.sp-ent.near .lab { opacity:1; }
.sp-ent.near > svg { filter:drop-shadow(0 0 10px rgba(160,200,255,.9)); }
.sp-ent.done > svg { opacity:.35; filter:none; }
.sp-ent.hid > svg { opacity:.5; animation:spTwinkle 1.6s ease-in-out infinite alternate; }
.sp-me { position:absolute; width:0; height:0; }
.sp-me svg { position:absolute; left:-30px; top:-72px; width:60px; height:72px; overflow:visible; filter:drop-shadow(0 6px 5px rgba(0,0,0,.5)); }
.sp-me.walk svg { animation:spBob .34s ease-in-out infinite alternate; } .sp-me.moon.walk svg { animation:spHop .7s ease-in-out infinite; }
.sp-me.left svg { transform:scaleX(-1); }
@keyframes spBob { to { translate:0 -4px; } } @keyframes spHop { 50% { translate:0 -26px; } }
.sp-me.stretch svg { animation:spStretch 1.6s ease-in forwards; }
@keyframes spStretch { to { transform:scale(.25,2.6); filter:blur(2px) brightness(1.6); } }
.sp-fly { position:absolute; z-index:3; top:60px; left:-120px; width:90px; height:50px; pointer-events:none; animation:spFly 7s linear forwards; }
.sp-fly svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 8px rgba(150,255,200,.6)); }
@keyframes spFly { from { transform:translate(0,0); } 50% { transform:translate(540px,22px) rotate(4deg); } to { transform:translate(1180px,-14px); } }
.sp-bubble { position:absolute; z-index:4; padding:4px 12px; border:1px solid rgba(190,208,255,.4); border-radius:12px; background:rgba(8,12,36,.8); color:#dfe9ff; font-size:13px; font-weight:600; letter-spacing:.06em; pointer-events:none; animation:spBub 3.4s ease-out forwards; }
@keyframes spBub { 0% { opacity:0; } 12%,80% { opacity:1; } 100% { opacity:0; } }
.sp-hole { position:absolute; left:800px; top:360px; width:0; height:0; pointer-events:none; }
.sp-hole .disk { position:absolute; left:-210px; top:-48px; width:420px; height:96px; border-radius:50%; background:radial-gradient(ellipse at center,#000 0 34%,#ffb04a 40%,#ff6a2a 52%,rgba(160,40,120,.5) 70%,transparent 76%); filter:blur(1.5px); animation:spSpin 9s linear infinite; transform-origin:50% 50%; }
.sp-hole .core { position:absolute; left:-72px; top:-72px; width:144px; height:144px; border-radius:50%; background:#000; box-shadow:0 0 0 3px rgba(255,190,110,.9),0 0 50px 16px rgba(255,150,70,.55),0 0 120px 40px rgba(120,60,200,.3); }
.sp-hole .eh { position:absolute; left:-122px; top:-122px; width:244px; height:244px; border-radius:50%; border:1px dashed rgba(200,220,255,.55); animation:spSpin 40s linear infinite reverse; }
.sp-hole .ehl { position:absolute; left:-90px; top:-146px; width:180px; text-align:center; font-size:11px; letter-spacing:.3em; color:rgba(200,220,255,.8); }
@keyframes spSpin { to { transform:rotate(360deg); } }
.sp-hud { position:absolute; z-index:10; left:max(16px,env(safe-area-inset-left)); top:12px; pointer-events:none; }
.sp-kicker { color:#9fb9e8; font-size:11px; letter-spacing:.34em; text-transform:uppercase; }
.sp-title { margin-top:4px; font-size:clamp(1.15rem,3.4vw,1.8rem); font-weight:300; letter-spacing:.14em; color:#f4f7ff; text-shadow:0 0 18px rgba(120,160,255,.5); }
.sp-shards { margin-top:6px; font-size:16px; letter-spacing:.3em; color:#bcd0ff; }
.sp-shards b { color:#ffe08a; text-shadow:0 0 10px #ffd76a; font-weight:400; }
.sp-btns { position:absolute; z-index:12; left:max(16px,env(safe-area-inset-left)); top:104px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.sp-btn { padding:6px 14px; border:1px solid rgba(190,208,255,.4); border-radius:99px; background:rgba(8,12,36,.7); color:#dfe9ff; font:inherit; font-size:12px; letter-spacing:.14em; cursor:pointer; backdrop-filter:blur(4px); }
.sp-pad { position:absolute; z-index:12; left:max(14px,env(safe-area-inset-left)); bottom:14px; width:150px; height:150px; display:none; touch-action:none; }
.sp-pad button { position:absolute; width:50px; height:50px; padding:0; border:1px solid rgba(190,208,255,.6); border-radius:14px; background:rgba(20,30,80,.55); color:#e6eeff; font-size:18px; touch-action:none; backdrop-filter:blur(3px); }
.sp-pad .u { left:50px; top:0; } .sp-pad .d { left:50px; top:100px; } .sp-pad .l { left:0; top:50px; } .sp-pad .r { left:100px; top:50px; }
.sp-a { position:absolute; z-index:12; right:max(16px,env(safe-area-inset-right)); bottom:22px; width:84px; height:84px; padding:0; border:1px solid rgba(190,208,255,.7); border-radius:50%; background:rgba(60,90,200,.55); color:#fff; font-size:17px; letter-spacing:.1em; display:none; touch-action:none; backdrop-filter:blur(3px); }
@media (pointer:coarse) { .sp-pad, .sp-a { display:block; } }
.sp-dlg { position:absolute; z-index:20; left:50%; bottom:8px; width:min(86%,720px); transform:translateX(-50%); display:none; padding:11px 18px 7px; border:1px solid rgba(190,208,255,.32); border-radius:16px; background:rgba(6,10,34,.88); backdrop-filter:blur(8px); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.sp-dlg.on { display:block; }
.sp-dlg .nm { position:absolute; left:18px; top:-13px; padding:2px 14px; border-radius:99px; background:#2a3f9a; color:#eaf0ff; font-size:12px; letter-spacing:.16em; }
.sp-dlg .tx { min-height:34px; font-size:15px; line-height:1.55; font-weight:400; letter-spacing:.03em; color:#eef2ff; white-space:pre-wrap; word-break:keep-all; }
.sp-dlg .more { text-align:right; font-size:11px; letter-spacing:.2em; color:#8fb0ff; animation:spTwinkle .8s infinite alternate; }
.sp-dlg .choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sp-dlg .choices button, .sp-quiz button, .sp-card button { font:inherit; }
.sp-dlg .choices button { padding:8px 18px; border:1px solid rgba(190,208,255,.5); border-radius:12px; background:rgba(40,60,150,.5); color:#f2f5ff; font-size:15px; cursor:pointer; }
.sp-quiz { position:absolute; z-index:22; inset:0; display:none; place-items:center; background:rgba(2,3,12,.72); backdrop-filter:blur(3px); }
.sp-quiz.on { display:grid; }
.sp-qbox { width:min(92%,640px); padding:16px 20px 18px; border:1px solid rgba(190,208,255,.3); border-radius:18px; background:rgba(8,12,40,.92); text-align:center; box-shadow:0 0 60px rgba(70,100,220,.25); }
.sp-qbox .qt { color:#9fb9e8; font-size:11px; letter-spacing:.3em; }
.sp-qbox .qp { margin:8px 0 2px; font-size:clamp(1.3rem,4.2vw,2rem); font-weight:300; letter-spacing:.08em; color:#fff; }
.sp-qbox .qp .spk { margin-left:8px; padding:3px 10px; border:1px solid rgba(190,208,255,.5); border-radius:99px; background:transparent; color:#cfe0ff; font-size:12px; cursor:pointer; }
.sp-qbox .qs { color:#8ea4d8; font-size:13px; letter-spacing:.08em; min-height:18px; }
.sp-qbox .opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.sp-qbox .opts button { padding:11px 8px; border:1px solid rgba(190,208,255,.4); border-radius:12px; background:rgba(40,60,150,.4); color:#f2f5ff; font-size:clamp(.95rem,2.6vw,1.1rem); cursor:pointer; word-break:keep-all; transition:background .12s,transform .12s; }
.sp-qbox .opts button:hover { background:rgba(80,110,230,.6); transform:scale(1.03); }
.sp-qbox .opts button.ok { background:#1f8a5a; border-color:#9fffd0; } .sp-qbox .opts button.no { background:#a03a4a; }
.sp-qbox .dots { margin-top:10px; letter-spacing:.4em; color:#6c82c0; } .sp-qbox .dots b { color:#8fffd0; font-weight:400; } .sp-qbox .dots i { color:#ff8a9a; font-style:normal; }
.sp-toast { position:absolute; z-index:24; left:50%; top:14%; transform:translate(-50%,0); padding:8px 22px; border:1px solid rgba(190,208,255,.4); border-radius:99px; background:rgba(8,12,40,.88); color:#eaf0ff; font-size:14px; letter-spacing:.1em; opacity:0; pointer-events:none; white-space:nowrap; }
.sp-toast.go { animation:spToast 2.6s ease-out; } @keyframes spToast { 0% { opacity:0; transform:translate(-50%,10px); } 12%,80% { opacity:1; transform:translate(-50%,0); } 100% { opacity:0; } }
.sp-fade { position:absolute; z-index:30; inset:0; background:#02030c; opacity:0; pointer-events:none; transition:opacity .4s; }
.sp-fade.on { opacity:1; } .sp-fade.warp { background:radial-gradient(circle,#fff 0,#9fc0ff 30%,#02030c 80%); }
.sp-view.warping { animation:spWarp .9s ease-in-out; } @keyframes spWarp { 40% { transform:scale(1.25); filter:blur(5px) brightness(2); } }
.sp-over { position:absolute; z-index:40; inset:0; display:none; place-items:center; background:rgba(2,3,12,.86); }
.sp-over.on { display:grid; }
.sp-card { width:min(94%,620px); max-height:94%; overflow:auto; padding:22px 24px; border:1px solid rgba(190,208,255,.3); border-radius:18px; background:rgba(8,12,40,.94); text-align:center; box-shadow:0 0 70px rgba(70,100,220,.3); touch-action:pan-y; }
.sp-card h3 { margin:0 0 6px; font-size:1.5rem; font-weight:300; letter-spacing:.18em; color:#fff; }
.sp-card .kk { color:#9fb9e8; font-size:11px; letter-spacing:.34em; }
.sp-card p { margin:10px 0; color:rgba(222,230,252,.78); font-size:.92rem; line-height:1.7; letter-spacing:.03em; }
.sp-card ul { list-style:none; margin:10px 0; padding:0; text-align:left; } .sp-card li { padding:7px 4px; border-bottom:1px solid rgba(190,208,255,.15); font-size:.9rem; color:#cfd9f5; } .sp-card li.d { color:#8fffd0; } .sp-card li.h { color:#ffe08a; }
.sp-card .row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.sp-card button { padding:8px 18px; border:1px solid rgba(190,208,255,.5); border-radius:99px; background:rgba(50,80,200,.55); color:#fff; font-size:.88rem; letter-spacing:.1em; cursor:pointer; } .sp-card button.sub { background:transparent; }
.sp-et { position:absolute; z-index:15; left:-200px; top:70px; width:200px; height:140px; pointer-events:none; display:none; }
.sp-et.go { display:block; animation:spEt 4.2s ease-in-out forwards; }
@keyframes spEt { 0% { transform:translate(0,200px); } 55% { transform:translate(560px,-30px) rotate(-8deg); } 100% { transform:translate(1200px,-80px); } }
.sp-bigmoon { position:absolute; z-index:14; left:330px; top:40px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle at 38% 34%,#fffdf2,#f1ead0 60%,#cfc6a2); box-shadow:0 0 120px 40px rgba(255,248,210,.5); opacity:0; pointer-events:none; transition:opacity 1s; }
.sp-bigmoon.on { opacity:1; }
body.mode-space #world, body.mode-space #fx, body.mode-space #hud, body.mode-space #hudProg, body.mode-space #starHud, body.mode-space #comboBadge, body.mode-space #vignette, body.mode-space #flash, body.mode-space #dark, body.mode-space #moon, body.mode-space #fog, body.mode-space #starTint, body.mode-space #wordToast, body.mode-space #fsDuck, body.mode-space #fsJump, body.mode-space .stats, body.mode-space .mission, body.mode-space .stage-progress, body.mode-space .pad { display:none !important; }
@media (prefers-reduced-motion:reduce) { .sp-stars, .sp-hole .disk, .sp-hole .eh { animation:none; } }