:root{color-scheme:dark;--gold:#f2c45e;--gold-light:#ffe7a3;--navy:#0d283c;--cream:#fff1d2;--stroke:#755526;--panel:linear-gradient(155deg,#173e53,#071d32)}*{box-sizing:border-box}body{margin:0;background:#102a3d;color:var(--cream);font-family:"Trebuchet MS",Arial,sans-serif;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #6df4ee;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}.hidden{display:none!important}.arena{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden;isolation:isolate}.arena>canvas{width:100%;height:100%;display:block;touch-action:none}.edge-shade{position:absolute;inset:0;box-shadow:inset 0 0 110px #24342433;pointer-events:none}.frame{border:3px solid var(--gold);border-radius:15px;background:var(--panel);box-shadow:0 3px 0 #765323,0 0 0 2px #193143, inset 0 2px 0 #fbe4a840,0 7px 12px #0005}.hud{position:absolute;inset:20px 24px auto;z-index:2;pointer-events:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}.hero-hud{position:relative;width:350px;height:98px;display:flex;align-items:center}.hero-portrait{position:absolute;left:0;top:-10px;width:103px;height:112px;border:3px solid var(--gold);border-radius:30px;background:linear-gradient(135deg,#306a74,#10364a);box-shadow:0 0 0 2px #173344,0 4px 0 #7c5725;overflow:hidden;z-index:2}.hero-portrait img{width:125%;height:125%;object-fit:cover;object-position:center top;position:relative;left:-12.5%;top:2px}.hero-data{margin-left:78px;width:272px;border:3px solid var(--gold);background:var(--panel);border-radius:12px;padding:7px 10px 9px 30px;box-shadow:0 3px 0 #755526,0 0 0 2px #193143}.hero-name{font-size:23px;font-weight:900;text-shadow:0 2px 0 #0008;display:flex;justify-content:space-between;align-items:center}.hero-name>span{font-size:10px;font-weight:700;color:#d5e4d7;text-shadow:none}.health-track{background:#061c30;border:2px solid #113f50;border-radius:20px;height:18px;margin-top:7px;box-shadow:inset 0 2px 3px #0007;overflow:hidden}.health-track>div{height:100%;width:100%;background:linear-gradient(#b6ff47 0%,#40ef0c 45%,#17be08 55%,#10a00b);border-radius:20px;box-shadow:inset 0 2px 0 #eeffa2aa;transition:width .15s}.timer-panel{justify-self:center;text-align:center;padding:6px 27px 8px;min-width:185px;border-radius:18px;clip-path:polygon(8% 0,92% 0,100% 22%,100% 78%,92% 100%,8% 100%,0 78%,0 22%)}.timer-panel strong{display:block;font-size:42px;line-height:1.1;letter-spacing:2px;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #0009;font-weight:900}.timer-panel>span{display:block;font-size:7px;letter-spacing:1px;color:#e4d4ad;margin-top:3px}.timer-panel.urgent strong{color:#ff8a6c}.score-panel{justify-self:end;display:flex;align-items:center;gap:9px;padding:8px 15px;min-height:68px;font-size:24px;font-weight:900;white-space:nowrap}.score-panel strong{font-size:29px}.score-panel b{font-weight:900}.gold-star{color:#ffd73c;font-size:44px;line-height:1;-webkit-text-stroke:1px #a96a1d;text-shadow:0 3px 0 #9b5d18,0 -1px 0 #fff3b1}.quest{grid-column:1;grid-row:2;display:flex;align-items:center;gap:13px;padding:9px 13px;width:max-content;min-width:320px;max-width:400px;margin-top:-3px}.quest-icon{font-size:34px;color:#f6d092;text-shadow:0 2px 0 #775321}.quest strong{font-size:18px;font-weight:900;display:block;text-shadow:0 2px #0006}.quest small{display:block;color:#dfcfaa;font-size:9px;margin-top:4px}.quest>span:last-child{color:#ffd969;font-size:30px;margin-left:9px}.utilities{grid-column:2;grid-row:2;display:flex;justify-self:center;gap:7px;pointer-events:auto}.utilities button{border:2px solid #edc372;background:#0c2b40e8;color:#ffedc1;width:33px;height:33px;border-radius:9px;font-size:19px;box-shadow:0 2px 0 #80602e}.minimap{grid-column:3;grid-row:2;justify-self:end;overflow:hidden;padding:0;width:145px;pointer-events:auto;border-width:2px}.minimap canvas{display:block;width:100%;height:120px;object-fit:cover}.minimap>span{font-size:10px;letter-spacing:1px;display:block;padding:6px;background:#0b2638;color:#ffe8a9;font-weight:800}.minimap small{float:right;opacity:.7}.boss-health{grid-column:2;grid-row:3;align-self:start;width:350px;justify-self:center;padding:8px 15px;text-align:center;margin-top:-35px;border-width:2px}.boss-health span{font-size:12px;letter-spacing:2px;font-weight:900}.boss-health>div{height:8px;background:#071e30;border-radius:10px;margin-top:6px;overflow:hidden}.boss-health i{height:100%;background:linear-gradient(#ff9f65,#ce3941);width:100%;display:block;transition:width .15s}.chapter-pips{grid-column:1;grid-row:3;display:flex;gap:6px;align-items:center;margin-top:-70px;margin-left:10px;color:#d8d5bf}.chapter-pips span{width:27px;height:27px;border-radius:50%;border:2px solid #c9ad6c;background:#19394ed9;display:grid;place-items:center;font-size:11px;font-weight:900}.chapter-pips span.current{background:linear-gradient(#ffdf87,#c68d39);color:#2d3b35;box-shadow:0 0 12px #ffe19c55}.chapter-pips span.done{background:#2b9a6e;color:#fff5be}.chapter-pips i{height:2px;width:17px;background:#deb56a}
.controls{position:absolute;inset:auto 28px 22px;z-index:2;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.movement{text-align:center}.joystick{width:160px;height:160px;border:5px solid var(--gold);box-shadow:0 4px 0 #86602a,0 0 0 2px #17374b,inset 0 2px 0 #ffeab599,inset 0 0 22px #0007;background:radial-gradient(#314c53bb,#0a2638bb);border-radius:50%;position:relative;touch-action:none;pointer-events:auto}.arrow{position:absolute;font-size:20px;color:#fff1d3;text-shadow:0 2px #263b42}.up{top:8px;left:calc(50% - 10px)}.down{bottom:8px;left:calc(50% - 10px)}.left{left:8px;top:calc(50% - 12px)}.right{right:8px;top:calc(50% - 12px)}#stick{position:absolute;left:calc(50% - 29px);top:calc(50% - 29px);width:58px;height:58px;border-radius:50%;border:3px solid #fff4c9;background:linear-gradient(140deg,#fff6d7,#c8c7bb);box-shadow:0 4px 0 #6f7c75,0 6px 12px #0007}.movement>small{font-size:9px;letter-spacing:1.4px;color:#fff7d8;text-shadow:0 2px 3px #142d32;display:block;margin-top:10px;font-weight:900}.actions{display:flex;gap:15px;align-items:end;pointer-events:auto}.action{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:113px;height:113px;border:5px solid #ffd878;border-radius:50%;box-shadow:0 5px 0 #8b5e24,0 0 0 2px #1d3548,inset 0 2px 1px #fff4c9aa,inset 0 -7px 0 #0003,0 7px 18px #0005;color:#fff4d6;touch-action:none;user-select:none;overflow:hidden}.action.attack{width:143px;height:143px;background:radial-gradient(at 35% 20%,#ff8881,#cd2831 55%,#8b1627)}.action.sight{background:radial-gradient(at 35% 20%,#37b5f0,#0575c2 55%,#074875)}.action.dodge{width:76px;height:76px;background:radial-gradient(at 35% 20%,#4c9d93,#236c68 60%,#164e52);border-width:3px;margin-bottom:5px}.action svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 0 #0005)}.attack svg{width:55px;height:55px;stroke-width:4}.action strong{font-size:17px;text-shadow:0 3px 0 #0007;font-weight:900;margin-top:4px}.action small{font-size:8px;letter-spacing:1px;opacity:.75;margin-top:4px}.dodge strong{font-size:10px}.dash-symbol{font-size:30px;line-height:.9}.cooldown{position:absolute;inset:0;display:none;place-items:center;background:#071d33c4;font-size:34px;font-weight:900;color:#ffe6a5}.action:active{transform:translateY(3px)}.action.active{box-shadow:0 0 25px #ffe49ca8,0 5px 0 #8b5e24}.game-message{position:absolute;left:50%;bottom:29px;transform:translateX(-50%);background:#0b293ce8;border:1px solid #e5c378;color:#fff0ca;border-radius:12px;padding:11px 20px;font-size:12px;text-align:center;max-width:43%;z-index:3;pointer-events:none;box-shadow:0 4px 10px #0003}
.overlay{position:absolute;inset:0;z-index:5}.start-screen{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);background:linear-gradient(100deg,#05283dc4,#071e31ed 50%,#122f43f5);padding:40px 6%;align-items:center;gap:30px;overflow:auto}.intro-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:500px;isolation:isolate}.intro-art>img{width:95%;max-width:530px;margin-top:-80px;filter:drop-shadow(0 15px 22px #0005);mask-image:linear-gradient(#000 70%,transparent 97%)}.intro-halo{position:absolute;width:80%;aspect-ratio:1;border:2px solid #f8d47477;border-radius:50%;box-shadow:0 0 90px #e5bd4f44,inset 0 0 80px #e5bd4f22;z-index:-1;top:6%;transform:rotate(-20deg)}.intro-halo:before{content:'';position:absolute;inset:10%;border:1px solid #ffe7a84d;border-radius:50%}.intro-title{position:absolute;bottom:4%;text-align:center;left:0;right:0}.intro-title>span{font-size:10px;letter-spacing:2.5px;color:#f4d390;font-weight:800}.intro-title h1{font-size:clamp(55px,6.5vw,95px);font-weight:900;line-height:1;margin:12px 0 5px;color:#ffe4a1;letter-spacing:5px;text-shadow:0 5px 0 #755327,0 8px 20px #0008;-webkit-text-stroke:1px #efc46f}.intro-title p{font-size:21px;color:#f4d8a2;font-family:Georgia,serif;font-style:italic;margin:12px 0}.story-panel{min-width:0;max-width:610px;padding:10px 20px 10px 0}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:2.2px;color:#ebc779}.story-panel h2{font-family:Georgia,serif;font-size:36px;line-height:1.18;font-weight:400;margin:16px 0 22px;color:#fff1d1}.story-panel>p{font-size:13px;line-height:1.75;color:#d4dfd8;max-width:550px;margin:12px 0}.villain-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:25px 0}.villain-list>div{background:linear-gradient(150deg,#2c4854,#0c263c);border:1px solid #d9bd6d73;border-radius:9px;padding:12px 10px}.villain-list span{font-size:12px;font-weight:800;color:#edc366;display:block;margin-bottom:8px}.villain-list strong{font-size:12px;display:block;color:#fff0ce;white-space:nowrap}.villain-list small{font-size:7px;letter-spacing:.5px;color:#b8c8c2;display:block;margin-top:8px}.villain-list .final-villain{border-color:#d17c5c;background:linear-gradient(145deg,#4e3440,#20263b)}.final-villain span{color:#ffad77}.start-actions{display:flex;gap:16px;align-items:center;margin-top:12px}.gold-button{border:2px solid #ffe3a0;border-radius:10px;background:linear-gradient(#ffe393,#e7b759 55%,#cc9140);box-shadow:0 4px 0 #7e5226,inset 0 2px 0 #fff5cfb3,0 6px 15px #0004;min-height:53px;padding:12px 22px;color:#243b42;display:flex;justify-content:space-between;align-items:center;gap:35px;font-size:15px;font-weight:900}.gold-button:hover{filter:brightness(1.07)}.gold-button:active{transform:translateY(2px)}.gold-button>b{font-size:23px}.help-button{background:none;border:0;color:#d7d6b8;text-decoration:underline;text-underline-offset:4px;padding:12px 0;font-size:11px}.intro-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #d4bd7838;margin-top:27px;padding-top:15px;font-size:8px;letter-spacing:1px;color:#adbbb0}.help-content{font-size:11px;color:#d3ddd1;line-height:1.6;background:#0a2033b3;padding:5px 15px;margin-top:17px;border-radius:8px}.modal-screen{display:grid;place-items:center;background:#092238c9;backdrop-filter:blur(5px);padding:20px}.modal{width:min(465px,100%);padding:37px;text-align:center}.modal h2{font:400 34px Georgia,serif;margin:20px 0;color:#ffebbf}.modal p{font-size:13px;color:#ccd6cd;line-height:1.65}.modal .gold-button{width:100%;margin:25px 0 10px}.modal small{font-size:10px;color:#b4c5c0}.end-stats{display:flex;justify-content:center;gap:24px;color:#c9d3bf;font-size:10px;margin-top:23px}.end-stats strong{display:block;font-size:28px;color:#f6d17c;margin-bottom:5px}.map-modal{max-width:620px;width:100%;padding:18px 24px;max-height:94dvh;overflow:auto}.map-heading{display:flex;justify-content:space-between;align-items:center}.map-heading h2{font:400 27px Georgia,serif;margin:8px 0 15px}.map-heading button{background:none;border:0;color:#ffe4a1;font-size:30px;padding:5px 10px}.map-modal>canvas{width:100%;max-height:62dvh;object-fit:contain;display:block}.map-legend{display:flex;justify-content:space-between;font-size:10px;margin:12px 0}.map-legend span:first-child{color:#78f2e5}.map-legend span:nth-child(2){color:#ffa380}.map-modal>p{font-size:9px;color:#b6c8c3;text-align:center}
@media(max-width:1000px){.hud{inset:14px 16px auto;gap:10px}.hero-hud{width:280px;height:78px}.hero-portrait{width:80px;height:90px;border-radius:24px;top:-5px}.hero-data{width:217px;margin-left:63px;padding:7px 8px 7px 23px}.hero-name{font-size:19px}.hero-name span{font-size:8px}.health-track{height:15px;margin-top:5px}.timer-panel{min-width:150px;padding:5px 16px 7px}.timer-panel strong{font-size:34px}.score-panel{font-size:19px;padding:6px 12px;min-height:59px;gap:6px}.score-panel strong{font-size:23px}.gold-star{font-size:35px}.quest{min-width:265px;padding:7px 10px;gap:9px}.quest strong{font-size:15px}.quest small{font-size:8px}.quest-icon{font-size:28px}.minimap{width:120px}.minimap canvas{height:95px}.chapter-pips{margin-top:-57px}.boss-health{margin-top:-10px;width:280px}.controls{inset:auto 20px 18px}.joystick{width:130px;height:130px}.action.attack{width:118px;height:118px}.action.sight{width:98px;height:98px}.action.dodge{width:68px;height:68px}.action strong{font-size:14px}.action.dodge strong{font-size:9px}.attack svg{width:45px;height:45px}.action svg{width:35px;height:35px}.actions{gap:12px}.game-message{bottom:22px;font-size:10px;max-width:40%;padding:9px 13px}.story-panel h2{font-size:29px;margin-bottom:15px}.story-panel>p{font-size:12px}.start-screen{padding:25px 4%;gap:20px}.intro-art{min-height:450px}.villain-list{gap:6px;margin:20px 0}.villain-list strong{font-size:10px}.villain-list>div{padding:10px 7px}.villain-list small{font-size:6px}.gold-button{font-size:13px;padding:10px 17px;gap:25px}.intro-footer{font-size:7px}}
@media(max-width:650px){.hud{inset:14px 10px auto;grid-template-columns:1fr 112px;gap:8px}.hero-hud{width:228px;height:64px;grid-column:1;grid-row:1}.hero-portrait{width:66px;height:75px;border-radius:21px;border-width:2px}.hero-data{width:177px;margin-left:51px;padding:5px 7px 7px 20px;border-width:2px}.hero-name{font-size:16px}.hero-name span{font-size:7px}.health-track{height:12px}.timer-panel{grid-column:2;grid-row:1;min-width:108px;padding:6px 8px;align-self:start;border-width:2px}.timer-panel strong{font-size:28px;letter-spacing:1px}.timer-panel>span{font-size:5px;letter-spacing:.3px}.score-panel{grid-column:2;grid-row:2;padding:4px 8px;font-size:14px;min-height:40px;border-width:2px;border-radius:10px;gap:4px}.score-panel strong{font-size:17px}.gold-star{font-size:25px}.quest{grid-column:1;grid-row:2;min-width:0;max-width:228px;padding:5px 8px;border-width:2px;border-radius:10px;gap:7px;align-self:start;margin-top:0}.quest strong{font-size:12px}.quest small{font-size:7px;line-height:1.4}.quest-icon{font-size:21px}.quest>span:last-child{font-size:23px;margin-left:0}.utilities{grid-column:1;grid-row:3;justify-self:start;margin-left:2px;gap:5px}.utilities button{width:29px;height:29px;font-size:16px}.minimap{grid-column:2;grid-row:3;width:90px;border-radius:9px}.minimap canvas{height:78px}.minimap>span{font-size:7px;padding:5px;letter-spacing:.5px}.minimap small{font-size:6px}.chapter-pips{grid-row:3;grid-column:1;margin:0;align-self:start;justify-self:end;margin-top:4px;margin-right:8px;gap:3px}.chapter-pips span{width:22px;height:22px;font-size:8px}.chapter-pips i{width:7px}.boss-health{grid-column:1/-1;grid-row:4;margin-top:0;width:240px;padding:6px 10px}.boss-health span{font-size:10px}.controls{inset:auto 13px 22px}.joystick{width:105px;height:105px;border-width:3px}#stick{width:43px;height:43px;left:calc(50% - 21.5px);top:calc(50% - 21.5px);border-width:2px}.arrow{font-size:13px}.up{top:5px;left:calc(50% - 6.5px)}.down{bottom:5px;left:calc(50% - 6.5px)}.left{left:5px;top:calc(50% - 8px)}.right{right:5px;top:calc(50% - 8px)}.movement>small,.action small{display:none}.actions{gap:9px;max-width:190px;flex-wrap:wrap;justify-content:end}.action{border-width:3px}.action.attack{width:87px;height:87px;order:2}.action.sight{width:77px;height:77px;order:3}.action.dodge{width:53px;height:53px;order:1;margin-right:122px;margin-bottom:-3px}.action strong{font-size:12px}.dodge strong{font-size:7px}.dash-symbol{font-size:24px}.attack svg{width:35px;height:35px}.action.sight svg{width:29px;height:29px}.game-message{max-width:85%;bottom:184px;font-size:10px;width:max-content}.start-screen{display:block;padding:24px 23px;background:linear-gradient(145deg,#0e3446ed,#071d32f7);overflow:auto}.intro-art{min-height:150px;height:150px;display:block}.intro-art>img{position:absolute;right:-15px;top:-15px;width:160px;max-height:190px;object-fit:contain;margin:0;mask-image:linear-gradient(#000 70%,transparent 97%)}.intro-halo{width:150px;right:0;top:0}.intro-title{text-align:left;bottom:25px}.intro-title>span{font-size:6px;letter-spacing:1.3px}.intro-title h1{font-size:49px;letter-spacing:2px;margin:9px 0}.intro-title p{font-size:14px;margin-top:5px}.story-panel{padding:0}.story-panel>.eyebrow{font-size:8px;margin-top:14px}.story-panel h2{font-size:25px;margin:10px 0 15px}.story-panel h2 br{display:none}.story-panel>p{font-size:11px;line-height:1.6}.villain-list{margin:17px 0}.villain-list strong{font-size:10px;white-space:normal;line-height:1.4}.villain-list small{font-size:6px;line-height:1.5}.start-actions{gap:20px}.gold-button{min-height:49px}.intro-footer{margin-top:20px;font-size:6px;padding-top:12px}.modal{padding:27px 22px}.modal h2{font-size:28px}.map-modal{padding:15px}.map-heading h2{font-size:23px}}
@media(max-height:500px) and (min-width:651px){.hud{inset:10px 13px auto;gap:5px}.hero-hud{height:63px;width:255px}.hero-portrait{width:65px;height:75px;border-radius:20px}.hero-data{margin-left:51px;width:204px;padding:5px 8px 7px 23px}.hero-name{font-size:17px}.health-track{height:12px}.timer-panel{min-width:135px;padding:4px 15px}.timer-panel strong{font-size:29px}.timer-panel>span{font-size:6px}.score-panel{min-height:49px;font-size:18px;padding:4px 12px}.score-panel strong{font-size:22px}.gold-star{font-size:30px}.quest{min-width:255px;padding:4px 8px;gap:8px;border-width:2px}.quest strong{font-size:13px}.quest small{font-size:7px}.quest-icon{font-size:22px}.quest>span:last-child{font-size:23px}.minimap{width:87px}.minimap canvas{height:63px}.minimap>span{font-size:6px;padding:4px}.utilities button{width:27px;height:27px;border-width:1px;font-size:15px}.chapter-pips{margin-top:-40px}.chapter-pips span{width:22px;height:22px;font-size:8px}.boss-health{margin-top:0;width:250px;padding:5px 10px}.boss-health span{font-size:9px}.controls{inset:auto 15px 13px}.joystick{width:94px;height:94px;border-width:3px}#stick{width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px)}.arrow{font-size:12px}.up,.down{left:calc(50% - 6px)}.left,.right{top:calc(50% - 7px)}.action.attack{width:90px;height:90px}.action.sight{width:77px;height:77px}.action.dodge{width:53px;height:53px;border-width:2px}.action{border-width:3px}.action strong{font-size:12px}.action.dodge strong{font-size:7px}.action svg{width:29px;height:29px}.attack svg{width:37px;height:37px}.movement>small,.action small{display:none}.actions{gap:10px}.game-message{bottom:17px;max-width:44%;font-size:9px;padding:8px 13px}.start-screen{padding:15px 4%;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:15px;align-items:start}.intro-art{min-height:310px}.intro-art>img{margin-top:0;width:115%;max-width:300px}.intro-title{bottom:10%}.intro-title>span{font-size:6px;letter-spacing:1px}.intro-title h1{font-size:49px;letter-spacing:2px}.intro-title p{font-size:14px}.story-panel{padding:0 15px 0 0}.story-panel>.eyebrow{font-size:7px}.story-panel h2{font-size:22px;margin:6px 0 9px}.story-panel h2 br{display:none}.story-panel>p{font-size:10px;line-height:1.45;margin:7px 0}.villain-list{margin:10px 0;gap:7px}.villain-list>div{padding:7px 9px}.villain-list span{float:left;margin:0 8px 5px 0;font-size:10px}.villain-list strong{font-size:9px}.villain-list small{font-size:6px;margin-top:5px}.gold-button{min-height:40px;padding:8px 15px;font-size:11px}.intro-footer{margin-top:12px;padding-top:8px;font-size:6px}.modal{padding:20px 27px}.modal h2{font-size:26px;margin:12px 0}.modal .gold-button{margin-top:18px}.modal p{font-size:11px}.end-stats{margin-top:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}