:root{--bg: #1e2419;--panel: #2a3123;--line: #3d4732;--ink: #f1f4ea;--sub: #a9b39b;--acc: #e8b23a;--red: #e5533d;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Noto Sans KR,-apple-system,Malgun Gothic,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}#app{display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto}#top{display:flex;align-items:center;gap:6px;padding:calc(8px + var(--safe-t)) 10px 8px;background:var(--panel);border-bottom:2px solid var(--line)}.st{flex:1;min-width:0;text-align:center}.st small{display:block;font-size:11px;color:var(--sub)}.st b{display:block;font-size:17px;font-weight:900;white-space:nowrap}#gold{color:var(--acc)}.sq{width:38px;height:38px;border-radius:10px;background:var(--line);font-weight:900}#stage{position:relative;flex:1;min-height:0}#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#skills{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;gap:6px}.skill{width:74px;padding:7px 4px;border-radius:12px;background:#8b2f22;box-shadow:0 3px #561a12;text-align:center}.skill.nuke{background:#b8860b;box-shadow:0 3px #6e5007}.skill b{display:block;font-size:13px;font-weight:900}.skill small{display:block;font-size:11px;opacity:.9}.skill.off{filter:grayscale(.85);opacity:.7}.next{position:absolute;left:50%;bottom:10px;transform:translate(-50%);background:var(--acc);color:#2a1f05;font-weight:900;padding:9px 16px;border-radius:999px;box-shadow:0 3px #8a6510;white-space:nowrap}#banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 #000,0 0 12px #e5533d;opacity:0;pointer-events:none;white-space:nowrap}#banner.show{animation:ban 1.8s ease-out}@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}80%{opacity:1}to{opacity:0}}#bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px 6px calc(6px + var(--safe-b));background:var(--panel);border-top:2px solid var(--line)}#bar button{position:relative;padding:5px 2px 4px;border-radius:10px;background:var(--line);border:2px solid transparent;text-align:center}#bar button.on{border-color:var(--acc);background:#4a5438}#bar button.lock{opacity:.45}#bar button.castle{background:#4b4033}#bar b{display:block;font-size:13px;font-weight:900}#bar small{display:block;font-size:11px;color:var(--acc);font-weight:700}.ic{display:block;width:34px;height:34px;margin:-2px auto 0;filter:drop-shadow(0 2px 2px #0008)}.ic-bag{background:radial-gradient(ellipse at 30% 60%,#c8b27e 30%,transparent 32%),radial-gradient(ellipse at 70% 60%,#c8b27e 30%,transparent 32%),radial-gradient(ellipse at 50% 30%,#d9c493 30%,transparent 32%)}.ic-mg{background:linear-gradient(90deg,transparent 45%,#23281c 45% 100%) center/100% 20% no-repeat,radial-gradient(circle,#6b7652 40%,transparent 42%)}.ic-cannon{background:linear-gradient(90deg,transparent 45%,#23281c 45%) center/100% 34% no-repeat,radial-gradient(circle,#3e4a52 48%,transparent 50%)}.ic-spire{background:linear-gradient(to top right,transparent 49%,#8a7cb0 50%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49%,#8a7cb0 50%) right/50% 100% no-repeat}.ic-wall{background:repeating-linear-gradient(0deg,#9a958a 0 6px,#6f6b62 6px 7px)}.ic-soldier{background:radial-gradient(circle at 30% 60%,#5c6b3e 22%,transparent 24%),radial-gradient(circle at 70% 60%,#5c6b3e 22%,transparent 24%),radial-gradient(circle at 50% 30%,#5c6b3e 22%,transparent 24%)}.ic-tank{background:linear-gradient(90deg,transparent 50%,#23281c 50%) 50% 50%/100% 22% no-repeat,linear-gradient(#55613f,#55613f) center/80% 70% no-repeat}.ic-castle{background:linear-gradient(#a9a391,#a9a391) bottom/100% 60% no-repeat,repeating-linear-gradient(90deg,#a9a391 0 5px,transparent 5px 9px) top/100% 45% no-repeat}.sheet-wrap{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet-wrap[hidden]{display:none}.sheet{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;background:var(--panel);border-radius:20px 20px 0 0;padding:18px 16px calc(16px + var(--safe-b))}.sheet h2{margin:0 0 6px;font-size:24px;color:var(--red)}.sheet h3{margin:0 0 6px;font-size:19px}.sheet h3 small{color:var(--acc);font-size:14px}.muted{color:var(--sub);font-size:14px;line-height:1.6}.stat-row{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);font-size:15px}.btn{display:block;width:100%;margin-top:10px;padding:13px;border-radius:12px;background:var(--acc);color:#2a1f05;font-weight:900;font-size:16px}.btn.ghost{background:var(--line);color:var(--ink)}.btn.sm{width:auto;display:inline-block;margin:0;padding:8px 14px;font-size:14px}.btn:disabled{opacity:.45}.over{text-align:center}.over .big{font-size:40px;font-weight:900;margin:4px 0;color:var(--acc)}.over .best{color:#7ed957;font-weight:900}.over .stat-row{text-align:left}.prod{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.prod div{flex:1}.prod b{display:block}.prod small{color:var(--sub);font-size:12.5px}.toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,10px);background:#000c;color:#fff;padding:9px 14px;border-radius:999px;font-size:13.5px;opacity:0;transition:.2s;pointer-events:none;z-index:60;max-width:92vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%)}.tut{position:absolute;left:10px;right:10px;bottom:56px;background:#fffef6;color:#1e2419;border-radius:14px;padding:12px 14px;box-shadow:0 8px 24px #0008;font-size:15px;line-height:1.6;z-index:20}.tut[hidden]{display:none}.tut p{margin:0 0 8px}.tut div{display:flex;justify-content:flex-end;gap:8px;align-items:center}.lnk{color:#6b7652;font-size:13px}.mock-ad{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;z-index:99;color:#fff;text-align:center}.mock-ad>div{background:#2a3123;padding:22px;border-radius:16px;max-width:300px}.mock-ad button{display:block;width:100%;margin-top:8px;padding:10px;border-radius:10px;background:var(--acc);color:#2a1f05;font-weight:900}.mock-ad button.ghost{background:var(--line);color:#fff}body{background:radial-gradient(ellipse at 50% 0%,#2c3426,#141811 70%)}#top{background:linear-gradient(180deg,#2f3828,#222a1c);border-bottom:1px solid #000;box-shadow:0 2px 10px #0008}.st{background:#0006;border:1px solid #ffffff14;border-radius:10px;padding:3px 2px}.st small{font-size:10.5px;letter-spacing:.5px}.st.gold b{color:#ffcf4d;text-shadow:0 0 8px #ffb20066}.st.hp b{color:#8fe36b}.sq{background:linear-gradient(180deg,#4a5638,#2f3826);border:1px solid #ffffff1f;box-shadow:0 2px #0008}#stage{background:#141811}#bar{background:linear-gradient(180deg,#262e1f,#181d13);border-top:1px solid #000;box-shadow:0 -2px 10px #0008}#bar button{background:linear-gradient(180deg,#3b4530,#283020);border:1px solid #ffffff14;box-shadow:inset 0 1px #ffffff12,0 2px #0009}#bar button.on{border-color:#ffcf4d;background:linear-gradient(180deg,#56613f,#3a4229);box-shadow:0 0 0 1px #ffcf4d55,0 0 12px #ffcf4d44}#bar button.castle{background:linear-gradient(180deg,#5a4b38,#3a3024)}#bar b{font-size:12.5px;text-shadow:0 1px 0 #000}.skill{background:linear-gradient(180deg,#b23a2a,#7a2219);box-shadow:0 3px #4a120c,0 0 14px #ff4a2a44;border:1px solid #ff9a8a55}.skill.nuke{background:linear-gradient(180deg,#d9a21a,#8a6408);box-shadow:0 3px #4a3504,0 0 14px #ffd04a55;border-color:#ffe08a77}.next{background:linear-gradient(180deg,#ffd45a,#e8a521);box-shadow:0 3px #7a5410,0 0 16px #ffc84a66}#banner{font-size:28px;letter-spacing:1px;text-shadow:0 3px 0 #000,0 0 18px #ff3b2a,0 0 30px #ff3b2a88}.sheet{background:linear-gradient(180deg,#2b3324,#1d2318);border-top:1px solid #ffffff1a}.btn{background:linear-gradient(180deg,#ffd45a,#e8a521);box-shadow:0 3px #7a5410}.title{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#4a1a14cc,#0d0f0bf2 65%),repeating-linear-gradient(45deg,#1a1e15 0 12px,#161a12 12px 24px)}.title[hidden]{display:none}.t-in{padding:24px}.t-badge{display:inline-block;padding:5px 12px;border:1px solid #ff7a5a88;color:#ffb39e;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:1px}.title h1{margin:14px 0 10px;font-size:64px;line-height:1.02;font-weight:900;color:#f1f4ea;text-shadow:0 4px 0 #000,0 0 24px #ff3b2a88;letter-spacing:-1px}.title h1 span{color:#ffcf4d}.title p{color:#c9d0bd;line-height:1.7;margin:0 0 22px}.btn.big{font-size:20px;padding:16px 40px;width:auto;display:inline-block;border-radius:16px;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 3px #7a5410,0 0 28px #ffc84a99}}.t-best{margin-top:18px;color:#a9b39b;font-size:14px}.t-best b{color:#ffcf4d}.skill{width:62px;padding:6px 3px;opacity:.92}.skill b{font-size:12px}.skill small{font-size:10.5px}:root{--bg: #0c0e0c;--panel: #141613;--line: #262a24;--ink: #ece6d6;--sub: #a8a08a;--acc: #e3b55a;--red: #e0583f}body{background:#0c0e0c}#top{background:linear-gradient(180deg,#0e100df5,#0e100ddb);border-bottom:1px solid rgba(236,230,214,.14);box-shadow:none;gap:14px;padding-left:14px;padding-right:12px}.st{background:none;border:0;padding:0;text-align:left;flex:0 0 auto}.st small{font-size:11px;letter-spacing:.14em;color:var(--sub);font-weight:500}.st b{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:none}.st.gold b{color:var(--acc);text-shadow:none}.st.hp b{color:#b8c98f}.st.hp{margin-left:auto}.sq{width:40px;height:40px;border-radius:4px;background:#0a0c0a80;border:1px solid rgba(236,230,214,.3);box-shadow:none;font-weight:600;font-size:15px}#stage{background:#0c0e0c}#skills{right:8px;top:10px;gap:8px}.skill,.skill.nuke{width:112px;padding:8px 10px;border-radius:4px;background:#0a0c0a99;border:1px solid rgba(236,230,214,.28);box-shadow:none;text-align:left;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:1}.skill b{font-size:13px;font-weight:700}.skill small{font-size:11px;color:var(--sub);opacity:1}.skill:not(.off){border-color:var(--acc)}.skill:not(.off) b{color:var(--acc)}.skill.off{filter:none;opacity:.85}.next{background:var(--acc);color:#1a1408;box-shadow:0 6px 20px #00000080;border-radius:4px;font-weight:700;letter-spacing:.02em}#banner{font-size:30px;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 2px #000;color:#f4ecd9}#bar{grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 10px calc(10px + var(--safe-b));background:linear-gradient(180deg,#0e100de6,#0c0e0b);border-top:1px solid rgba(236,230,214,.16);box-shadow:none}#bar button,#bar button.castle{border-radius:6px;background:linear-gradient(180deg,#1b1e19,#141613);border:1px solid rgba(236,230,214,.14);box-shadow:none;padding:6px 2px}#bar button.on{border-color:var(--acc);background:linear-gradient(180deg,#221f16,#171511);box-shadow:inset 0 0 0 1px var(--acc)}#bar b{font-size:12.5px;font-weight:700;text-shadow:none}#bar small{font-size:12px;color:var(--acc);font-weight:600}#bar button.poor small{color:var(--red)}#bar button.lock{opacity:.4}.ic{width:42px;height:42px;margin:0 auto 2px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}.sheet{background:#141613;border-top:1px solid rgba(236,230,214,.18);border-radius:12px 12px 0 0}.sheet h2{color:var(--red);font-weight:700}.sheet h3{font-weight:700}.btn{background:var(--acc);color:#1a1408;box-shadow:none;border-radius:6px;font-weight:700}.btn.ghost{background:#222620;color:var(--ink);border:1px solid rgba(236,230,214,.14)}.stat-row{border-color:#ece6d61a}.toast{background:#0a0c0ae6;border:1px solid rgba(236,230,214,.2);border-radius:4px}.tut{background:#ece6d6;color:#1a1a16;border-radius:6px}.lnk{color:#6f6a5c}.title{background:linear-gradient(180deg,#0c0e0c59,#0c0e0ceb 70%),url(../img/bg.webp) center/cover no-repeat}.title:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 60%,transparent,rgba(0,0,0,.6));pointer-events:none}.t-in{position:relative;padding:24px 24px calc(24px + var(--safe-b))}.t-badge{border:1px solid rgba(227,181,90,.6);color:var(--acc);border-radius:2px;font-size:12px;letter-spacing:.3em;font-weight:600;padding:6px 14px 6px 17px}.title h1{font-size:58px;font-weight:900;text-shadow:0 4px 30px rgba(0,0,0,.9);letter-spacing:-.03em}.title h1 span{color:var(--acc)}.title p{color:#c9c2ad;font-size:15px}.btn.big{border-radius:6px;font-size:18px;letter-spacing:.04em;animation:none;box-shadow:0 10px 30px #00000080}.t-best{color:var(--sub)}.t-best b{color:var(--acc)}#banner{font-size:26px;white-space:normal;width:92%;line-height:1.25}
