*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#2b1a0e;font-family:Bungee,Impact,sans-serif;color:#fff4d6;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
#top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));display:flex;gap:8px;align-items:center}
.ib{pointer-events:auto;width:44px;height:44px;border-radius:12px;border:3px solid #2b1a0e;background:linear-gradient(#f6d77a,#d99a2b);color:#2b1a0e;font:16px Bungee,sans-serif;box-shadow:0 3px 0 #2b1a0e;cursor:pointer}
#lvl{flex:1;text-align:center}#lvlname{font-size:13px;text-shadow:2px 2px 0 #2b1a0e;letter-spacing:.04em}
.bar{height:14px;border:3px solid #2b1a0e;border-radius:9px;background:#4a3420;overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(#b8ff6a,#4fc21d)}.bar.red i{background:linear-gradient(#ff8a5a,#c4220f)}
#squad,#weapon{position:absolute;top:calc(70px + env(safe-area-inset-top));padding:6px 10px;border:3px solid #2b1a0e;border-radius:12px;background:rgba(43,26,14,.75);text-align:center;line-height:1}
#squad{left:8px}#weapon{right:8px}#squad span,#weapon span{display:block;font-size:10px;color:#f6d77a}
#squad b{font-size:28px;color:#b8ff6a}#weapon b{font-size:14px}
#boss{position:absolute;left:12%;right:12%;top:calc(164px + env(safe-area-inset-top));text-align:center}#bossname{font-size:14px;color:#ffb36a;text-shadow:2px 2px 0 #2b1a0e}
#hint{position:absolute;bottom:14%;width:100%;text-align:center;font-size:18px;text-shadow:2px 2px 0 #2b1a0e;animation:pulse 1s infinite alternate}
#banner{position:absolute;top:38%;width:100%;text-align:center;font-size:clamp(26px,8vw,46px);color:#ffd54a;text-shadow:3px 3px 0 #2b1a0e,-1px -1px 0 #2b1a0e;opacity:0;transition:opacity .3s}
@keyframes pulse{to{opacity:.4}}
#nums{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#nums div{position:absolute;font-size:16px;color:#fff;text-shadow:2px 2px 0 #2b1a0e;transform:translate(-50%,-50%);white-space:nowrap}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(rgba(43,26,14,.35),rgba(43,26,14,.85));padding:20px}
.panel{width:min(420px,100%);text-align:center;padding:26px 20px;border:4px solid #2b1a0e;border-radius:22px;background:linear-gradient(#5a3a1e,#3a2412);box-shadow:0 8px 0 #1a0e06,inset 0 0 0 3px #a8742f}
.logo span{display:block;font-family:"Bungee Shade",Bungee,sans-serif;line-height:1;color:#ffcf3a;text-shadow:3px 3px 0 #c4220f,6px 6px 0 #2b1a0e}
.logo span:first-child{font-size:clamp(42px,14vw,64px)}.logo span:last-child{font-size:clamp(28px,9vw,42px);color:#b8ff6a;text-shadow:3px 3px 0 #2b6a12,6px 6px 0 #2b1a0e}
.sub{margin:14px 0 20px;font-size:13px;color:#f6d77a}
h2{margin:0 0 14px;font-size:28px;color:#ffcf3a;text-shadow:3px 3px 0 #2b1a0e}.redt{color:#ff6a4a}
.big{display:block;width:100%;margin:10px 0;padding:14px;font:24px Bungee,sans-serif;color:#2b1a0e;border:4px solid #2b1a0e;border-radius:16px;background:linear-gradient(#b8ff6a,#4fc21d);box-shadow:0 5px 0 #2b1a0e;cursor:pointer}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #2b1a0e}.big.alt{font-size:16px;background:linear-gradient(#f6d77a,#d99a2b)}.big:disabled{opacity:.55}
.small{font-family:system-ui,sans-serif;font-size:14px;line-height:1.45;color:#f2dfb5;margin-top:10px}

#title{background:#2b1a0e url(assets/v2/ui/title_screen.jpg) center/cover no-repeat;align-items:flex-end;padding-bottom:calc(3vh + env(safe-area-inset-bottom))}
.tpanel{width:min(420px,92%);text-align:center}.tpanel .small{text-shadow:0 2px 4px #000;color:#fff4d6}
.ban{width:100%;max-width:360px;display:block;margin:-60px auto 6px}
#wicon{display:block;height:34px;margin:3px auto 2px}
#pause img{width:100%;height:100%;display:block}
@media (min-aspect-ratio:1/1){#title{background-size:contain}}

#squad{margin-left:env(safe-area-inset-left)}#weapon{margin-right:env(safe-area-inset-right)}

#nums div{font-family:Bungee,Impact,sans-serif;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 3px 0 #e0561a,0 4px 6px rgba(0,0,0,.5)}

#title .tpanel .small{display:none}
#title #play{position:absolute;left:50%;transform:translate(-50%,-50%);top:89.6%;width:min(78vw,44vh);margin:0}