:root{--bg:#17141c;--panel:#231e2a;--line:#3d3446;--ink:#efe9df;--sub:#a99fb3;--aqua:#3fd0e8;--blue:#2a7de1;--warn:#ff6b6b;--paper:#fffdf3}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;word-break:keep-all;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.btn{display:inline-block;min-height:42px;padding:9px 18px;margin:6px 4px 0;border:2px solid var(--line);border-radius:12px;background:#2c2634;font-weight:700;font-size:15px;cursor:pointer;touch-action:manipulation}
.btn:hover{border-color:var(--aqua)}
.btn.primary{background:linear-gradient(180deg,#43d6ee,#2a7de1);border-color:#1d5fb0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn:disabled{opacity:.45;cursor:default}

/* 🏠 시작 화면 */
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 30%,#2b2533,#120f16 70%)}
.home-card{width:min(380px,100%);text-align:center;background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:24px 22px 20px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.logo{position:relative;display:inline-block;margin:22px auto 4px;padding:0 26px 0 6px;transform:rotate(-6deg) skewX(-8deg)}
/* 기울인 글자 끝이 잘리지 않게 글자 칸에 여유(padding)를 준다 */
.logo-main{display:inline-block;padding:0 .2em .06em .08em;font-family:Impact,"Arial Black","Malgun Gothic",sans-serif;font-weight:900;font-style:italic;font-size:54px;line-height:.92;letter-spacing:1px;background:linear-gradient(180deg,#fff 0%,#9ef3ff 35%,#2fb7e6 60%,#1f63c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(3px 3px 0 #0b2c5a) drop-shadow(-2px -2px 0 #fff) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
/* 비눗방울: 큰 것·중간·작은 것이 '!' 위로 대각선을 따라 떠오른다 */
.bubbles{position:absolute;right:-30px;top:-34px;width:64px;height:74px;pointer-events:none;transform:skewX(8deg) rotate(6deg)}
.bubbles i{position:absolute;border-radius:50%;border:1.5px solid rgba(200,245,255,.85);background:radial-gradient(circle at 30% 28%,#fff 0 13%,rgba(255,255,255,.18) 16% 52%,rgba(150,225,255,.35) 72%,rgba(255,160,235,.6) 100%);box-shadow:inset -2px -3px 5px rgba(120,200,255,.45),0 0 8px rgba(150,225,255,.45);animation:bubbleUp 3.2s ease-in-out infinite}
.bubbles .b1{width:26px;height:26px;left:0;top:44px}
.bubbles .b2{width:17px;height:17px;left:26px;top:20px;animation-delay:-1.1s}
.bubbles .b3{width:10px;height:10px;left:46px;top:2px;animation-delay:-2.2s}
@keyframes bubbleUp{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-6px)}}
.home-sub{margin:14px 0 10px;color:var(--sub);font-size:14px;letter-spacing:2px}
.home label{display:block;text-align:left;font-weight:700;font-size:14px;margin:8px 0 5px}
#nick{width:100%;font-size:16px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#18141d;color:var(--ink);outline:none;user-select:text;-webkit-user-select:text}
#nick:focus{border-color:var(--aqua)}
#nickErr{color:var(--warn);font-size:12px;text-align:left;min-height:16px;margin-top:3px}
#startBtn{width:100%;margin:10px 0 0;font-size:17px}
.how{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--sub)}
#howBtn{width:100%;margin:8px 0 0}

/* 📖 게임 방법 */
.guide{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;background:rgba(5,4,8,.78)}
.guide-box{position:relative;margin:auto;width:min(460px,100%);border-radius:16px;padding:18px 18px 14px;background:var(--panel);border:2px solid var(--line);animation:pop .22s ease-out}
.guide-x{position:absolute;right:8px;top:8px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--sub);font-size:18px;cursor:pointer}
.guide-x:hover{background:#2c2634;color:var(--ink)}
.guide-step{display:block;color:var(--sub);font-size:12px;font-weight:700}
.guide-page h2{margin:2px 34px 10px 0;font-size:19px}
.g-scene{display:block;width:100%;aspect-ratio:2/1;height:auto;border-radius:10px;border:2px solid var(--line);background:#000;image-rendering:pixelated;image-rendering:crisp-edges}
.g-text{margin:10px 0 0;font-size:14px;line-height:1.65;white-space:pre-line}
.g-text.small{font-size:13px;color:var(--sub)}
.g-text b{color:#ffe08a}
.g-text kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 1px;border:1px solid #6a5d78;border-bottom-width:3px;border-radius:6px;background:#2c2634;font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;text-align:center}
.g-rules{display:block;margin:6px 0;padding:7px 10px;border-radius:8px;background:#2a1418;border:1px solid #7a1f28;font-size:13px;font-weight:700;line-height:1.6}
.g-steps{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none;counter-reset:st}
.g-steps li{counter-increment:st;padding:6px 10px;border-radius:10px;background:#2c2634;border:1px solid var(--line);font-size:13px}
.g-steps li::before{content:counter(st) ". ";color:var(--aqua);font-weight:800}
.g-steps b{color:#fff}
.g-table{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.g-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,46px);align-items:center;border-top:1px solid var(--line);font-size:12px}
.g-row:first-child{border-top:0}
.g-row>span{padding:6px 2px;text-align:center}
.g-row.head{background:#1c1822;color:var(--sub);font-weight:700;font-size:11px;line-height:1.25}
.g-row.head span{display:flex;flex-direction:column;align-items:center;gap:3px}
.g-tile{width:24px;height:24px;image-rendering:pixelated;border-radius:4px}
.g-tool{display:flex!important;align-items:center;gap:6px;text-align:left!important;padding-left:8px!important}
.g-tool .mop-svg{flex:none}
.g-tool b{display:block;color:var(--sub);font-size:11px;font-weight:700}
.g-tool small{display:block;color:var(--sub);font-size:11px}
.g-row .ok{color:#5fe0a0;font-size:16px;font-weight:900}
.g-row .no{opacity:.55}
.guide-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 2px}
.guide-dots i{width:7px;height:7px;border-radius:50%;background:#4a4054}
.guide-dots i.on{background:var(--aqua)}
.guide-nav{display:flex;justify-content:space-between;gap:8px}
.guide-nav .btn{flex:1;margin:6px 0 0}
@media (max-width:420px){.guide-box{padding:16px 12px 12px}.g-row{grid-template-columns:minmax(0,1fr) repeat(4,36px)}.g-row.head{font-size:10px}.g-tool{padding-left:4px!important;gap:3px}.g-tool .mop-svg{width:22px;height:25px}}

/* 🎮 게임 */
.game{max-width:980px;margin:0 auto;padding:8px 8px 14px}
.hud{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px}
.hud-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hud-time b{font-size:17px;color:#ffe9a8}
.hud-time small{margin-left:8px;color:var(--sub);font-size:12px}
.hud-rules{font-weight:800;color:#ffb3b3;font-size:14px;white-space:nowrap}
.hud-rules.hit{animation:hit .5s 3}
@keyframes hit{50%{color:#fff;text-shadow:0 0 8px #f33}}
.bars{margin-top:6px}
.bar-box{flex:1;min-width:0}
.bar-box span{font-size:12px;color:var(--sub)}
.bar-box b{color:var(--ink)}
.bar{position:relative;height:9px;margin-top:3px;border-radius:9px;background:#120f16;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fd0e8,#9ef3ff);transition:width .3s}
.bar em{position:absolute;top:0;bottom:0;width:2px;background:#ffe9a8}
.bar.mop i{background:linear-gradient(90deg,#c9b38a,#6b4b2a)}
.hud-tool{margin-top:5px;font-size:12px;color:var(--sub)}

/* 벽장 */
.closet{text-align:center}
.closet-room{position:relative;height:min(62vh,430px);min-height:330px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,226,150,.28),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 46px),
    linear-gradient(180deg,#4a3f33,#2e2720 72%,#1f1a15 72%,#171310)}
.closet-room::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,transparent 40%,rgba(0,0,0,.55));animation:dim 6s infinite}
@keyframes dim{0%,92%,100%{opacity:1}94%{opacity:.6}96%{opacity:1}97%{opacity:.4}}
.bulb{position:absolute;left:50%;top:0;width:14px;height:34px;margin-left:-7px;background:linear-gradient(#222 0 18px,#ffe9a8 18px);border-radius:0 0 8px 8px;box-shadow:0 20px 40px 10px rgba(255,225,140,.25)}
.cabinet{position:absolute;left:50%;top:44px;width:min(300px,74%);height:72%;transform:translateX(-50%);perspective:900px}
.cab-inside{position:absolute;inset:0;border-radius:6px;background:linear-gradient(180deg,#2a221b,#1a1511);border:6px solid #6b5a45;box-shadow:inset 0 0 30px rgba(0,0,0,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.shelf{width:86%;border-bottom:5px solid #6b5a45;font-size:24px;padding-bottom:2px}
.shelf.top{position:absolute;top:8%}
.tool-slot{min-height:58px;filter:drop-shadow(0 0 10px rgba(160,240,255,.35))}
.mop-svg{display:block;margin:0 auto}
.tool-slot small{display:block;font-size:12px;color:var(--sub)}
.inside-note{background:var(--paper);color:#333;border:0;border-radius:3px;padding:6px 10px;font-size:13px;font-weight:700;transform:rotate(-4deg);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#8a7559,#a08a6b 50%,#7d6a50);border:4px solid #5d4c38;transition:transform .7s cubic-bezier(.3,.8,.3,1);box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.door.left{left:0;transform-origin:left center;border-radius:6px 0 0 6px}
.door.right{right:0;transform-origin:right center;border-radius:0 6px 6px 0}
.door::after{content:"";position:absolute;top:48%;width:6px;height:26px;background:#d8c9a8;border-radius:3px}
.door.left::after{right:8px}.door.right::after{left:8px}
.cabinet.open .door.left{transform:rotateY(-105deg)}
.cabinet.open .door.right{transform:rotateY(105deg)}
.notice{position:absolute;left:12%;top:16%;width:70%;padding:14px 6px;border:0;border-radius:2px;background:linear-gradient(135deg,#fffdf3 60%,#eaf6ff);color:#333;font-weight:800;font-size:13px;line-height:1.35;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.7);transform:rotate(-2deg);cursor:pointer}
.notice::before{content:"";position:absolute;left:50%;top:-6px;width:34px;height:12px;margin-left:-17px;background:rgba(255,255,255,.55)}
.sticker{position:absolute;right:10%;top:22%;width:74%;padding:10px 4px;border-radius:10px;background:#fff;transform:rotate(5deg);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sticker b{display:block;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:22px;line-height:.95;color:#1f8fe0;text-shadow:2px 2px 0 #0b2c5a}
.sticker small{display:block;margin-top:4px;font-size:10px;color:#555}
.closet-floor{position:absolute;left:8%;bottom:6%;font-size:30px;display:flex;align-items:flex-end;gap:10px;opacity:.85}
.stool{display:inline-block;width:38px;height:26px;border-top:6px solid #6b5a45;border-left:4px solid #4d3f30;border-right:4px solid #4d3f30}
.closet-status{min-height:22px;margin:10px 0 2px;color:#e8dcc8;font-size:15px}
.closet-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}

/* 쪽지·질문 */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;background:rgba(5,4,8,.72)}
.modal-box{margin:auto;width:min(440px,100%);border-radius:14px;padding:20px 20px 16px;background:var(--panel);border:2px solid var(--line);animation:pop .22s ease-out}
.modal-box.paper{background:linear-gradient(135deg,#fffdf3 55%,#eef8ff);color:#2b2620;border:0;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.75);transform:rotate(-.6deg)}
.modal-box.paper .modal-text::first-line{font-family:Impact,"Arial Black","Malgun Gothic",sans-serif;font-style:italic;font-size:24px;color:#1f8fe0}
.modal-box.bad{border-color:#7a1f28;background:#2a1418}
.modal-text{white-space:pre-line;line-height:1.65;font-size:15px}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:14px}
.modal-box.paper .btn{background:#2a7de1;border-color:#1d5fb0;color:#fff}
/* 📝 쪽지: 제목은 작게, 빨간 쪽지는 기울어진 흘림 글씨 */
.modal-box.paper.memo .modal-text::first-line{font-family:inherit;font-style:normal;font-size:13px;color:#8a7f70}
.memo-red{display:block;color:#b3121c;font-family:"Nanum Pen Script","Nanum Brush Script","Gungsuh","궁서",cursive;font-size:21px;line-height:1.55;transform:rotate(-3deg) skewX(-10deg);transform-origin:left center;text-shadow:0 0 1px rgba(120,0,0,.55)}
.memo-red i{display:inline-block;font-style:italic;transform:translateY(var(--y,0)) rotate(var(--r,0))}
@keyframes pop{from{transform:scale(.9);opacity:0}}

/* 결말 */
.ending{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;background:radial-gradient(circle at 50% 40%,#2b2533,#0c0a0f 75%)}
.ending.sunrise{background:radial-gradient(circle at 50% 100%,#fff6dc,#f3c48a 40%,#6b4a5a 85%)}
.ending.sunrise .ending-box{color:#2b2018;background:rgba(255,250,240,.86);border-color:#e3cfae}
.ending.sunrise .end-stats div{background:rgba(120,80,40,.1)}
.ending.sunrise .end-stats div span:first-child{color:#7a6450}
.ending.sunrise .btn:not(.primary){background:#fff;color:#2b2018;border-color:#d9c4a3}
.ending-box{margin:auto;width:min(440px,100%);text-align:center;background:rgba(35,30,42,.92);border:2px solid var(--line);border-radius:18px;padding:24px 20px 18px;animation:pop .4s ease-out}
.ending-box h2{margin:0 0 10px;font-size:34px;font-family:Impact,"Arial Black","Malgun Gothic",sans-serif;font-style:italic;letter-spacing:1px}
.ending.clear h2{background:linear-gradient(180deg,#fff,#9ef3ff 40%,#2a7de1);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #0b2c5a)}
.ending.bad h2{color:#ff8a8a}
.ending-box p{white-space:pre-line;line-height:1.7;margin:0 0 14px}
.end-stats{display:grid;gap:6px;margin-bottom:10px}
.end-stats div{display:flex;justify-content:space-between;padding:7px 12px;border-radius:9px;background:rgba(0,0,0,.25);font-weight:700;font-size:14px}
.end-stats div span:first-child{color:var(--sub)}

@media (max-width:560px){
  .logo-main{font-size:46px}
  .hud-time b{font-size:15px}
  .hud-time small{display:block;margin:0}
  
}
@media (prefers-reduced-motion:reduce){.bubbles i,.closet-room::after,.hud-rules.hit{animation:none}}


/* 도구 업그레이드 연출 */
.levelup-box{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(10,8,16,.55);text-align:center;animation:luIn .35s ease-out}
.lu-burst{position:absolute;inset:-30%;background:radial-gradient(circle,rgba(170,240,255,.75),rgba(120,200,255,.25) 30%,rgba(170,240,255,0) 60%);animation:luBurst 2.2s ease-out forwards}
.lu-title,.lu-name,.lu-desc,.lu-floor,.levelup-box .mop-svg{position:relative}
.lu-title{font-family:Impact,"Arial Black","Malgun Gothic",sans-serif;font-style:italic;font-size:32px;background:linear-gradient(180deg,#fff,#9ef3ff 45%,#2a7de1);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #0b2c5a)}
.lu-name{font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 6px #000}
.lu-desc{font-size:13px;color:#d8f6ff;text-shadow:0 1px 4px #000}
.lu-floor{margin-top:4px;padding:4px 12px;border-radius:20px;background:rgba(0,0,0,.55);color:#ffe9a8;font-weight:800;font-size:14px}
.levelup-box .mop-svg{animation:luPop .7s cubic-bezier(.2,1.6,.4,1)}
.cabinet.levelup .cab-inside{animation:cabGlow 2s ease-out}
/* 도구를 넣고 기다리는 동안: 덜그럭, 덜그럭 (두 번 흔들리고 잠깐 쉼) */
.cabinet.rattle{animation:rattle .9s linear infinite}
@keyframes rattle{0%,50%,100%{transform:translateX(-50%)}8%{transform:translateX(calc(-50% - 3px)) rotate(-.8deg)}16%{transform:translateX(calc(-50% + 3px)) rotate(.7deg)}24%{transform:translateX(calc(-50% - 2px)) rotate(-.5deg)}32%{transform:translateX(calc(-50% + 2px)) rotate(.4deg)}40%{transform:translateX(calc(-50% - 1px))}}
@keyframes luIn{from{opacity:0}}
@keyframes luBurst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.2);opacity:0}}
@keyframes luPop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
@keyframes cabGlow{0%,60%{box-shadow:inset 0 0 50px rgba(150,235,255,.95),0 0 50px rgba(150,235,255,.7)}100%{box-shadow:inset 0 0 30px rgba(0,0,0,.8)}}

/* 비밀 결말 */
.ending.mart{background:radial-gradient(circle at 50% 30%,#eef3f0,#9fb0a8 45%,#2a2f2d 90%)}
.ending.mart .ending-box{background:rgba(250,252,250,.9);color:#1f2a25;border-color:#b9c8c0}
.ending.mart h2{color:#c0392b}
.ending.mart .end-stats div{background:rgba(0,0,0,.06)}
.ending.mart .end-stats div span:first-child{color:#5b6b63}
.ending.mart .btn:not(.primary){background:#fff;color:#1f2a25;border-color:#b9c8c0}
@media (prefers-reduced-motion:reduce){.levelup-box,.lu-burst,.levelup-box .mop-svg,.cabinet.levelup .cab-inside,.cabinet.rattle{animation:none}}

/* 건물 안 (탑뷰) */
.world-view{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000;transition:opacity .25s}
.world-view.fade{opacity:0}
#scene{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
.floor-label{position:absolute;left:10px;top:8px;padding:3px 9px;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font-weight:800;font-size:14px;pointer-events:none}
.toast{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:92%;padding:8px 14px;border-radius:10px;background:rgba(10,8,14,.85);color:#f3ead8;font-size:14px;font-weight:700;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;white-space:pre-line}
.toast.show{opacity:1}
.toast.bad{background:rgba(110,10,20,.9)}
.keys-hint{margin:8px 0 0;text-align:center;color:var(--sub);font-size:12px}

.hud-btns{display:flex;align-items:center;gap:6px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#2c2634;font-size:16px;cursor:pointer;touch-action:manipulation}
.bar.up i{background:linear-gradient(90deg,#ffd76b,#ffb02e)}
.bar.up.ready i{background:linear-gradient(90deg,#9ef3ff,#fff);animation:readyGlow 1s infinite}
@keyframes readyGlow{50%{filter:brightness(1.4)}}
#upText b{color:#ffe9a8}
.world-view.hurt::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.0),rgba(170,0,20,.55));animation:hurt .9s ease-out forwards;pointer-events:none}
@keyframes hurt{from{opacity:1}to{opacity:0}}
.end-stats div.tags{align-items:flex-start;text-align:right;font-size:12px;line-height:1.6}

.lu-take{position:relative;margin-top:10px;font-size:16px;animation:luPop .5s .4s both}
/* 머리 위 말풍선·아이템 시간 */
.say,.buff,.float-text,.tag-pop{position:absolute;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;z-index:3}
.say{padding:5px 10px;border-radius:10px;background:#fff;color:#2a2230;font-weight:800;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.4);opacity:0;transition:opacity .2s}
.say::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.say.show{opacity:1}
.buff{padding:2px 8px;border-radius:9px;background:rgba(20,40,60,.85);border:1px solid #9ef3ff;color:#e9fbff;font-weight:800;font-size:12px}
.float-text{color:#ffe9a8;font-weight:900;font-size:16px;text-shadow:0 2px 4px #000;opacity:0}
.float-text.show{animation:floatUp 1.4s ease-out}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-80%)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-240%)}}

/* 명찰을 주우면 머리 위로 뛰어오른다 */
.tag-pop{display:flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:6px;background:#fffdf3;border:2px solid #2a7de1;color:#1d2a3a;font-weight:900;font-size:15px;letter-spacing:1px;box-shadow:0 3px 8px rgba(0,0,0,.5);opacity:0}
.tag-pop b{font-size:15px}
.tag-pop.rare{border-color:#d6336c;background:#fff0f4;color:#8b1a3a}
.tag-pop.show{animation:tagJump 2.2s ease-out}
@keyframes tagJump{0%{opacity:0;transform:translate(-50%,-60%) scale(.5)}12%{opacity:1;transform:translate(-50%,-190%) scale(1.15)}22%{transform:translate(-50%,-150%) scale(1)}80%{opacity:1;transform:translate(-50%,-170%)}100%{opacity:0;transform:translate(-50%,-230%)}}
/* Z999를 주운 순간: 화면이 어두워지고 청소부 머리 위만 보인다 */
.world-view.freeze::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(0,0,0,0) 0,rgba(0,0,0,.25) 60px,rgba(0,0,0,.75) 180px);pointer-events:none;animation:freezeIn .4s ease-out}
@keyframes freezeIn{from{opacity:0}}
.world-view.freeze .toast{opacity:0!important}
.world-view.freeze .tag-pop,.world-view.freeze .say{z-index:4}
.world-view.freeze .tag-pop{margin-top:-16px}
.world-view.freeze .say{margin-top:6px}
/* 꼭 봐야 하는 안내(TIP): 잠깐 멈추고 화면을 살짝 어둡게, 다른 알림은 가린다 */
.tip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;width:max-content;max-width:88%;padding:10px 16px;border-radius:12px;background:#fff8dc;border:2px solid #e3b23c;color:#2a2230;font-size:14px;font-weight:800;line-height:1.45;text-align:center;white-space:pre-line;box-shadow:0 4px 14px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.tip b{display:block;margin-bottom:2px;color:#b07800;font-size:12px;letter-spacing:.05em}
.tip small{display:block;margin-top:4px;color:#9a8a60;font-size:11px;font-weight:700}
.tip.show{opacity:1;animation:tipIn .35s ease-out}
@keyframes tipIn{from{transform:translate(-50%,8px)}}
.world-view.tipping::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.35);pointer-events:none;animation:freezeIn .3s ease-out}
.world-view.tipping .toast{opacity:0!important}
.world-view.tipping .tag-pop,.world-view.tipping .say{z-index:4}

/* 숨은 결말: 건물 청소 100% (금빛) / 김솔음 구출 + 100% (금+보라빛) */
.ending.perfect{background:radial-gradient(circle at 50% 35%,#4a3a18,#120d06 72%)}
.ending.perfect::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff6c8 1.2px,transparent 1.6px),radial-gradient(#ffd86b 1px,transparent 1.4px);background-size:46px 46px,73px 73px;background-position:0 0,20px 30px;opacity:.35;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.12}}
.ending.perfect .ending-box{position:relative;border-color:#f3cf63;background:rgba(42,32,14,.93);box-shadow:0 0 0 3px #f3cf6333,0 0 46px #f5c64a55}
.ending.perfect h2{background:linear-gradient(180deg,#fffbe6,#ffd54a 45%,#e0861c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #5a3a0b)}
.perfect-badge{display:inline-block;margin:0 0 12px;padding:5px 14px;border-radius:999px;font-weight:900;font-size:13px;letter-spacing:.08em;color:#3a2606;background:linear-gradient(110deg,#ffd54a 0%,#fff3b8 45%,#ffd54a 55%,#e8a92a 100%);background-size:260% 100%;animation:badgeShine 2.4s linear infinite;box-shadow:0 2px 0 #9a6a12}
@keyframes badgeShine{0%{background-position:100% 0}100%{background-position:-60% 0}}
.ending.perfect .end-stats div.gold{background:linear-gradient(90deg,#f5c64a33,#f5c64a14);outline:1px solid #f3cf6366}
.ending.perfect .end-stats div.gold span:last-child{color:#ffd54a}
.ending.perfect.hero{background:radial-gradient(circle at 30% 25%,#5a3a8a,transparent 55%),radial-gradient(circle at 75% 70%,#6a4a14,transparent 55%),#120a1c}
.ending.perfect.hero::before{background-image:radial-gradient(#fff6c8 1.2px,transparent 1.6px),radial-gradient(#d9b8ff 1.1px,transparent 1.5px);background-size:46px 46px,67px 67px;background-position:0 0,22px 31px;opacity:.38}
.ending.perfect.hero .ending-box{background:linear-gradient(160deg,rgba(52,30,78,.94),rgba(48,36,14,.94));border-color:transparent;box-shadow:0 0 0 2px #e9c45a,0 0 0 5px #a77dff55,0 0 50px #b88cff55,0 0 70px #f5c64a33}
.ending.perfect.hero h2{background:linear-gradient(100deg,#fff3b8,#ffd54a 30%,#d9a8ff 65%,#9b6bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #2e1650)}
.ending.perfect.hero .perfect-badge{color:#2b1446;background:linear-gradient(110deg,#ffd54a 0%,#fff3b8 30%,#e2c4ff 50%,#b48bff 70%,#ffd54a 100%);background-size:260% 100%;box-shadow:0 2px 0 #6b3fb0}
.ending.perfect.hero .end-stats div.gold{background:linear-gradient(90deg,#f5c64a33,#a77dff22);outline:1px solid #d6b1ff66}
@media (prefers-reduced-motion:reduce){.ending.perfect::before,.perfect-badge{animation:none}}

/* 조작 안내: 마우스가 있는 기기(터치 노트북 포함)는 키 안내, 마우스 없는 폰·태블릿은 터치 안내 */
.touch-hint{display:none;margin:8px 0 0;text-align:center;font-size:12px;color:var(--sub)}
@media (any-hover:none){.keys-hint{display:none}.touch-hint{display:block}}
#game canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.how.keys-hint,.how.touch-hint{margin-top:12px;line-height:1.6}
.world-view{margin:0 auto}   /* 높이에 맞춰 폭이 줄면 가운데로 */