/* 고양이점프 STAGE 2 — 고양이 카페(RPG) 화면. static/catjump_cafe.js 와 함께 쓴다. */
.cf-root { position:absolute; inset:0; z-index:6; overflow:hidden; display:none; background:#2a2018; font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; -webkit-user-select:none; user-select:none; }
.cf-root.on { display:block; }
.cf-view { position:absolute; left:0; top:0; width:960px; height:500px; transform-origin:0 0; overflow:visible; }
.cf-room { position:absolute; inset:0; }
.cf-wall { position:absolute; left:-320px; top:0; width:1600px; height:120px; background:linear-gradient(#f6ead6,#ecd9bb 70%,#c9a97c 70%,#b78f5f 100%); box-shadow:inset 0 -6px 0 rgba(0,0,0,.12); }
.cf-floor { position:absolute; left:-320px; top:120px; width:1600px; height:380px; }
.cf-floor.wood { background:repeating-linear-gradient(90deg,#dcbb8a 0 118px,#d2ae7a 118px 120px),#dcbb8a; background-blend-mode:multiply; }
.cf-floor.grass { background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.08) 0 3px,transparent 4px) 0 0/46px 46px,linear-gradient(#8fcf7a,#6fb85f); }
.cf-floor.attic { background:repeating-linear-gradient(90deg,#9a7a58 0 80px,#8a6c4c 80px 82px); }
.cf-wall.sky { background:linear-gradient(#a9dcff,#dff3ff 80%); box-shadow:none; }
.cf-wall.atticwall { background:linear-gradient(#6a5240,#53402f); box-shadow:inset 0 -6px 0 rgba(0,0,0,.2); }
.cf-obj { position:absolute; box-sizing:border-box; }
.k-counter { background:linear-gradient(#b98152,#8a5a32); border-radius:10px; box-shadow:0 6px 0 #5e3b1f,0 10px 12px rgba(0,0,0,.25); }
.k-counter:before { content:''; position:absolute; left:6px; right:6px; top:6px; height:16px; border-radius:6px; background:#e6c8a0; }
.k-counter:after { content:''; position:absolute; left:26px; top:-26px; width:46px; height:34px; border-radius:6px 6px 0 0; background:#6c747c; box-shadow:60px 10px 0 -8px #d85a5a; }
.k-table { border-radius:50%; background:radial-gradient(circle at 40% 35%,#d9a874,#a8743f); box-shadow:0 8px 0 #7a4f27,0 12px 10px rgba(0,0,0,.22); }
.k-table:after { content:''; position:absolute; left:34%; top:26%; width:26px; height:22px; border-radius:4px 4px 10px 10px; background:#fff; box-shadow:0 0 0 3px #e9dfd0,16px 6px 0 -4px #f3c9c9; }
.k-chair { border-radius:8px; background:#7d5a3a; box-shadow:0 4px 0 #54391f; }
.k-sofa { border-radius:22px 22px 12px 12px; background:linear-gradient(#7fbfb6,#5a9c94); box-shadow:0 7px 0 #3d6f69,0 11px 12px rgba(0,0,0,.25); }
.k-sofa:before, .k-sofa:after { content:''; position:absolute; top:12px; width:30%; height:46%; border-radius:10px; background:#a5d9d1; }
.k-sofa:before { left:8%; } .k-sofa:after { right:8%; }
.k-shelf { border-radius:6px; background:repeating-linear-gradient(0deg,#8a5a32 0 5px,transparent 5px 30px),linear-gradient(90deg,#c0443e 0 14%,#e0a53a 14% 26%,#3e8a5e 26% 40%,#3e6aa8 40% 56%,#a8543e 56% 70%,#6e3e8a 70% 84%,#e0c43a 84%); box-shadow:0 0 0 5px #8a5a32,0 8px 10px rgba(0,0,0,.25); }
.k-tree { border-radius:10px; background:linear-gradient(90deg,#c9a07a,#e6c9a8 40%,#c9a07a); box-shadow:0 6px 10px rgba(0,0,0,.25); }
.k-tree:before { content:''; position:absolute; left:-14px; top:8px; width:calc(100% + 28px); height:20px; border-radius:10px; background:#d9715b; }
.k-tree:after { content:''; position:absolute; left:-10px; top:64px; width:calc(100% + 20px); height:18px; border-radius:9px; background:#5aa88a; }
.k-plant { background:radial-gradient(circle at 50% 30%,#4aa85a 0 40%,transparent 42%) 0 0/100% 70%,linear-gradient(#c8693f,#a04e2a) 50% 100%/60% 34% no-repeat; border-radius:8px; }
.k-plant:before { content:''; position:absolute; left:14%; top:4%; width:46%; height:46%; border-radius:50%; background:#5dbb6a; box-shadow:18px 6px 0 #3d9a4e; }
.k-rug { border-radius:50%; background:repeating-radial-gradient(circle,#e8a2a2 0 14px,#f6d3d3 14px 28px); opacity:.85; }
.k-window { border-radius:8px; background:linear-gradient(#bfe6ff,#e9f7ff); box-shadow:0 0 0 6px #fff8ee,0 0 0 8px #b08a5a,inset 0 -18px 0 rgba(255,255,255,.4); }
.k-window:before { content:''; position:absolute; left:50%; top:0; width:4px; height:100%; margin-left:-2px; background:#fff8ee; }
.k-clock { border-radius:50%; background:#fff; box-shadow:0 0 0 5px #8a5a32; }
.k-clock:before { content:''; position:absolute; left:50%; top:50%; width:3px; height:40%; background:#333; transform-origin:50% 100%; transform:translate(-50%,-100%); }
.k-clock:after { content:''; position:absolute; left:50%; top:50%; width:3px; height:30%; background:#333; transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(100deg); }
.k-board { border-radius:6px; background:#2e4a3c; box-shadow:0 0 0 5px #8a5a32; color:#f7f1d8; font-size:13px; font-weight:800; display:grid; place-items:center; text-align:center; line-height:1.3; }
.k-door { border-radius:60px 60px 0 0; background:linear-gradient(90deg,#8a5a32,#a8713f 50%,#8a5a32); box-shadow:0 0 0 5px #5e3b1f; }
.k-door:after { content:''; position:absolute; right:14%; top:52%; width:9px; height:9px; border-radius:50%; background:#ffd84a; }
.k-door.locked:before { content:''; position:absolute; left:50%; top:40%; width:22px; height:18px; margin-left:-11px; border-radius:4px; background:#444; box-shadow:0 -12px 0 -5px #888; }
.k-bed { border-radius:14px; background:linear-gradient(#7a5236,#5e3b24); box-shadow:0 5px 0 #3e2616; }
.k-bed:before { content:''; position:absolute; inset:6px 8px; background:radial-gradient(circle at 12% 40%,#ff7aa8 0 8px,transparent 9px),radial-gradient(circle at 36% 60%,#ffd84a 0 8px,transparent 9px),radial-gradient(circle at 60% 35%,#ff9a5a 0 8px,transparent 9px),radial-gradient(circle at 84% 55%,#c58aff 0 8px,transparent 9px); }
.k-bed.watered { box-shadow:0 5px 0 #3e2616,0 0 18px 4px rgba(120,200,255,.8); }
.k-gtree { background:radial-gradient(circle at 50% 28%,#4aa85a 0 46%,transparent 48%) 0 0/100% 75%,linear-gradient(#8a5a32,#6e4624) 50% 100%/22% 36% no-repeat; }
.k-bench { border-radius:8px; background:linear-gradient(#b98152,#8a5a32); box-shadow:0 6px 0 #5e3b1f; }
.k-well { border-radius:50% 50% 14px 14px / 30% 30% 14px 14px; background:repeating-linear-gradient(90deg,#9aa1a8 0 18px,#818890 18px 20px); box-shadow:0 6px 0 #5a6068; }
.k-well:before { content:''; position:absolute; left:14%; top:-10px; width:72%; height:26px; border-radius:50%; background:#2a3a4a; }
.k-bush { border-radius:50%; background:radial-gradient(circle at 35% 35%,#5dbb6a,#3d8a4e); box-shadow:0 6px 0 #2d6a3c; }
.k-fence { background:repeating-linear-gradient(90deg,#f4e9d4 0 22px,transparent 22px 34px); border-bottom:6px solid #f4e9d4; }
.k-fridge { border-radius:8px; background:linear-gradient(#f6f8fa,#d3dbe3); box-shadow:0 6px 0 #98a3ae; }
.k-fridge:before { content:''; position:absolute; left:8px; top:30%; width:4px; height:30%; border-radius:2px; background:#8a96a3; }
.k-box { border-radius:6px; background:linear-gradient(#c9a070,#a8794a); box-shadow:0 6px 0 #6e4a28; }
.k-box:before { content:''; position:absolute; left:0; right:0; top:34%; height:8px; background:rgba(0,0,0,.18); }
.k-trunk { border-radius:10px; background:linear-gradient(#8a4a32,#6a3220); box-shadow:0 7px 0 #3e1c10; }
.k-trunk:before { content:''; position:absolute; left:0; right:0; top:34%; height:10px; background:#d8b34a; }
.k-trunk:after { content:''; position:absolute; left:50%; top:30%; width:16px; height:20px; margin-left:-8px; border-radius:4px; background:#ffd84a; box-shadow:0 0 0 2px #8a6a10; }
.k-starwin { border-radius:80px 80px 0 0; background:radial-gradient(circle at 30% 40%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 55% 65%,#ffe08a 0 2px,transparent 3px),linear-gradient(#1c2a5a,#3a4a8a); box-shadow:0 0 0 6px #8a6a4a; }
.k-lamp { border-radius:50%; background:radial-gradient(circle,#fff4b8,#ffd86a 55%,transparent 70%); }
.cf-npc, .cf-player { position:absolute; pointer-events:none; }
.cf-npc svg, .cf-player svg { display:block; width:100%; height:100%; overflow:visible; }
.cf-player svg, .cf-npc.moving svg { animation:cfBob .3s ease-in-out infinite alternate; }
.cf-player.idle svg { animation:none; }
.cf-player.flip svg { transform:scaleX(-1); }
.cf-npc.cat svg { animation:cfBreathe 2.4s ease-in-out infinite alternate; }
@keyframes cfBob { to { transform:translateY(-4px); } }
.cf-player.flip svg { animation-name:cfBobFlip; }
@keyframes cfBobFlip { from { transform:scaleX(-1) translateY(0); } to { transform:scaleX(-1) translateY(-4px); } }
@keyframes cfBreathe { to { transform:scale(1.03,.97); transform-origin:50% 100%; } }
.cf-name { position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:2px; padding:1px 7px; border-radius:99px; background:rgba(40,28,20,.7); color:#fff; font-size:11px; font-weight:700; white-space:nowrap; }
.cf-mark { position:absolute; left:50%; bottom:100%; margin-bottom:16px; transform:translateX(-50%); font-weight:900; font-size:22px; color:#ffd84a; text-shadow:0 2px 0 #7a4a10; animation:cfBounce .7s ease-in-out infinite alternate; }
@keyframes cfBounce { to { transform:translateX(-50%) translateY(-6px); } }
.cf-prompt { position:absolute; z-index:9999; transform:translate(-50%,-100%); padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.95); color:#3a2a1a; font-size:13px; font-weight:800; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.3); pointer-events:none; }
.cf-prompt:after { content:''; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:rgba(255,255,255,.95); }
.cf-spark { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff6b8; box-shadow:0 0 10px #ffe66b; pointer-events:none; animation:cfSpark .8s ease-out forwards; z-index:9998; }
@keyframes cfSpark { to { transform:translateY(-34px) scale(.2); opacity:0; } }
/* HUD(보는 화면 기준, 확대/축소되지 않음) */
.cf-hud { position:absolute; z-index:8; left:max(10px,env(safe-area-inset-left)); top:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.cf-pill { padding:5px 12px; border-radius:99px; background:rgba(255,248,236,.92); color:#4a3322; font-size:13px; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.cf-btns { display:flex; gap:6px; }
.cf-btns button, .cf-quiz button, .cf-dialog button { font:inherit; }
.cf-btn { padding:7px 12px; border:0; border-radius:99px; background:rgba(90,60,40,.88); color:#fff; font-size:13px; font-weight:800; cursor:pointer; }
.cf-pad { position:absolute; z-index:8; left:max(14px,env(safe-area-inset-left)); bottom:14px; width:150px; height:150px; display:none; touch-action:none; }
.cf-pad button { position:absolute; width:50px; height:50px; padding:0; border:2px solid rgba(255,255,255,.8); border-radius:14px; background:rgba(90,60,40,.55); color:#fff; font-size:20px; font-weight:900; touch-action:none; }
.cf-pad .u { left:50px; top:0; } .cf-pad .d { left:50px; top:100px; } .cf-pad .l { left:0; top:50px; } .cf-pad .r { left:100px; top:50px; }
.cf-a { position:absolute; z-index:8; right:max(16px,env(safe-area-inset-right)); bottom:22px; width:86px; height:86px; padding:0; border:3px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(214,110,70,.75); color:#fff; font-size:18px; font-weight:900; display:none; touch-action:none; }
@media (pointer:coarse) { .cf-pad, .cf-a { display:block; } }
.cf-dialog { position:absolute; z-index:20; left:50%; bottom:14px; width:min(92%,760px); transform:translateX(-50%); display:none; padding:14px 18px 12px; border-radius:16px; background:rgba(255,248,236,.97); color:#3a2a1a; box-shadow:0 6px 20px rgba(0,0,0,.4); border:3px solid #b98152; }
.cf-dialog.on { display:block; }
.cf-dialog .nm { position:absolute; left:16px; top:-16px; padding:3px 14px; border-radius:99px; background:#b98152; color:#fff; font-weight:900; font-size:14px; }
.cf-dialog .tx { min-height:44px; font-size:16px; line-height:1.55; font-weight:600; white-space:pre-wrap; word-break:keep-all; }
.cf-dialog .more { text-align:right; font-size:12px; color:#a87a4a; font-weight:800; animation:cfBounce .8s infinite alternate; }
.cf-dialog .choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.cf-dialog .choices button { padding:8px 16px; border:2px solid #b98152; border-radius:12px; background:#fff; color:#4a3322; font-weight:800; font-size:15px; cursor:pointer; }
.cf-quiz, .cf-log, .cf-end { position:absolute; z-index:25; inset:0; display:none; place-items:center; background:rgba(30,20,12,.62); }
.cf-quiz.on, .cf-log.on, .cf-end.on { display:grid; }
.cf-card { width:min(94%,640px); max-height:94%; overflow:auto; padding:16px 20px 18px; border-radius:18px; background:#fff8ec; color:#3a2a1a; box-shadow:0 10px 30px rgba(0,0,0,.5); border:3px solid #b98152; text-align:center; touch-action:pan-y; }
.cf-card h3 { margin:0 0 4px; font-size:16px; color:#8a5a32; }
.cf-prog { display:flex; justify-content:center; gap:6px; margin:6px 0 10px; }
.cf-prog i { width:10px; height:10px; border-radius:50%; background:#e0cdb0; } .cf-prog i.on { background:#6bbf6b; } .cf-prog i.cur { background:#ffb02e; }
.cf-q { font-size:clamp(1.4rem,5vw,2.1rem); font-weight:900; margin:6px 0 4px; letter-spacing:.02em; }
.cf-q small { display:block; font-size:.85rem; font-weight:700; color:#8a6a4a; letter-spacing:0; margin-top:2px; }
.cf-spk { display:inline-block; margin-left:8px; padding:4px 10px; border:0; border-radius:99px; background:#e9c9a0; color:#5a3a1a; font-weight:800; font-size:13px; vertical-align:middle; cursor:pointer; }
.cf-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.cf-opt { padding:12px 8px; border:2px solid #d9b98a; border-radius:12px; background:#fff; color:#3a2a1a; font-weight:800; font-size:clamp(.95rem,3.4vw,1.15rem); cursor:pointer; word-break:keep-all; }
.cf-opt.ok { background:#cdf0cd; border-color:#4aa84a; } .cf-opt.no { background:#f6d0d0; border-color:#c85a5a; animation:cfShake .3s; }
@keyframes cfShake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.cf-fb { min-height:22px; margin-top:8px; font-weight:800; color:#6a4a2a; }
.cf-fb.good { color:#2f8a2f; } .cf-fb.bad { color:#b84a4a; }
.cf-foot { display:flex; justify-content:space-between; margin-top:10px; }
.cf-foot button { padding:6px 12px; border:0; border-radius:99px; background:#d9c4a4; color:#5a3a1a; font-weight:800; cursor:pointer; }
.cf-tiles { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0; }
.cf-tile { min-width:44px; padding:10px 8px; border:2px solid #d9b98a; border-radius:10px; background:#fff; font-size:1.3rem; font-weight:900; color:#3a2a1a; cursor:pointer; }
.cf-tile.used { opacity:.25; pointer-events:none; }
.cf-slots { display:flex; justify-content:center; gap:6px; min-height:48px; margin:8px 0; }
.cf-slots span { min-width:40px; padding:8px 4px; border-bottom:3px solid #b98152; font-size:1.5rem; font-weight:900; }
.cf-match { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:8px; }
.cf-match .col { display:grid; gap:8px; align-content:start; }
.cf-match .cf-opt.sel { border-color:#ffb02e; background:#fff1c8; } .cf-match .cf-opt.done { opacity:.3; pointer-events:none; }
.cf-log ul { list-style:none; margin:8px 0; padding:0; text-align:left; }
.cf-log li { padding:8px 10px; border-radius:10px; margin:6px 0; background:#fff; border:2px solid #ead7bb; }
.cf-log li b { display:block; color:#5a3a1a; } .cf-log li span { font-size:.85rem; color:#8a6a4a; font-weight:600; }
.cf-log li.done { background:#e6f6e0; border-color:#a8d89a; } .cf-log li.hid { background:#f1ecf8; border-color:#d3c4ea; }
.cf-end .cf-card { text-align:center; } .cf-end ul { text-align:left; max-height:130px; overflow:auto; padding-left:18px; font-size:.9rem; }
.cf-toast { position:absolute; z-index:15; left:50%; top:16%; transform:translateX(-50%); padding:8px 18px; border-radius:99px; background:rgba(60,40,24,.92); color:#fff7e0; font-weight:900; font-size:15px; opacity:0; pointer-events:none; transition:opacity .25s; white-space:nowrap; }
.cf-toast.on { opacity:1; }
body.mode-rpg #world, body.mode-rpg #fx, body.mode-rpg #hud, body.mode-rpg #hudProg, body.mode-rpg #starHud, body.mode-rpg #comboBadge, body.mode-rpg #vignette, body.mode-rpg #flash, body.mode-rpg #dark, body.mode-rpg #moon, body.mode-rpg #fog, body.mode-rpg #starTint, body.mode-rpg #wordToast, body.mode-rpg #fsDuck, body.mode-rpg #fsJump { display:none !important; }

/* 버튼 글꼴 정리: 위의 'font:inherit' 때문에 커지지 않도록 선택자를 더 구체적으로 */
.cf-quiz .cf-spk { font-size:13px; font-weight:800; margin-left:8px; }
.cf-quiz .cf-opt { font-size:clamp(.95rem,3.4vw,1.15rem); font-weight:800; }
.cf-quiz .cf-tile { font-size:1.3rem; font-weight:900; }
.cf-quiz .cf-foot button { font-size:.9rem; font-weight:800; }
.cf-dialog .choices button { font-size:15px; font-weight:800; }
@media (pointer:coarse) { .cf-hud { transform:scale(.82); transform-origin:0 0; } }