@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
:root{--orange:#ff914d;--ink:#20384d;--yellow:#ffcf53}
.shade{background:linear-gradient(0deg,#112c45a8,transparent 25%)}
.intro{top:3.5%;max-width:370px;padding:19px 23px 17px;background:#fffefaFA;border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 #20384d66;transform:rotate(-1.5deg)}
.intro h1{font-family:'Jua','Noto Sans KR',sans-serif;font-size:62px;font-weight:400;letter-spacing:-2.5px;line-height:1.12;color:#ff8b3d;text-shadow:2px 3px 0 #20384d;-webkit-text-stroke:1px #20384d;margin:0 0 8px}
.tagline{font-size:13px;font-weight:700;margin:0 0 15px;color:#466078;letter-spacing:-.4px}
.intro h2{font-family:'Jua','Noto Sans KR',sans-serif;font-size:22px;letter-spacing:-.5px;font-weight:400;margin:0 0 4px;color:var(--ink)}
.intro .address{font-size:12px;margin:0;color:#637482;letter-spacing:-.3px}
.icon-button{border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 #20384d80;color:var(--ink)}
.icon-button.sound-on{background:#a9ebc7}.icon-button.sound-on:hover{background:#c1f5d7}.icon-button:active{transform:translateY(3px);box-shadow:0 1px 0 #20384d80}
.tools{border:3px solid var(--ink);border-radius:23px;padding:8px;background:#fffefa;box-shadow:0 6px 0 #20384d99;gap:6px}
.tool{height:74px;border:2px solid transparent;border-radius:15px;font-weight:800;color:#345269}
.tool:not(:last-child):after{display:none}.tool svg{stroke-width:1.8}
.tool.selected{color:var(--ink);background:var(--yellow);border-color:var(--ink);box-shadow:0 3px 0 #c48924;transform:translateY(-2px)}
.tool:not(.selected):hover{background:#fff0c9}.tool:active{transform:translateY(2px);box-shadow:none}.nuclear-tool:not(.selected){color:#d7663b}
.weapon-info{width:max-content;margin:0 auto 12px;gap:8px;padding:6px 13px;border:2px solid var(--ink);border-radius:14px;background:#fffefa;color:var(--ink);text-shadow:none;box-shadow:0 3px 0 #20384d66}
.weapon-info strong{font-weight:800}.weapon-info span{opacity:1;font-size:11px;color:#586e80}
.hint{font-weight:600;font-size:12px;margin-top:13px;text-shadow:0 2px 4px #102a43}
.damage{width:145px;padding:11px 14px 13px;background:#fffefa;border:3px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 #20384d80;color:var(--ink);text-shadow:none}
.damage-label{font-size:12px;font-weight:800}.damage-number{margin:1px 0 8px}.damage-number strong{font-family:'Jua','Noto Sans KR',sans-serif;font-size:43px;font-weight:400}.damage-number span{font-size:22px}
.track{height:8px;background:#dce7ed}.track>div{background:var(--yellow)}
.tower-label{border:2px solid var(--ink);border-radius:12px;color:var(--ink);font-weight:700;text-shadow:none;background:#fff5d5}
.complete{width:min(360px,calc(100% - 48px));border:3px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 #20384d80;background:#fffefa}
.complete h2{font-family:'Jua','Noto Sans KR',sans-serif;font-size:44px;font-weight:400;color:var(--ink)}.complete p{color:#526a7d}
.complete button{width:100%;justify-content:center;gap:18px;white-space:nowrap;background:var(--yellow);border:2px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 #b58128;color:var(--ink);font-weight:800}.complete button:active{transform:translateY(3px);box-shadow:0 1px 0 #b58128}
.finish-line{width:42px;height:5px;border-radius:5px;background:var(--yellow)}
#loading{background:#fff3d6;color:var(--ink);font-weight:700}#toast{border:2px solid #fffefa;border-radius:18px;background:#20384df2;font-weight:600;max-width:calc(100% - 32px);white-space:normal;text-align:center}
@media(max-width:900px) and (min-width:701px){.intro{max-width:310px;padding:17px}.intro h1{font-size:53px}.tagline{font-size:12px}.tool{width:66px}.damage{width:118px}}
@media(max-width:700px){
  .intro{left:5%;top:2.5%;width:calc(100% - 92px);max-width:300px;padding:13px 14px 12px;border-radius:19px;box-shadow:4px 4px 0 #20384d66}
  .intro h1{font-size:44px;letter-spacing:-1.5px;-webkit-text-stroke:.7px #20384d;text-shadow:1px 2px 0 #20384d;margin-bottom:6px}
  .tagline{font-size:11px;margin-bottom:12px;letter-spacing:-.5px}.intro h2{font-size:19px;margin-bottom:3px}.intro .address{font-size:10px}
  .icon-button{border-radius:12px;box-shadow:0 3px 0 #20384d80}.utilities{right:4%;top:2.5%;gap:9px}
  .shade{background:linear-gradient(0deg,#112c45bb,transparent 32%)}
  .tools{padding:6px;border-radius:19px;gap:2px}.tool{height:62px;border-radius:11px;font-size:10px}.tool svg{width:24px;height:24px}
  .weapon-info{margin:0 1px 11px auto;padding:5px 10px;font-size:10px;max-width:100%}.weapon-info strong{font-size:12px}.weapon-info span{font-size:9px}
  .damage{left:5%;bottom:20%;width:105px;padding:8px 10px 10px;border-radius:16px;border-width:2px;box-shadow:3px 3px 0 #20384d80}.damage-label{font-size:10px}.damage-number strong{font-size:34px}.damage-number span{font-size:17px}.damage-number{margin:0 0 5px}.track{height:6px}
  .hint{font-size:10px;margin-top:12px}.complete{padding:23px 24px}.complete h2{font-size:39px}.complete p{font-size:12px}
}
@media(max-width:370px){.intro h1{font-size:38px}.intro{padding:12px}.tagline{font-size:10px}.intro h2{font-size:17px}.weapon-info{padding:5px 7px;gap:5px}}
.combat-hit{position:absolute;z-index:4;width:30px;height:30px;pointer-events:none;transform:translate(-50%,-50%) scale(var(--hit-scale,1));filter:drop-shadow(0 1px 2px #142436);--hit-scale:1}.combat-hit[hidden]{display:none}.combat-hit i{position:absolute;width:10px;height:3px;background:#fff3bf;border-radius:3px;transform:rotate(45deg)}.combat-hit i:nth-child(1){left:1px;top:4px}.combat-hit i:nth-child(2){right:1px;top:4px;transform:rotate(-45deg)}.combat-hit i:nth-child(3){left:1px;bottom:4px;transform:rotate(-45deg)}.combat-hit i:nth-child(4){right:1px;bottom:4px}