/* Photo-referenced runners, with native keyboard-accessible selection. */
:root{--cat-selected:#d59a5660;--cat-panel:#111828;--cat-selected-panel:#202438;--cat-sheet:url('./assets/tuxedo-sprites.png')}
.hero-kitten{background-image:var(--cat-sheet);background-size:400% 400%;width:280px;height:280px}.hero-kitten:after{display:none}.menu-copy{top:12.5%;width:min(660px,72vw)}h1{font-size:clamp(58px,6.3vw,90px);margin:15px 0}.cat-picker{padding:0;border:0;margin:25px auto 0;max-width:420px;min-width:0}.cat-picker legend{float:none;width:100%;font-size:11px;letter-spacing:1.5px;text-align:center;color:var(--color-ink-2);padding:0 0 11px;font-weight:500}.cat-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cat-options label{position:relative;cursor:pointer;min-width:0}.cat-options input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.cat-option{display:flex;align-items:center;gap:7px;background:var(--cat-panel);border:1px solid var(--color-border);border-radius:13px;min-height:79px;padding:8px 11px 8px 5px;transition:background .15s,border-color .15s;text-align:left;position:relative}.cat-options input:checked+.cat-option{border-color:var(--color-coral);background:var(--cat-selected-panel);box-shadow:0 0 0 1px var(--cat-selected)}.cat-options input:focus-visible+.cat-option{outline:3px solid var(--color-focus);outline-offset:4px}.cat-options label:hover .cat-option{border-color:var(--color-coral)}.cat-options label:active .cat-option{transform:translateY(1px)}.cat-picker:disabled{opacity:.55;cursor:wait}.cat-preview{width:63px;height:63px;flex-shrink:0;background-position:0 0;background-size:400% 400%;image-rendering:pixelated}.preview-tuxedo{background-image:url('./assets/tuxedo-sprites.png')}.preview-ginger{background-image:url('./assets/ginger-sprites.png')}.cat-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.cat-copy strong{font-size:14px;font-weight:500;white-space:nowrap}.cat-copy small{font-size:10px;line-height:1.3;color:var(--color-ink-2);padding-right:2px}.cat-check{display:none;position:absolute;right:8px;top:6px;color:var(--color-coral);font-size:11px}.cat-options input:checked+.cat-option .cat-check{display:block}.cat-hint{font-size:11px;color:var(--color-ink-2);margin-top:10px}.menu-copy>.btn{margin-top:22px}.zone-count{display:block;color:var(--color-coral);font-size:8px;letter-spacing:2px;margin-top:4px}.route-marker{width:218px}.route-marker>span:first-child{display:block;white-space:nowrap;font-size:9px}.route-marker>div{margin-top:7px}.portrait img{object-position:65% center}.portrait strong{color:var(--color-ink)}
@media(min-width:1700px){.menu-copy{top:14%}.hero-kitten{width:325px;height:325px}}
@media(max-height:760px) and (min-width:701px){.menu-copy{top:14%}h1{font-size:62px;margin:12px 0}.tagline{font-size:18px}.cat-picker{margin-top:17px;max-width:400px}.cat-option{min-height:66px;padding-top:4px;padding-bottom:4px}.cat-preview{width:54px;height:54px}.cat-picker legend{padding-bottom:8px}.cat-hint{display:none}.menu-copy>.btn{margin-top:19px;min-height:51px}.menu-links{margin-top:10px}}
@media(max-width:1100px) and (min-width:701px){.menu-copy{left:38%;width:62vw}.cat-copy small{font-size:9px}.cat-preview{width:55px;height:55px}.cat-option{gap:4px;padding-right:8px}.hero-kitten{left:75%;bottom:12%;width:240px;height:240px}}
@media(max-width:700px){.menu-copy{top:12%;left:50%;width:calc(100% - 44px)}h1{font-size:53px;margin:13px 0}.tagline{font-size:16px}.cat-picker{margin-top:21px;max-width:362px}.cat-picker legend{font-size:10px;letter-spacing:1.4px;padding-bottom:9px}.cat-options{gap:9px}.cat-option{min-height:72px;padding:5px 8px 5px 2px;gap:3px;border-radius:11px}.cat-preview{width:59px;height:59px}.cat-copy strong{font-size:13px}.cat-copy small{font-size:9px;line-height:1.3}.cat-hint{font-size:10px;margin-top:9px}.cat-check{font-size:10px;right:6px;top:4px}.menu-copy>.btn{margin-top:20px;min-height:53px;font-size:15px}.menu-links{margin-top:8px}.hero-kitten{left:55%;bottom:11%;width:226px;height:226px}.zone-count{font-size:7px;letter-spacing:1.4px;margin-top:3px}.route-marker{width:190px}.route-marker>span:first-child{font-size:8px;letter-spacing:1px}.tutorial-hint{bottom:156px}.route-marker>div{margin-top:6px}}
@media(max-width:375px){.menu-copy{width:calc(100% - 34px)}h1{font-size:48px}.tagline{font-size:14px}.cat-preview{width:52px;height:52px}.cat-option{min-height:66px}.cat-copy strong{font-size:12px}.cat-copy small{font-size:8px}.cat-options{gap:8px}.hero-kitten{width:208px;height:208px}.menu-links,.menu-links .text-button{font-size:10px}.cat-hint{font-size:9px}}
@media(max-height:660px) and (max-width:700px){.menu-copy{top:13%}h1{font-size:40px;margin:10px 0}.tagline{font-size:13px}.cat-picker{margin-top:13px}.cat-picker legend{font-size:9px;padding-bottom:7px}.cat-option{min-height:57px;padding-top:2px;padding-bottom:2px}.cat-preview{width:49px;height:49px}.cat-copy small{display:none}.cat-copy strong{font-size:12px}.cat-hint{display:none}.menu-copy>.btn{margin-top:17px;min-height:45px;padding:12px 23px;font-size:14px}.menu-links{margin-top:6px}.hero-kitten{width:153px;height:153px;bottom:8%}.menu-bottom{bottom:15px}.portrait img{width:27px;height:27px}}
@media(max-height:500px) and (min-width:701px){.menu-copy{top:18%;left:35%;width:51vw}h1{font-size:38px;margin:8px 0}.tagline{font-size:14px}.cat-picker{margin-top:12px;max-width:360px}.cat-picker legend{display:none}.cat-option{min-height:52px;padding-top:1px;padding-bottom:1px}.cat-preview{width:46px;height:46px}.cat-hint,.cat-copy small{display:none}.cat-copy strong{font-size:12px}.menu-copy>.btn{margin-top:13px;min-height:43px;padding:11px 24px;font-size:13px}.menu-links{margin-top:3px}.hero-kitten{width:195px;height:195px;left:79%;bottom:8%}}

.hero-kitten{background:none!important;animation:none!important}.hero-kitten canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.cat-preview{background:none!important}
.cat-options input{inset:0;width:100%;height:100%;z-index:2;cursor:pointer}.cat-picker:disabled input{cursor:wait}
@media(min-width:1000px){.tutorial-hint{left:36px;bottom:30px;transform:none;max-width:300px;white-space:normal;text-align:left}}
@media(min-width:701px) and (max-width:999px){.tutorial-hint{top:208px;bottom:auto}}
.zone-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px;font-size:9px;letter-spacing:.6px;color:var(--color-ink-2)}.zone-meta .zone-count{display:inline;margin:0;color:var(--color-coral);font-size:8px;letter-spacing:1.1px}#zone-phase{color:var(--color-coral);font-size:9px;letter-spacing:.3px}
@media(max-width:700px){.zone-meta{margin-top:4px;font-size:8px}.zone-meta .zone-count{font-size:7px}#zone-phase{font-size:8px}}
:root{--color-game-vignette:#01030920}body.running .vignette{box-shadow:inset 0 0 70px 8px var(--color-game-vignette)}body.running .brand{padding:8px 11px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-hud)}