/* 고양이점프 STAGE 5 — 양궁냥. static/catjump_archery.js 와 함께 쓴다. */
.ar-root { position:absolute; inset:0; z-index:6; overflow:hidden; display:none; background:#0e2238; font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; -webkit-user-select:none; user-select:none; touch-action:none; }
.ar-root.on { display:block; }
.ar-view { position:absolute; left:0; top:0; width:960px; height:500px; transform-origin:0 0; overflow:visible; }
.ar-sky { position:absolute; left:-320px; width:1600px; top:0; height:330px; background:linear-gradient(#3a7bd5,#8fc8f2 70%,#e9f6ff); }
.ar-cloud { position:absolute; width:140px; height:36px; border-radius:99px; background:rgba(255,255,255,.85); box-shadow:40px -12px 0 -4px rgba(255,255,255,.85),-34px 6px 0 -8px rgba(255,255,255,.8); animation:arCloud 60s linear infinite; }
@keyframes arCloud { from { transform:translateX(-200px); } to { transform:translateX(1160px); } }
.ar-hills { position:absolute; left:-320px; top:250px; width:1600px; height:120px; background:radial-gradient(ellipse 280px 90px at 480px 100%,#4f9a5a 98%,transparent 100%),radial-gradient(ellipse 340px 110px at 940px 100%,#3f8a4c 98%,transparent 100%),radial-gradient(ellipse 240px 80px at 1220px 100%,#59a862 98%,transparent 100%); }
.ar-grass { position:absolute; left:-320px; top:340px; width:1600px; height:160px; background:repeating-linear-gradient(90deg,#3f9e4a 0 60px,#3a9443 60px 120px); }
.ar-flag { position:absolute; top:60px; width:4px; height:90px; background:#fff; }
.ar-flag::after { content:""; position:absolute; left:4px; top:2px; width:50px; height:26px; background:#e8505a; clip-path:polygon(0 0,100% 20%,70% 50%,100% 80%,0 100%); animation:arFlag 1s ease-in-out infinite alternate; transform-origin:0 50%; }
@keyframes arFlag { to { transform:skewY(6deg) scaleX(.85); } }
.ar-rail { position:absolute; left:-320px; top:352px; width:1600px; height:10px; background:#8a5a2b; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.ar-target { position:absolute; left:0; top:0; width:0; height:0; z-index:4; }
.ar-target svg { position:absolute; left:-140px; top:-140px; width:280px; height:280px; overflow:visible; filter:drop-shadow(0 8px 5px rgba(0,0,0,.3)); }
.ar-leg { position:absolute; width:8px; background:#6a4a2a; z-index:3; }
.ar-stuck { position:absolute; width:46px; height:6px; margin:-3px 0 0 -3px; transform-origin:3px 3px; background:linear-gradient(90deg,#c9a070 0 70%,#e8505a 70%); border-radius:3px; }
.ar-ret { position:absolute; width:70px; height:70px; margin:-35px 0 0 -35px; z-index:8; pointer-events:none; }
.ar-ret svg { width:100%; height:100%; overflow:visible; }
.ar-ret.buff svg { filter:drop-shadow(0 0 7px #7cf08a); }
.ar-arrow { position:absolute; width:60px; height:6px; margin:-3px 0 0 -30px; background:linear-gradient(90deg,#fff 0 20%,#c9a070 20% 85%,#888 85%); border-radius:3px; z-index:9; display:none; }
.ar-cat { position:absolute; left:405px; top:372px; width:150px; height:128px; z-index:7; pointer-events:none; }
.ar-cat svg { width:100%; height:100%; display:block; overflow:visible; }
.ar-cat.shot { animation:arRecoil .25s ease-out; }
@keyframes arRecoil { 30% { transform:translateY(5px) scale(1.04,.96); } }
.ar-cat.cele { animation:arCele .5s ease-in-out 3; }
@keyframes arCele { 50% { transform:translateY(-26px) rotate(8deg); } }
.ar-opts { position:absolute; z-index:10; left:0; top:0; width:960px; height:500px; pointer-events:none; }
.ar-opt { position:absolute; width:300px; height:44px; padding:0 10px; border:3px solid #fff; border-radius:14px; background:rgba(30,20,80,.85); color:#fff; font:inherit; font-size:18px; font-weight:900; cursor:pointer; pointer-events:auto; word-break:keep-all; line-height:1.1; transition:transform .1s; }
.ar-opt:hover { transform:scale(1.04); background:rgba(90,70,220,.9); }
.ar-opt.ok { background:#2fae5a; border-color:#b9ffc8; } .ar-opt.no { background:#c0404a; }
.ar-opt.off { pointer-events:none; opacity:.6; }
.ar-hud { position:absolute; z-index:11; left:0; right:0; top:8px; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.ar-score { padding:6px 18px; border-radius:99px; background:rgba(20,16,40,.88); color:#fff; font-weight:900; font-size:15px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.ar-score b { color:#ffd84a; font-size:20px; margin:0 6px; }
.ar-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; }
.ar-q small { display:block; font-size:.6em; font-weight:700; color:#6a6f90; }
.ar-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; }
.ar-speed { position:absolute; z-index:11; right:max(14px,env(safe-area-inset-right)); top:78px; width:120px; padding:5px 8px; border-radius:12px; background:rgba(20,16,40,.8); color:#fff; font-size:11px; font-weight:900; letter-spacing:.08em; text-align:center; }
.ar-speed i { display:block; height:8px; margin-top:4px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; }
.ar-speed i b { display:block; height:100%; width:0; background:linear-gradient(90deg,#7cf08a,#ffd84a,#ff5a4a); }
.ar-arrows { position:absolute; z-index:11; left:50%; transform:translateX(-50%); bottom:6px; color:#fff; font-weight:900; font-size:14px; text-shadow:0 2px 3px #000; pointer-events:none; white-space:nowrap; }
.ar-pop { position:absolute; z-index:12; left:50%; top:44%; transform:translate(-50%,-50%) scale(.5); color:#fff; font-weight:900; font-style:italic; font-size:clamp(2rem,9vw,4.6rem); text-shadow:0 5px 0 rgba(0,0,0,.4),0 0 28px var(--cc,#ffd84a); opacity:0; pointer-events:none; white-space:nowrap; text-align:center; }
.ar-pop small { display:block; font-size:.32em; font-style:normal; }
.ar-pop.go { animation:arPop 1.2s ease-out; }
.ar-pop.big.go { animation:arPopBig 1.6s ease-out; }
@keyframes arPop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.2); } 30% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-70%) scale(1); } }
@keyframes arPopBig { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-8deg); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.6) rotate(3deg); } 25% { transform:translate(-50%,-50%) scale(1.15) rotate(-2deg); } 85% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-72%) scale(1.2); } }
.ar-flash { position:absolute; inset:0; z-index:13; background:#fff; opacity:0; pointer-events:none; }
.ar-flash.go { animation:arFlash .5s ease-out; } @keyframes arFlash { 0% { opacity:.85; } 100% { opacity:0; } }
.ar-view.shake { animation:arShake .4s; } @keyframes arShake { 20% { translate:-8px 4px; } 40% { translate:7px -5px; } 60% { translate:-5px 3px; } 80% { translate:3px -2px; } }
.ar-conf { position:absolute; width:10px; height:14px; z-index:12; pointer-events:none; }
.ar-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; }
.ar-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; }
.ar-stat { padding:5px 10px; border-radius:99px; background:rgba(255,255,255,.9); color:#2a2a4a; font-size:12px; font-weight:800; }
.ar-over { position:absolute; z-index:25; inset:0; display:none; place-items:center; background:rgba(8,12,30,.7); }
.ar-over.on { display:grid; }
.ar-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; }
.ar-card h3 { margin:0 0 4px; font-size:1.25rem; color:#4a3aa8; }
.ar-card p { margin:6px 0; font-size:.92rem; color:#4a4f70; font-weight:600; }
.ar-card ul { list-style:none; margin:8px 0; padding:0; text-align:left; }
.ar-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; }
.ar-card li.done { background:#e8f8e8; border-color:#a8d8a8; } .ar-card li.lock { opacity:.5; }
.ar-card li button, .ar-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; }
.ar-card .row { display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; } .ar-card .row button.sub { background:#9a98b8; }
.ar-card .big { font-size:2.2rem; font-weight:900; margin:4px 0; } .ar-card .stars { font-size:1.5rem; color:#f0b020; }
body.mode-archery #world, body.mode-archery #fx, body.mode-archery #hud, body.mode-archery #hudProg, body.mode-archery #starHud, body.mode-archery #comboBadge, body.mode-archery #vignette, body.mode-archery #flash, body.mode-archery #dark, body.mode-archery #moon, body.mode-archery #fog, body.mode-archery #starTint, body.mode-archery #wordToast, body.mode-archery #fsDuck, body.mode-archery #fsJump, body.mode-archery .stats, body.mode-archery .mission, body.mode-archery .stage-progress, body.mode-archery .pad { display:none !important; }