/*
  style.css – butterdoor 화면 디자인
  모든 스타일은 클래스(.class)로 작성했고, :root 변수(--bg, --wall, --floor, --door, --accent 등)로 색을 관리합니다.
  월드(풀숲~동물원)는 <html class="world-이름">, 보스판은 <html class="boss"> 로 색이 바뀝니다.
  구성: 게임 화면 / 메인화면과 게임 설명 창 / 클리어 엔딩 / 월드별 색 / 보스 테마
*/
:root{background:var(--bg);--bg:#a9d38f;--panel:#fff;--ink:#2f4a35;--wall:#d4efc0;--wall2:#a8d98f;--floor:#6fae52;--edge:#4f8a3c;--door:#b8804a;--door2:#80512a;--accent:#ef7d57;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root{--bg:#16241b;--panel:#243a2d;--ink:#e8f5e9;--wall:#2f5a3c;--wall2:#234a31;--floor:#1f4a2e;--edge:#3f7a52;--door:#c08a55;--door2:#8a5a30;--accent:#ff9a6b}}
.page{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.app{max-width:760px;margin:0 auto;padding:12px}
.hud{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:15px;flex-wrap:wrap;margin-bottom:8px}
.hud-item{background:var(--panel);padding:6px 10px;border-radius:10px}
.scene{position:relative;height:clamp(380px,64vh,520px);border-radius:14px;overflow:hidden;background:linear-gradient(var(--wall),var(--wall2));border:3px solid var(--edge);touch-action:none;user-select:none;-webkit-user-select:none}
.floor{position:absolute;left:0;right:0;bottom:0;height:64px;background:var(--floor);z-index:1}
.floor::before{content:var(--deco,"🌿");position:absolute;left:0;right:0;top:-20px;white-space:nowrap;overflow:hidden;font-size:22px;line-height:1;letter-spacing:4px}
.doors{position:absolute;inset:0;z-index:2}
.door{position:absolute;top:0;width:25%;display:flex;flex-direction:column;align-items:center;will-change:transform;transform:translateY(-500px)}
.door .lab{background:var(--panel);padding:5px 8px;border-radius:8px;font-weight:800;font-size:clamp(13px,3.6vw,18px);text-align:center;min-height:2.4em;display:flex;align-items:center;margin-top:4px;max-width:92%}
.door .frame{width:58px;height:116px;background:var(--door);border:4px solid var(--door2);border-radius:5px 5px 2px 2px;position:relative;transition:background .4s;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.door .frame::before,.door .frame::after{content:"";position:absolute;left:6px;right:6px;border:3px solid var(--door2);border-radius:3px;opacity:.45}
.door .frame::before{top:8px;height:36px}
.door .frame::after{top:56px;height:44px}
.door .knob{position:absolute;right:5px;top:54px;z-index:1;width:10px;height:10px;border-radius:50%;background:#ffd43b}
.door.sel .lab{outline:3px solid var(--accent)}
.door.open .frame{background:#ffe066;box-shadow:0 0 30px #ffe066}
.door.open .knob{display:none}
.door.open .frame::before,.door.open .frame::after{display:none}
.door.wrong .frame{background:#c9a6b8;opacity:.6}
.hero{position:absolute;bottom:26px;font-size:46px;transform:translateX(-50%);z-index:4;line-height:1}
.rope{display:none;position:absolute;inset:0;pointer-events:none}
.hero.tied .rope{display:block}
.rope-part{position:absolute;left:-3%;right:-3%;height:11%;box-sizing:border-box;border:2px solid #5a3a14;border-radius:6px;background:repeating-linear-gradient(135deg,#c9944f 0 4px,#8a5a22 4px 8px)}
.rope .b1{top:74%}
.rope .b2{top:86%}
.rope .knot{left:auto;right:-8px;top:78%;width:15px;height:15px;border-radius:50%}
.rope .knot::after{content:"";position:absolute;top:50%;left:100%;width:28px;height:6px;box-sizing:border-box;border:2px solid #5a3a14;border-radius:4px;background:repeating-linear-gradient(135deg,#c9944f 0 3px,#8a5a22 3px 6px);transform-origin:left center;transform:translateY(-50%) rotate(6deg)}
.hero.rope-l .rope .knot{right:auto;left:-8px}
.hero.rope-l .rope .knot::after{left:auto;right:100%;transform-origin:right center;transform:translateY(-50%) rotate(-6deg)}
.hero.tied .hero-img{animation:wiggle .3s ease-in-out 3}
@keyframes wiggle{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.hero.tied{filter:grayscale(.4)}
.mon{position:absolute;bottom:30px;font-size:38px;display:none;transform:translateX(-50%);z-index:5;line-height:1;animation:pop .4s}
@keyframes pop{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}
.banner{position:absolute;left:0;right:0;top:0;z-index:6;background:var(--panel);text-align:center;font-weight:800;padding:10px 12px;font-size:clamp(15px,3.6vw,22px);transition:all .3s}
.banner.big{top:14%;left:6%;right:6%;border-radius:18px;font-size:clamp(22px,6vw,34px);padding:22px 14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cd{position:absolute;left:0;right:0;top:52%;z-index:7;text-align:center;font-size:clamp(70px,18vw,110px);font-weight:900;color:var(--accent);text-shadow:0 3px 0 rgba(0,0,0,.2);display:none}
.msg{text-align:center;min-height:1.6em;margin:8px 0;font-weight:700}
.pad{display:flex;gap:10px;justify-content:center}
.pad-btn,.btn{font:inherit;font-weight:800;border:0;border-radius:12px;padding:14px 34px;background:var(--accent);color:#fff;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:9;padding:16px}
.ov .box{background:var(--panel);border-radius:18px;padding:24px;max-width:380px;text-align:center}
.ov .ov-title{margin:0 0 8px}
.shake{animation:sh .4s}
@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tool-btn{font:inherit;font-weight:800;font-size:14px;border:2px solid var(--accent);border-radius:999px;padding:6px 12px;background:var(--panel);color:var(--ink);cursor:pointer;touch-action:manipulation}
.tools .tool-pass{margin-left:auto;background:var(--accent);color:#fff}
.tools .tool-skip{background:var(--panel);color:var(--accent)}
.tool-btn:disabled{opacity:.4;cursor:default}
.fx{position:fixed;inset:0;z-index:10;pointer-events:none}
.ov .box.clear{background:linear-gradient(135deg,#fff3b0,#ffd0ec,#c8f0ff);color:#5a2a4a;box-shadow:0 0 50px #ffd23f;max-width:420px;animation:pop2 .8s ease-out}
@keyframes pop2{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:scale(1);opacity:1}}
.rb{font-size:30px;background:linear-gradient(90deg,#ff4f9a,#ff8a3d,#e6b800,#2fb86b,#2f9bff,#a05cff);-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 3s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.parade{font-size:26px;letter-spacing:4px;margin:8px 0}
.endbtns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.btn.alt{background:#7c6cff}
.btn.alt2{background:#ff8a3d}
.ov .box.clear.t-c{background:linear-gradient(135deg,#ffe9d2,#f3c9a0);box-shadow:0 0 30px #d99a5b}
.ov .box.clear.t-b{background:linear-gradient(135deg,#f6f9ff,#c3d3e8);box-shadow:0 0 40px #8fb2d9}
.ov .box.clear.t-a{background:linear-gradient(135deg,#fff7c2,#ffd24d);box-shadow:0 0 60px #ffc400}
.ov .box.clear.t-s{animation:pop2 .8s ease-out,glow 1s infinite alternate}
@keyframes glow{from{box-shadow:0 0 30px #ffd23f}to{box-shadow:0 0 90px #ff4f9a,0 0 140px #4fd1ff}}
:root.world-sea{--bg:#7cc8e3;--panel:#fff;--ink:#123f5a;--wall:#c6f0ff;--wall2:#5bb8e6;--floor:#f0d9a0;--edge:#1f8fc0;--door:#ff9a85;--door2:#c75a45;--accent:#ff6f59}
:root.world-park{--bg:#ffd966;--panel:#fff;--ink:#5a2a4a;--wall:#c9ecff;--wall2:#fff0b0;--floor:#ff9ec4;--edge:#e0457f;--door:#8c6bff;--door2:#4f33c4;--accent:#ff6b3d}
:root.world-school{--bg:#f2c76b;--panel:#fffdf5;--ink:#2e3b2f;--wall:#6b9a7a;--wall2:#41705a;--floor:#d9a86c;--edge:#7a4b22;--door:#5b8be0;--door2:#2f56a8;--accent:#e8534a}
:root.world-space{--bg:#15153a;--panel:#2c2a63;--ink:#eceaff;--wall:#3b3a8a;--wall2:#12123a;--floor:#8d93c9;--edge:#7c83ff;--door:#9aa4d8;--door2:#4a4f8f;--accent:#7c6cff}
:root.world-desert{--bg:#e9b872;--panel:#fff8e8;--ink:#5a3a1a;--wall:#ffe2a8;--wall2:#f4a85a;--floor:#e8c07a;--edge:#c77d2e;--door:#c9743d;--door2:#8a4a22;--accent:#2fa67a}
:root.world-spring{--bg:#ffd3df;--panel:#fff;--ink:#6a3550;--wall:#fff1f5;--wall2:#ffc2d4;--floor:#ffcfae;--edge:#e86aa0;--door:#e5789f;--door2:#b24a72;--accent:#ff6fa5}
:root.world-cafe{--bg:#d9b99a;--panel:#fff9f0;--ink:#4a2f22;--wall:#f3e0c8;--wall2:#d8b894;--floor:#8b5a3c;--edge:#6b4128;--door:#7a4b32;--door2:#4a2a1a;--accent:#c8703a}
:root.world-winter{--bg:#cfe6f5;--panel:#fff;--ink:#274a68;--wall:#eaf6ff;--wall2:#b9dcf2;--floor:#f1f8ff;--edge:#6fa8d4;--door:#5aa0d8;--door2:#2f6ea8;--accent:#ff6b8a}
:root.world-zoo{--bg:#f0d58a;--panel:#fffbe9;--ink:#4b3b1f;--wall:#fff1b8;--wall2:#cfe39a;--floor:#d9b27a;--edge:#b9852f;--door:#4f9a5f;--door2:#2c6b3a;--accent:#e8743b}
:root.boss{--bg:#1d0a2e;--panel:#3b1459;--ink:#ffe9fb;--wall:#6a2a9e;--wall2:#2a0b47;--floor:#d81b8a;--edge:#ff3fa4;--door:#8e44d6;--door2:#3d1370;--accent:#ff2d95}
.boss .scene{box-shadow:0 0 24px #ff2d95,inset 0 0 40px #000a}
.boss .door .knob{background:#ff7ac8}
.boss .door.open .frame{background:#ff7ac8;box-shadow:0 0 30px #ff2d95}
.boss .banner.big{border:2px solid var(--accent)}
.boss .cd{color:#ff6ec7;text-shadow:0 0 18px #ff2d95}

.is-hidden{display:none!important}
:root{--h-bg1:#e3f4ff;--h-bg2:#eaf7d3;--h-bg3:#b9e3a6;--h-ink:#4a3320;--h-card:rgba(255,255,255,.8);--h-btn1:#ffd54f;--h-btn2:#ffb300;--h-edge:#7a4b22;--h-modal:#fffaf0}
@media (prefers-color-scheme:dark){:root{--h-bg1:#1d2b4a;--h-bg2:#1f3b33;--h-bg3:#174d33;--h-ink:#fdf2dc;--h-card:rgba(0,0,0,.35);--h-edge:#e0a15a;--h-modal:#26332c}}
.home-view{display:flex;flex-direction:column;min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,var(--h-bg1),var(--h-bg2) 55%,var(--h-bg3));color:var(--h-ink)}
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,24px);padding:clamp(16px,4vw,32px) 16px;text-align:center}
.home-logo{width:min(100%,720px);margin:0;line-height:0}
.home-logo-img{display:block;width:100%;height:auto;animation:float 4s ease-in-out infinite}
.tagline{margin:0;font-size:clamp(15px,3.8vw,20px);font-weight:700}
.best{margin:0;display:inline-flex;align-items:center;gap:.5em;background:var(--h-card);border:2px solid var(--h-edge);border-radius:999px;padding:8px 18px;font-weight:800;font-size:clamp(15px,3.8vw,18px)}
.best-num{font-size:1.25em;font-variant-numeric:tabular-nums}
.home-actions{display:flex;flex-direction:column;gap:14px;width:min(100%,320px)}
.home-btn{font:inherit;font-weight:900;border-radius:999px;cursor:pointer;min-height:52px;padding:12px 28px;border:3px solid var(--h-edge);touch-action:manipulation}
.btn-start{font-size:clamp(20px,5vw,26px);background:linear-gradient(var(--h-btn1),var(--h-btn2));color:#4a2c0e;box-shadow:0 6px 0 var(--h-edge);animation:pulse 1.8s ease-in-out infinite}
.btn-start:active{transform:translateY(4px);box-shadow:0 2px 0 var(--h-edge);animation:none}
.btn-sub{font-size:16px;background:var(--h-card);color:var(--h-ink)}
.home-btn:focus-visible{outline:4px solid #3b82f6;outline-offset:3px}
.home-footer{padding:14px 16px;text-align:center;font-size:13px}
.home-footer-text{margin:0}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes pulse{50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.home-logo-img,.btn-start{animation:none}}
.howto{padding:0;border:3px solid var(--h-edge);border-radius:20px;width:min(92vw,520px);max-height:85vh;max-height:85dvh;background:var(--h-modal);color:var(--h-ink);overflow:hidden}
.howto::backdrop{background:rgba(20,10,0,.55)}
.dlg{display:flex;flex-direction:column;max-height:85vh;max-height:85dvh}
.dlg-body{overflow-y:auto;padding:20px 20px 8px;-webkit-overflow-scrolling:touch}
.dlg-title{margin:0 0 8px;font-size:clamp(20px,5vw,24px)}
.dlg-sub{margin:16px 0 6px;font-size:16px}
.dlg-text{margin:0;line-height:1.6;font-size:15px}
.dlg-list{margin:4px 0;padding-left:1.3em}
.dlg-foot{margin:0;padding:12px 20px 16px;border-top:2px dashed var(--h-edge);text-align:center}
.tbl-wrap{overflow-x:auto;margin:8px 0}
.dlg-table{width:100%;border-collapse:collapse;font-size:13px}
.dlg-caption{caption-side:top;text-align:left;font-weight:800;padding:2px 0 6px}
.dlg-th,.dlg-td{border:1px solid var(--h-edge);padding:6px 8px;text-align:center;line-height:1.4}
.dlg-th{background:var(--h-card);white-space:nowrap}
.dlg-td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlg-td.tier-effect{text-align:left;font-size:12px}
.best-note{font-size:.75em;font-weight:700;opacity:.8}
.hero-img{display:block;width:clamp(46px,12vw,62px);height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}
.lv-cat{display:block;margin:0 auto 8px;width:96px;height:auto;animation:hop .9s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.lv-cat{animation:none}}
.btn.gray{background:#888}
.og-msg{font-size:13px;min-height:1em}
.noscript-msg{padding:16px;text-align:center}