:root{color-scheme:dark;--ink:#f7fbff;--mint:#b6fc64;--panel:#0c182cf2;--edge:#3e536c;--touch-size:1;--touch-alpha:.9}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080f1c;color:var(--ink);font-family:Trebuchet MS,Arial,sans-serif}body{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button,a,input,select{touch-action:manipulation}button,a,select,input{font:inherit}button{border:1px solid #55728d;border-radius:9px;background:#1c344f;color:#fff;cursor:pointer;padding:10px 16px;font-weight:700;min-height:42px}button:hover{background:#385472;color:#fff;border-color:#c2efff}button:active{transform:translateY(1px);background:#476b8f;color:#fff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffdf77;outline-offset:3px}button:disabled{background:#1a2332;color:#a6aebc;border-color:#39475a;cursor:default;transform:none}button.primary{color:#142408;background:var(--mint);border-color:#d5ff9c}button.primary:hover{color:#081004;background:#d0ff99}button.danger{background:#663245;color:#fff}a{color:#d6eaff}header{height:48px;display:flex;align-items:center;gap:12px;padding:4px 20px;background:#0c1527;z-index:3;border-bottom:1px solid #31455a;flex:none}header a{font-size:13px;white-space:nowrap;text-decoration:none;border-right:1px solid #40506b;padding-right:18px}header .brand{font-style:italic;font-weight:900;letter-spacing:1px;flex:1;font-size:16px;color:#b6fc64}header .brand b{color:#fff}header button{padding:4px 12px;min-height:32px;font-size:13px}#hud{min-height:42px;display:flex;align-items:center;gap:20px;padding:5px 22px;background:#111e32;border-bottom:1px solid #31455a;font-size:14px;flex:none}#health{color:#b6fc64;letter-spacing:2px}#lives{white-space:nowrap}#weapon{padding:3px 10px;min-height:29px;font-size:13px;border-color:#526b84}#score{margin-left:auto;font-variant-numeric:tabular-nums}#powers{font-size:12px;color:#ffd685}#playfield{position:relative;flex:1;min-height:0;overflow:hidden}#game{width:100%;height:100%;display:block;outline:none;touch-action:none}#notice{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#0a132de8;border:1px solid #7095af;color:#fff;padding:8px 18px;border-radius:25px;text-align:center;pointer-events:none;font-size:14px;opacity:0;transition:opacity .2s;max-width:90%;z-index:2}#notice.on{opacity:1}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07112291;z-index:4;overflow:auto;padding:18px}#overlay:empty{display:none}.panel{width:min(900px,100%);max-height:100%;overflow:auto;background:var(--panel);border:1px solid #577186;border-radius:20px;box-shadow:0 20px 70px #0009;padding:28px 34px}.panel.narrow{max-width:640px}.eyebrow{color:#b6fc64;letter-spacing:3px;font-size:11px;text-transform:uppercase;font-weight:bold}.panel h1{font-size:clamp(38px,6vw,70px);font-style:italic;line-height:.95;margin:14px 0;color:#c0ff75;text-shadow:3px 4px #32661d}.panel h1 span{color:#fff;font-size:.72em}.panel h2{font-size:30px;margin:10px 0 15px}.panel p{line-height:1.55;color:#d6e3f1}.muted{color:#aabed2;font-size:13px}.hero-menu{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center}.hero-portrait{height:275px;background-image:url('assets/characters.png');background-size:400% 400%;background-position:100% 33.333%;background-repeat:no-repeat;filter:drop-shadow(0 8px 15px #0005)}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 4px}.buttons button{flex:1;white-space:nowrap}.menu-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.menu-stack .primary{grid-column:1/-1}.badge{display:inline-block;padding:6px 10px;background:#263849;border-radius:30px;font-size:12px;color:#dce9ff}.world-block{margin:14px 0;padding:12px;border:1px solid #3d536d;border-radius:12px;background:#15243e}.world-block h3{margin:0 0 10px;color:#c1fa82}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.level-grid button{font-size:12px;white-space:normal;padding:10px;line-height:1.4}.level-grid small{display:block;font-weight:normal;color:#cbd4e1}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.setting{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:42px;font-size:14px}.setting input[type=range]{width:110px}.setting input[type=checkbox]{width:20px;height:20px;accent-color:#9bee59}.setting select{background:#253d59;color:white;padding:8px;border:1px solid #63819e;border-radius:6px}.remap{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.remap button{font-size:12px;padding:8px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.stat-grid div{background:#1c314a;padding:14px 7px;border-radius:10px;text-align:center}.stat-grid strong{display:block;color:#c0ff75;font-size:26px}.stat-grid small{color:#c0d0e2;font-size:12px}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:20px}.instructions h3{color:#b6fc64}.instructions ul{padding-left:20px;line-height:1.6;font-size:14px}kbd{background:#263a52;border:1px solid #68839a;border-radius:4px;padding:2px 5px;white-space:nowrap}#bossHud{position:absolute;top:12px;left:18%;right:18%;display:none;text-align:center;text-shadow:1px 2px #000;font-size:14px;font-weight:bold;pointer-events:none}#bossHud i{display:block;background:#152039;border:2px solid #d9c7e4;border-radius:9px;height:12px;overflow:hidden;margin-top:5px}#bossHud b{display:block;height:100%;background:#ff7396;width:100%}#touch{display:none;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:6px 14px;background:#101c30;border-top:1px solid #3c5067;touch-action:none;user-select:none;-webkit-user-select:none}#touch button{padding:0;width:calc(64px * var(--touch-size));height:calc(64px * var(--touch-size));min-height:0;border-radius:50%;font-size:12px;background:#28425e;opacity:var(--touch-alpha);border:2px solid #7793aa}#touch button.held{background:#adf766;color:#14220a;border-color:#d3ffab}#touch button[data-control=fire]{background:#924b40;border-color:#ffac88}#touch button[data-control=jump]{background:#366d55;border-color:#aceda6}.dpad,.touch-actions{display:flex;gap:8px;align-items:center}.dpad>div{display:flex;flex-direction:column;gap:4px}#touch .dpad>div button{height:calc(30px * var(--touch-size));width:calc(43px * var(--touch-size));border-radius:10px}#touchWeapon{width:calc(46px * var(--touch-size))!important;height:calc(46px * var(--touch-size))!important;font-size:10px!important}body.touch #touch{display:flex}body.menu #touch{display:none}body.menu #hud{display:none}body.menu #pauseBtn{visibility:hidden}.storage-warning{color:#ffcc83;font-size:12px}hr{border:0;border-top:1px solid #35475e;margin:20px 0}.campaign-strip{display:flex;gap:7px;margin-top:24px}.campaign-strip span{height:5px;flex:1;background:#4d7255;border-radius:4px}.campaign-strip span:nth-child(2){background:#cf7544}.campaign-strip span:nth-child(3){background:#df82ce}.campaign-strip span:nth-child(4){background:#8bd8ff}.campaign-strip span:nth-child(5){background:#3db9c0}.campaign-strip span:nth-child(6){background:#a880e1}
@media(max-width:600px){header{height:42px;padding:4px 9px;gap:7px}header a{font-size:11px;padding-right:9px}header .brand{font-size:12px}header .brand b{display:none}header button{padding:4px 7px;font-size:11px}#hud{padding:5px 8px;gap:7px;flex-wrap:wrap;font-size:12px}#health{letter-spacing:0}#powers{width:100%;text-align:center}#powers:empty{display:none}#weapon{font-size:11px}#overlay{padding:10px}.panel{padding:20px 18px;border-radius:14px}.panel h2{font-size:24px}.hero-menu{grid-template-columns:1fr}.hero-portrait{display:none}.panel h1{font-size:51px}.level-grid{grid-template-columns:1fr 1fr}.settings-grid,.instructions{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.buttons{flex-wrap:wrap}.buttons button{white-space:normal}.remap{grid-template-columns:1fr 1fr}#touch{padding:12px 7px;gap:3px}#touch button{width:calc(53px * var(--touch-size));height:calc(60px * var(--touch-size));font-size:11px}.dpad,.touch-actions{gap:4px}#touch .dpad>div button{width:calc(36px * var(--touch-size));height:calc(28px * var(--touch-size))}#touchWeapon{width:calc(37px * var(--touch-size))!important}#notice{font-size:12px;width:max-content;max-width:94%}}
@media(max-height:500px){header{height:33px}#hud{min-height:31px;padding:2px 15px;font-size:12px}#weapon{min-height:25px}#touch{padding:3px 20px}#touch button{width:calc(48px * var(--touch-size));height:calc(48px * var(--touch-size))}#touch .dpad>div button{height:calc(23px * var(--touch-size))}.panel{padding:16px 24px}.hero-portrait{height:160px}.panel h1{font-size:42px}.panel p{font-size:13px;margin:9px 0}.menu-stack{margin-top:10px}.menu-stack button{min-height:34px;padding:6px 12px}.panel h2{margin:5px 0 10px}.campaign-strip{margin-top:10px}#overlay{padding:8px}.level-grid{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.hero-portrait{clip-path:inset(0 0 0 13%)}button.primary:disabled{background:#294134;color:#c1cdbb;border-color:#42574b}

body.boss #notice{top:54px}
.hero-portrait{background-position:0 0;clip-path:none}