:root{color-scheme:dark;--bg:#091712;--surface:#0c2019;--gold:#e8bc70;--ink:#f5eddb;--muted:#a6b5a8;--line:#526043;--mint:#63dfae;--red:#ec6559}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 40%,#173127 0,var(--bg) 68%);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button:hover:not(:disabled){filter:brightness(1.18)}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.shell{max-width:1320px;margin:0 auto;padding:0 36px}.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #76643b66}.brand{display:flex;align-items:center;gap:24px;color:var(--ink);text-decoration:none}.brand>span{font:700 36px Georgia,serif;letter-spacing:-1px}.brand i{width:1px;height:27px;background:var(--gold)}.brand small{color:var(--gold);font-size:12px;letter-spacing:5px}.masthead nav{display:flex;align-items:center;gap:10px}.text-button{border:0;background:none;color:var(--gold);text-transform:uppercase;font-size:11px;letter-spacing:2px;padding:12px 18px}.icon-button{background:transparent;border:1px solid #987b43;border-radius:3px;width:36px;height:36px;color:var(--gold);font-size:23px}.intro{text-align:center;padding:17px 0 20px}.intro h1{font:500 clamp(30px,3.5vw,48px)/1.15 Georgia,serif;letter-spacing:-1.4px;margin:0 0 8px}.intro p{color:var(--gold);font-size:14px;letter-spacing:1.7px;margin:0}.game-frame{width:min(100%,calc((100dvh - 270px)*1.5));min-width:600px;margin:auto;border:1px solid #8a9660;border-radius:4px;overflow:hidden;background:var(--surface);box-shadow:0 20px 60px #0007}.hud{display:flex;align-items:center;gap:25px;height:70px;padding:10px 20px;background:linear-gradient(110deg,#10231b,#091713);border-bottom:1px solid #9b8c4f6b}.hero{display:flex;align-items:center;gap:12px;flex-shrink:0}.hero img{width:43px;height:43px;image-rendering:pixelated;border:1px solid #ab945e;background:#17241e;border-radius:4px}.hero strong{font-size:12px;letter-spacing:1.2px;white-space:nowrap}.hero span{display:block;font-size:9px;letter-spacing:1.3px;color:var(--gold);margin-top:6px}.meter{flex:1;min-width:80px}.meter-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:9px;letter-spacing:1px;color:var(--muted)}.meter-label b{font-size:11px;color:var(--ink);letter-spacing:0;font-weight:500}.track{height:11px;background:#040f0b;border:1px solid #69744e;border-radius:3px;overflow:hidden}.track i{display:block;height:100%;width:100%;background:linear-gradient(0deg,#b63a3d,var(--red));transition:width .12s linear}.experience .track{border-color:#3a7961}.experience .track i{background:linear-gradient(0deg,#299967,#67dbaa);width:0}.wave{flex-shrink:0;text-align:center;padding-left:8px}.wave strong{font-size:11px;letter-spacing:1px}.wave>div{display:flex;justify-content:center;gap:8px;margin-top:8px}.wave i{width:9px;height:9px;border:1px solid #7b8269;border-radius:50%}.wave i.active{background:var(--gold);border-color:#fbe0a0;box-shadow:0 0 5px #e8bc7040}.wave i.done{background:#638f61}.arena-wrap{position:relative;isolation:isolate;aspect-ratio:3/2}canvas{display:block;width:100%;height:100%;outline:none;cursor:crosshair}canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--mint)}.arena-status{position:absolute;bottom:15px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;gap:10px}.arena-status span{font-size:10px;letter-spacing:1px;background:#081a12db;padding:8px 12px;border:1px solid #b1a26659;border-radius:3px;color:#e9e0be}.boss-hud{position:absolute;top:17px;left:29%;width:42%;text-align:center;padding:8px 15px;background:#071812e8;border:1px solid #a38b5c;border-radius:3px;pointer-events:none}.boss-hud strong{font:14px Georgia,serif;letter-spacing:3px}.boss-hud .track{margin-top:8px;height:9px}.wave-banner{position:absolute;left:50%;top:17%;transform:translateX(-50%);padding:13px 23px;background:#0b211bdf;border:1px solid #ac9955;color:var(--ink);font:18px Georgia,serif;white-space:nowrap;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#06160c8c;backdrop-filter:blur(2px);padding:22px}.dialog{width:min(480px,95%);padding:28px 32px;background:linear-gradient(135deg,#112c22f5,#071811f7);border:1px solid #a9935c;box-shadow:0 12px 50px #0007;border-radius:5px;text-align:center}.dialog h2{font:500 35px/1.1 Georgia,serif;letter-spacing:-.5px;margin:14px 0}.dialog p{color:#c0cabc;font-size:13px;line-height:1.8;margin:0 0 20px}.menu-portrait{width:65px;height:65px;image-rendering:pixelated;background:#163b29;border:1px solid #b5a261;border-radius:50%;padding:6px}.primary{display:inline-flex;gap:16px;justify-content:center;align-items:center;border:1px solid #efd199;background:var(--gold);color:#102119;padding:13px 26px;border-radius:3px;font-weight:700;min-height:44px;min-width:170px}.primary::after{content:'→';font-size:20px;font-weight:400}.secondary{background:none;border:1px solid #678265;border-radius:3px;padding:11px 20px;margin:10px 5px 0;color:#dce6d5;min-height:44px}.small-note{display:block;font-size:10px;color:#92a894;margin-top:18px;line-height:1.6}.choices{display:grid;grid-template-columns:1fr;gap:9px;text-align:left}.choice{display:flex;align-items:center;gap:14px;width:100%;padding:14px;background:#1b3528;border:1px solid #6a7853;border-radius:3px;text-align:left}.choice:hover{border-color:var(--gold);background:#294732}.choice-icon{font-size:24px;color:var(--gold);width:29px;text-align:center}.choice strong{display:block;color:var(--ink);font:17px Georgia,serif}.choice small{display:block;color:#a9beaa;margin-top:5px;font-size:11px}.choice kbd{margin-left:auto}.run-stats{display:flex;gap:25px;justify-content:center;margin:18px 0 23px}.run-stats b{font:26px Georgia,serif;color:var(--gold)}.run-stats span{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:6px}.instructions{text-align:left}.instructions p{margin:9px 0;font-size:12px}.instructions strong{color:var(--gold)}.controls{display:flex;justify-content:center;align-items:center;gap:28px;padding:18px 0;color:#eee4c9;font-size:11px}.controls>span{display:flex;align-items:center;gap:9px}.controls>span+span{border-left:1px solid #8a7145;padding-left:28px}.controls small{font-size:10px;color:var(--muted)}.keys{display:flex;gap:3px}kbd{display:inline-block;padding:5px 7px;min-width:22px;border:1px solid #987b49;border-radius:3px;font:11px monospace;color:var(--ink);background:#091710}footer{border-top:1px solid #66563788;display:flex;align-items:center;justify-content:space-between;padding:15px 0;color:var(--gold);font-size:10px;letter-spacing:1px}footer span:last-child{color:#85968a;font-size:9px;letter-spacing:2px}.mobile-note{display:none}.paused canvas{cursor:default}
@media(min-width:1500px){.shell{max-width:1450px}}@media(max-height:780px) and (min-width:850px){.masthead{height:58px}.intro{padding:10px 0 14px}.intro h1{font-size:35px}.intro p{font-size:12px}.game-frame{width:min(100%,calc((100dvh - 220px)*1.5))}.hud{height:59px;gap:18px}.controls{padding:12px 0}.dialog{padding:21px 26px}.dialog h2{font-size:30px}.menu-portrait{width:52px;height:52px}.small-note{margin-top:12px}}@media(max-width:850px){.shell{padding:0 15px}.masthead{height:63px}.brand{gap:12px}.brand>span{font-size:27px}.brand small{font-size:9px;letter-spacing:2px}.text-button{font-size:9px;padding:9px 4px;letter-spacing:1px}.masthead nav{gap:6px}.icon-button{width:31px;height:31px}.intro{padding:20px 0}.intro h1{font-size:33px}.intro p{font-size:11px;letter-spacing:1px}.game-frame{width:100%;min-width:0}.hud{padding:10px;gap:12px;height:64px}.hero strong{font-size:9px}.hero img{width:35px;height:35px}.hero{gap:7px}.hero span{font-size:8px}.experience{display:none}.wave strong{font-size:9px}.wave i{width:7px;height:7px}.wave>div{gap:5px}.meter-label{font-size:8px;letter-spacing:0}.arena-status{left:10px;right:10px;bottom:10px}.arena-status span{font-size:8px;padding:5px 7px}.controls{flex-wrap:wrap;gap:12px;font-size:10px}.controls>span+span{padding-left:12px}.controls small{display:none}footer{line-height:1.7;gap:16px;font-size:8px}.mobile-note{display:block;font-size:11px;line-height:1.6;color:var(--muted);text-align:center}.dialog{padding:15px 18px}.dialog h2{font-size:25px;margin:10px 0}.dialog p{font-size:11px;line-height:1.5;margin-bottom:13px}.menu-portrait{width:44px;height:44px}.small-note{font-size:8px;margin-top:12px}.choice{padding:9px}.choice strong{font-size:14px}.choice small{font-size:10px}.choice-icon{font-size:19px}.overlay{padding:10px}.boss-hud{top:8px;left:22%;width:56%;padding:6px 10px}.wave-banner{font-size:13px;padding:8px 12px}.run-stats{margin:12px 0;gap:20px}}
@media(min-width:851px){.game-frame{width:min(100%,calc((100dvh - 370px)*1.5))}.hero strong{font-size:14px}.hero span{font-size:10px}.meter-label{font-size:10px}.meter-label b{font-size:12px}.wave strong{font-size:13px}.controls{font-size:12px}.arena-status span{font-size:11px}}
@media(max-height:780px) and (min-width:851px){.game-frame{width:min(100%,calc((100dvh - 300px)*1.5))}}
@media(max-width:850px){.experience{display:block}}
@media(max-width:600px){.hud{height:92px;display:grid;grid-template-columns:100px 1fr 65px;gap:5px 10px}.hero{grid-row:1/3}.health{grid-column:2;grid-row:1}.experience{grid-column:2;grid-row:2}.wave{grid-column:3;grid-row:1/3}.meter{min-width:0}.meter-label{font-size:7px}.meter-label b{font-size:9px}.track{height:8px}.brand small{max-width:70px;line-height:1.6;letter-spacing:2px}.dialog{max-height:95%;overflow-y:auto}.small-note{margin-top:8px}}
canvas.joe-portrait{width:43px;height:43px;border:1px solid #ab945e;background:#17241e;border-radius:4px;cursor:default;flex-shrink:0}canvas.menu-portrait{width:65px;height:65px;margin:0 auto;border-radius:50%;padding:3px}.wave>div{gap:5px}#weaponLabel{color:#edda9a}.wave-banner{max-width:90%;white-space:normal;text-align:center}
@media(max-width:850px){canvas.joe-portrait{width:35px;height:35px}canvas.menu-portrait{width:44px;height:44px}.wave>div{display:grid;grid-template-columns:repeat(5,7px);gap:4px}}
.boss-hud strong{font-size:clamp(8px,1.1vw,14px);letter-spacing:clamp(1px,.2vw,3px)}
@media(max-width:600px){.wave strong{font-size:8px;letter-spacing:.3px;white-space:nowrap}}