/* 고양이점프 STAGE 4 — 냥축구(가상 클럽 '로열 냥드리드'). static/catjump_soccer.js 와 함께 쓴다. */
.sc-root { position:absolute; inset:0; z-index:6; overflow:hidden; display:none; background:#10243a; font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; -webkit-user-select:none; user-select:none; }
.sc-root.on { display:block; }
.sc-view { position:absolute; left:0; top:0; width:960px; height:500px; transform-origin:0 0; overflow:visible; }
.sc-sky { position:absolute; left:-320px; top:0; width:1600px; height:230px; background:linear-gradient(#27406e,#6a5a9a 60%,#e8a67a); }
.sc-stands { position:absolute; left:-320px; top:34px; width:1600px; height:190px; background:linear-gradient(#26263a,#3a3a5a); clip-path:polygon(0 100%,4% 12%,96% 12%,100% 100%); }
.sc-crowd { position:absolute; left:0; top:0; width:100%; height:100%; background:radial-gradient(circle at 8px 8px,#f6d3b5 0 4px,transparent 5px) 0 0/22px 22px,radial-gradient(circle at 19px 19px,#e86a7a 0 4px,transparent 5px) 0 0/22px 22px,radial-gradient(circle at 8px 19px,#f6f2e0 0 4px,transparent 5px) 0 0/22px 22px,radial-gradient(circle at 19px 8px,#8a6ad8 0 4px,transparent 5px) 0 0/22px 22px; opacity:.88; animation:scSway 2.6s ease-in-out infinite alternate; }
.sc-crowd.cheer { animation:scCheer .22s ease-in-out 8 alternate; }
@keyframes scSway { to { transform:translateX(5px); } }
@keyframes scCheer { to { transform:translateY(-12px); } }
.sc-boards { position:absolute; left:-320px; top:208px; width:1600px; height:26px; background:repeating-linear-gradient(90deg,#4a2a8a 0 150px,#fff 150px 156px,#2a6a8a 156px 306px,#fff 306px 312px); box-shadow:0 3px 0 rgba(0,0,0,.35); color:#fff; font-weight:900; font-size:15px; line-height:26px; letter-spacing:.12em; text-align:center; overflow:hidden; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.sc-pitch { position:absolute; left:-320px; top:234px; width:1600px; height:266px; background:repeating-linear-gradient(0deg,#3f9e4a 0 34px,#3a9443 34px 68px); }
.sc-line { position:absolute; background:rgba(255,255,255,.7); }
.sc-goal { position:absolute; left:262px; top:210px; width:436px; height:166px; }
.sc-net { position:absolute; left:8px; top:8px; right:8px; bottom:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 12px),rgba(10,20,30,.38); }
.sc-net.ripple { animation:scRipple .7s ease-out; }
@keyframes scRipple { 30% { transform:scale(1.06,1.08); } 60% { transform:scale(.98,.97); } }
.sc-post { position:absolute; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.7); }
.sc-post.l { left:0; top:0; width:9px; height:100%; } .sc-post.r { right:0; top:0; width:9px; height:100%; } .sc-post.t { left:0; top:0; width:100%; height:9px; }
.sc-post.hit { animation:scPost .45s; } @keyframes scPost { 20% { background:#ffd84a; box-shadow:0 0 18px #ffd84a; } }
.sc-zone { position:absolute; width:178px; height:68px; display:grid; place-items:center; padding:4px 8px; border:3px solid rgba(255,255,255,.85); border-radius:14px; background:rgba(255,255,255,.2); color:#fff; font-size:17px; font-weight:900; text-align:center; line-height:1.15; text-shadow:0 2px 0 rgba(0,0,0,.45); cursor:pointer; z-index:5; word-break:keep-all; backdrop-filter:blur(2px); transition:transform .12s,background .12s; }
.sc-zone:hover, .sc-zone.sel { background:rgba(255,216,74,.5); transform:scale(1.05); }
.sc-zone.ok { background:rgba(80,220,110,.75); border-color:#b9ffc8; } .sc-zone.no { background:rgba(230,80,80,.6); }
.sc-zone b { display:block; font-size:12px; opacity:.85; }
.sc-zone.off { pointer-events:none; opacity:.55; }
.sc-spr { position:absolute; pointer-events:none; }
.sc-spr svg { display:block; width:100%; height:100%; overflow:visible; }
.sc-keeper { transition:transform .38s cubic-bezier(.2,.9,.3,1); transform-origin:50% 70%; }
.sc-wall .sc-spr { transition:transform .3s; } .sc-wall.jump .sc-spr { transform:translateY(-34px); }
.sc-ball { position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px; pointer-events:none; z-index:8; filter:drop-shadow(0 6px 3px rgba(0,0,0,.3)); }
.sc-ball svg { width:100%; height:100%; display:block; }
.sc-ball .lab { position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:2px; padding:2px 9px; border-radius:99px; background:rgba(255,255,255,.95); color:#222; font-weight:900; font-size:15px; white-space:nowrap; }
.sc-olly { transition:transform .25s; }
.sc-olly.jump { transform:translateY(-70px); } .sc-olly.cele { animation:scCele .5s ease-in-out 3; }
@keyframes scCele { 50% { transform:translateY(-34px) rotate(14deg) scale(1.1); } }
.sc-meter { position:absolute; left:50%; bottom:22px; width:min(78%,520px); height:34px; transform:translateX(-50%); border-radius:99px; background:rgba(0,0,0,.55); border:3px solid #fff; display:none; z-index:12; overflow:hidden; }
.sc-meter.on { display:block; }
.sc-meter .good { position:absolute; top:0; bottom:0; background:linear-gradient(#7cf08a,#3fc060); }
.sc-meter .need { position:absolute; top:0; bottom:0; width:6px; margin-left:-3px; background:#fff; transform:translateX(0); box-shadow:0 0 8px #fff; }
.sc-meter .lbl { position:absolute; left:0; right:0; top:0; text-align:center; font-size:14px; font-weight:900; line-height:30px; color:#fff; text-shadow:0 1px 2px #000; pointer-events:none; }
.sc-hud { position:absolute; z-index:10; left:0; right:0; top:8px; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.sc-score { padding:6px 18px; border-radius:99px; background:rgba(20,16,40,.88); color:#fff; font-weight:900; font-size:15px; letter-spacing:.02em; box-shadow:0 3px 10px rgba(0,0,0,.4); white-space:nowrap; }
.sc-score b { color:#ffd84a; font-size:19px; margin:0 6px; }
.sc-q { max-width:92%; padding:8px 22px; border-radius:16px; background:rgba(255,255,255,.96); color:#1c2540; font-weight:900; font-size:clamp(1.05rem,3.4vw,1.7rem); text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.35); pointer-events:auto; }
.sc-q small { display:block; font-size:.62em; font-weight:700; color:#6a6f90; }
.sc-q .spk { margin-left:8px; padding:3px 10px; border:0; border-radius:99px; background:#dfe4ff; color:#2a3a8a; font-weight:800; font-size:13px; cursor:pointer; }
.sc-comm { position:absolute; z-index:11; left:50%; top:46%; transform:translate(-50%,-50%) scale(.6); padding:8px 26px; border-radius:18px; color:#fff; font-weight:900; font-size:clamp(1.6rem,7vw,3.4rem); font-style:italic; letter-spacing:.04em; text-shadow:0 4px 0 rgba(0,0,0,.4),0 0 24px var(--cc,#ffd84a); opacity:0; pointer-events:none; white-space:nowrap; }
.sc-comm small { display:block; font-size:.34em; font-style:normal; letter-spacing:0; }
.sc-comm.go { animation:scComm 1.3s ease-out; }
@keyframes scComm { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 25% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } }
.sc-btns { position:absolute; z-index:12; left:max(10px,env(safe-area-inset-left)); top:8px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.sc-btn { padding:7px 12px; border:0; border-radius:99px; background:rgba(40,30,90,.88); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.sc-stat { padding:5px 10px; border-radius:99px; background:rgba(255,255,255,.9); color:#2a2a4a; font-size:12px; font-weight:800; }
.sc-over { position:absolute; z-index:25; inset:0; display:none; place-items:center; background:rgba(8,12,30,.7); }
.sc-over.on { display:grid; }
.sc-card { width:min(94%,620px); max-height:94%; overflow:auto; padding:16px 20px 18px; border-radius:18px; background:#f7f5ff; color:#1c2540; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.5); border:3px solid #6a5ad8; touch-action:pan-y; }
.sc-card h3 { margin:0 0 4px; font-size:1.25rem; color:#4a3aa8; }
.sc-card p { margin:6px 0; font-size:.92rem; color:#4a4f70; font-weight:600; }
.sc-card ul { list-style:none; margin:8px 0; padding:0; text-align:left; }
.sc-card li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; margin:6px 0; border-radius:10px; background:#fff; border:2px solid #dcd6f6; font-size:.9rem; font-weight:700; }
.sc-card li.done { background:#e8f8e8; border-color:#a8d8a8; } .sc-card li.lock { opacity:.5; }
.sc-card li button, .sc-card .row button { padding:7px 14px; border:0; border-radius:99px; background:#5a4ad8; color:#fff; font:inherit; font-weight:800; font-size:.85rem; cursor:pointer; }
.sc-card .row { display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; } .sc-card .row button.sub { background:#9a98b8; }
.sc-card .big { font-size:2.2rem; font-weight:900; margin:4px 0; color:#1c2540; } .sc-card .stars { font-size:1.5rem; color:#f0b020; }
@media (pointer:coarse) { .sc-hud { transform:scale(.9); transform-origin:50% 0; } }
body.mode-soccer #world, body.mode-soccer #fx, body.mode-soccer #hud, body.mode-soccer #hudProg, body.mode-soccer #starHud, body.mode-soccer #comboBadge, body.mode-soccer #vignette, body.mode-soccer #flash, body.mode-soccer #dark, body.mode-soccer #moon, body.mode-soccer #fog, body.mode-soccer #starTint, body.mode-soccer #wordToast, body.mode-soccer #fsDuck, body.mode-soccer #fsJump, body.mode-soccer .stats, body.mode-soccer .mission, body.mode-soccer .stage-progress, body.mode-soccer .pad { display:none !important; }

.sc-q .tm { display:block; height:6px; margin-top:6px; border-radius:99px; background:rgba(0,0,0,.12); overflow:hidden; }
.sc-q .tm b { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff5a4a,#ffd84a 60%,#7cf08a); }
.sc-ball.fire { filter:drop-shadow(0 0 10px #ff7a2a) drop-shadow(0 0 20px #ffb02e); animation:scFire .3s ease-in-out infinite alternate; }
@keyframes scFire { to { transform:scale(1.15); } }