@font-face{font-family:RunMono;src:local('Cascadia Code'),local('Consolas');font-display:swap}
:root{color-scheme:dark;--ink:#172030;--cream:#fff1cd;--muted:#bac5b2;--amber:#ffbd66;--cyan:#8fe9da;--coral:#fc8669;--edge:#ffffff29}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}body{font-family:RunMono,'Courier New',monospace;color:var(--cream)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button:active{transform:translateY(2px)}[hidden]{display:none!important}#app{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden}#world{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;touch-action:none}#grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#162332 4px);z-index:1}#screen{position:absolute;inset:0;z-index:5;overflow:auto;scrollbar-width:thin;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:linear-gradient(90deg,#101d25f0 0%,#101d25d9 30%,#101d2555 75%,#101d2500)}#screen.empty{display:none}.menu{width:100%;max-width:1180px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.brand-tag,.eyebrow{font-size:10px;letter-spacing:2.5px;line-height:1.6;color:var(--cyan);margin:0 0 20px}.wordmark{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(76px,12vw,160px);line-height:.79;letter-spacing:-3px;margin:0 0 28px;transform:skew(-4deg);text-shadow:4px 5px 0 #172030}.wordmark span{color:var(--amber)}.pitch{font-size:14px;line-height:1.8;max-width:370px;color:var(--muted);margin:12px 0 26px}.menu-actions{display:flex;gap:12px;flex-wrap:wrap}.primary,.secondary,.small-button{border:1px solid var(--edge);padding:15px 23px;font-size:12px;font-weight:bold;letter-spacing:1px;background:#182832cc;box-shadow:0 4px 0 #09151f}.primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}.primary:hover{background:#ffce8f}.secondary:hover,.small-button:hover{background:#2c4244}.small-button{padding:10px 13px;font-size:10px}.links{display:flex;gap:20px;margin:26px 0 0}.text-button{padding:6px 0;background:none;border:0;border-bottom:1px solid #ffffff40;font-size:10px;letter-spacing:1px;color:var(--muted)}.menu-stats{margin-top:34px;display:flex;gap:26px}.stat small{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.stat strong{display:block;font-size:24px;margin-top:7px}.roster{align-self:end;padding:22px;background:#112329c9;border:1px solid #ffffff21;backdrop-filter:blur(5px)}.roster-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;margin:0 0 15px}.character-list{display:flex;gap:8px}.character{flex:1;min-width:0;background:#172e33;border:1px solid #ffffff26;padding:12px 4px 8px;position:relative}.character.active{border-color:var(--amber);background:#3d3c2d}.character canvas{width:100%;aspect-ratio:1;max-height:85px;object-fit:contain;image-rendering:pixelated}.character .name{display:block;font-size:9px;margin-top:6px;letter-spacing:.2px}.character .locked{font-size:8px;color:var(--muted)}.character-description{font-size:12px;line-height:1.6;margin:17px 0 0}.character-description strong{color:var(--amber);font-size:10px;letter-spacing:1px}.character-description small{display:block;color:var(--muted);font-size:10px}.roster-note{color:var(--muted);font-size:9px;line-height:1.5;margin:16px 0 0}.footer-note{position:absolute;bottom:17px;left:clamp(16px,4vw,48px);right:30px;display:flex;justify-content:space-between;color:#d5dac28c;font-size:8px;letter-spacing:1.5px;pointer-events:none}.panel{width:min(700px,100%);padding:30px;background:#15262ef5;border:1px solid #a5ccb84d;box-shadow:8px 8px 0 #08192088}.panel.wide{width:min(930px,100%)}.panel h1,.panel h2{font-family:Impact,'Arial Black',sans-serif;font-weight:normal;font-size:clamp(30px,5vw,54px);line-height:1;margin:0 0 18px;letter-spacing:.5px}.panel p{color:var(--muted);font-size:12px;line-height:1.7}.panel .eyebrow{color:var(--cyan);margin-bottom:12px}.panel .menu-actions{margin-top:25px}.guide{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}.guide h3{color:var(--amber);font-size:11px;margin:7px 0}.guide p{font-size:11px;margin:0}.setting{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--edge);font-size:12px}.setting input{accent-color:var(--amber);width:22px;height:22px}.danger{color:var(--coral);border-color:#fc866970}.mutation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.mutation{border:1px solid #ffffff30;background:#1c353d;text-align:left;padding:22px 18px;min-height:224px;display:flex;flex-direction:column;align-items:start;transition:background .15s,transform .15s}.mutation:hover,.mutation:focus-visible{background:#2a494d;transform:translateY(-4px)}.mutation[data-family=rare]{border-color:var(--amber);background:#3e392d}.mutation .symbol{font-size:32px;color:var(--cyan);margin-bottom:24px}.mutation[data-family=rare] .symbol{color:var(--amber)}.mutation small{color:var(--cyan);font-size:9px;letter-spacing:1px}.mutation strong{display:block;font-size:15px;margin:10px 0}.mutation p{margin:0;font-size:11px}.mutation .rank{margin-top:auto;padding-top:18px;color:#b6cabc;font-size:9px}.results{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}.results .stat strong{font-size:clamp(18px,3vw,30px);color:var(--amber)}.unlock-list{color:var(--cyan)!important}.progress-list{font-size:10px;line-height:2;color:var(--muted)}#hud{position:absolute;z-index:3;top:max(20px,env(safe-area-inset-top));left:3%;right:3%;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;pointer-events:none;text-shadow:2px 2px #14202a}.hud-left{display:flex;gap:25px}.hud-score strong{font-size:34px;line-height:1.3}.hud-score small{font-size:9px;letter-spacing:1.5px}.hud-meta{font-size:10px;line-height:1.7;color:var(--muted);padding-top:3px}.hud-meta b{color:var(--cream)}.hud-right{display:flex;gap:18px;align-items:start}.hud-right button{pointer-events:auto}.evolution{width:180px;font-size:9px;letter-spacing:1px}.evolution .label{display:flex;justify-content:space-between;margin-bottom:8px}.track{height:5px;background:#ffffff26;box-shadow:0 1px #0005}.fill{height:100%;background:var(--cyan);width:0%}.dash-meter{margin-top:11px;color:var(--amber)}.dash-meter .fill{background:var(--amber)}.shield-badge{font-size:9px;letter-spacing:1px;color:var(--amber);margin-top:9px}#announcement{position:absolute;z-index:4;top:17%;width:100%;padding:0 20px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;color:var(--cream);text-shadow:2px 2px #14202a}#announcement.visible{opacity:1}#announcement strong{display:block;font-size:clamp(12px,2.5vw,26px);letter-spacing:2px}#announcement small{display:block;font-size:11px;margin-top:8px;color:var(--cream)}#touch{position:absolute;z-index:4;bottom:max(18px,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;justify-content:space-between;pointer-events:none}.touch-action{width:100px;height:66px;background:#142b34bb;border:1px solid #b5d8c570;box-shadow:0 4px #12202a;font-size:12px;letter-spacing:2px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}.touch-action.dash{border-color:var(--amber);color:var(--amber)}.touch-action.pressed{background:#416b66}.touch-action small{display:block;font-size:9px;margin-top:7px;letter-spacing:0;color:var(--muted)}#dev{position:absolute;bottom:3px;right:6px;background:#000a;color:#b9ffe1;font:10px monospace;z-index:20;pointer-events:none}#storage-warning{position:absolute;z-index:10;bottom:10px;width:100%;font-size:10px;color:var(--coral);text-align:center;pointer-events:none}.spinner{width:30px;height:30px;border:3px solid #a1dcc030;border-top-color:var(--amber);margin:20px 0;animation:spin 1s steps(8) infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-panel{max-width:550px}.loading-panel h1{font-size:42px}.reduced-motion *{animation:none!important;transition:none!important}#screen.modal{background:#081722b5;backdrop-filter:blur(3px)}
@media(max-width:760px){.menu{gap:20px}.wordmark{font-size:85px}.brand-tag{font-size:8px}.pitch{font-size:11px}.roster{padding:14px}.character-description{font-size:10px}.primary,.secondary{padding:13px 16px;font-size:10px}.menu-stats{gap:20px;margin-top:20px}.links{margin-top:18px;gap:14px}.roster-title{font-size:9px}.footer-note{display:none}.panel{padding:22px}.mutation{padding:16px 12px;min-height:200px}.mutation strong{font-size:12px}.hud-left{gap:14px}.evolution{width:140px}.hud-right{gap:12px}}
@media(max-width:540px) and (orientation:portrait){#screen{padding:24px 18px;background:linear-gradient(180deg,#102129d9,#11242df2)}.menu{display:flex;flex-direction:column;align-items:stretch;gap:28px;margin:auto 0}.wordmark{font-size:100px;line-height:.83;margin-bottom:18px}.wordmark br{display:none}.brand-tag{margin-bottom:14px;font-size:8px;letter-spacing:1.5px}.pitch{font-size:12px;margin:12px 0 20px}.menu-actions{gap:10px}.menu-actions button{flex:1}.roster{padding:15px;width:100%}.character canvas{height:48px}.character-description{margin-top:10px}.roster-note{margin-top:9px}.menu-stats{position:absolute;right:20px;top:24px;margin:0}.menu-stats .stat:last-child{display:none}.menu-stats .stat small{font-size:7px}.menu-stats .stat strong{font-size:15px;text-align:right}.menu .brand-tag{max-width:210px}.guide{grid-template-columns:1fr;gap:10px}.guide p{font-size:10px}.panel{padding:20px}.panel h1,.panel h2{font-size:36px}.mutation-grid{grid-template-columns:1fr;gap:10px;margin:18px 0}.mutation{display:grid;grid-template-columns:42px 1fr;min-height:110px;padding:13px 16px;column-gap:12px}.mutation .symbol{grid-row:1/5;margin:15px 0 0;font-size:28px}.mutation small,.mutation strong,.mutation p,.mutation .rank{grid-column:2}.mutation strong{margin:6px 0;font-size:13px}.mutation p{font-size:10px}.mutation .rank{padding-top:8px}.results{grid-template-columns:1fr 1fr;gap:20px}#hud{top:18px;left:17px;right:17px;gap:8px}.hud-left{display:block}.hud-score strong{font-size:29px}.hud-meta{font-size:8px}.evolution{width:115px;font-size:8px}.hud-right{gap:10px}.hud-right .small-button{padding:9px 8px;font-size:8px}#announcement{top:27%}#announcement strong{font-size:15px;letter-spacing:1px}#announcement small{font-size:10px}#touch{bottom:max(40px,env(safe-area-inset-bottom));left:7%;right:7%}.touch-action{width:125px;height:82px}.nav-hint{font-size:9px!important}}
@media(max-height:500px){#screen{padding:16px 26px}.wordmark{font-size:76px;margin-bottom:12px}.brand-tag{margin-bottom:12px}.pitch{font-size:10px;margin:10px 0 16px}.menu-stats{margin-top:18px}.links{margin-top:15px}.roster{padding:13px}.character canvas{max-height:55px}.roster-note{display:none}.footer-note{display:none}.panel{padding:18px}.panel h2{font-size:29px;margin-bottom:12px}.panel p{font-size:10px}.mutation-grid{margin:12px 0}.mutation{min-height:173px;padding:12px}.mutation .symbol{font-size:22px;margin-bottom:10px}.mutation strong{font-size:11px}.mutation p{font-size:10px}.mutation .rank{padding-top:10px}.nav-hint{display:none}.guide{gap:6px 18px}.guide p{font-size:9px}.results{padding:13px 0}.panel .menu-actions{margin-top:15px}.touch-action{height:44px;width:85px;font-size:10px}#touch{bottom:8px}.hud-score strong{font-size:24px}#hud{top:12px}.hud-meta{display:none}#announcement{top:24%}}

/* Three equally important real-time actions: dash, duck and jump. */
#touch{gap:10px}
.touch-action{width:96px}
.touch-action.crouch{border-color:var(--cyan);color:var(--cyan)}
.touch-action.pressed{background:#416b66;transform:translateY(3px);box-shadow:0 1px #12202a}
@media(max-width:540px) and (orientation:portrait){#touch{left:4%;right:4%;gap:8px}.touch-action{width:min(29vw,106px);height:78px;font-size:10px}}
@media(max-height:500px){.touch-action{height:44px;width:85px;font-size:10px}}