@font-face{font-family:Impress;src:url('../assets/fonts/ImpressBT.5eedadf6698eb050.ttf')}*{box-sizing:border-box}body{margin:0;background:#738f89;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}button{cursor:pointer}button:focus-visible{outline:2px solid white;outline-offset:2px}.hidden{display:none!important}.hud{position:fixed;display:flex;justify-content:space-between;pointer-events:none}.hud>div{display:flex}.hud button{pointer-events:auto}.stat small,.stat b{display:block}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:10px}.panel{text-align:center}.controls{display:flex;justify-content:center}.controls b{display:block}.powers{text-align:left}.power b{display:block}.bottom{position:fixed;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.bottom button{pointer-events:auto}.active{display:flex;flex-wrap:wrap;gap:4px}#toast{position:fixed;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}.route{position:fixed;display:flex;align-items:center;pointer-events:none}.route-label{display:block}.route-track{position:absolute;overflow:hidden}.route-track i{display:block;height:100%;width:0}
@font-face{font-family:Mickey;src:url('../assets/fonts/runner_MickeyFilled.8adc13c4eac02e80.ttf')}
body{font-family:Impress;color:#161616}
/* Console-only visibility diagnostic; simulation and pickup effects keep running. */
body.runner-hud-hidden .hud,body.runner-hud-hidden .route,body.runner-hud-hidden #active,body.runner-hud-hidden .bottom,body.runner-hud-hidden #toast,body.runner-hud-hidden #cog-suit-tracker{display:none!important}
button,.hud button{display:inline-flex;align-items:center;justify-content:center;background:#1e3948;border:1px solid #55788b;border-radius:10px;box-shadow:none;color:#edf5fa;font:20px/1.2 Impress;padding:8px 22px;min-height:42px;transition:background-color .16s ease,border-color .16s ease,opacity .16s ease}
button:hover,.hud button:hover{background-color:#294858;border-color:#7599ac}button:active,.hud button:active{background-color:#142f3e}button:disabled{opacity:.6;cursor:default}button:focus-visible{outline:3px solid #ffe18c;outline-offset:3px}
.hud{inset:12px 16px auto;align-items:center;height:112px}.hud>div{gap:12px;align-items:center}.brand{display:none}
.stat{position:relative;background:transparent var(--native-dialog) no-repeat center/100% 100%;border:0;border-radius:0;box-shadow:none;min-width:115px;height:76px;padding:13px 20px;text-align:center}
.stat small{font:15px Impress;text-transform:none;letter-spacing:0;color:#161616}.stat b{font:29px Impress;color:#161616;text-shadow:none}
/* Keep the static artwork and changing counter on separate compositor layers. */
.bean-jar{background:none;width:92px;height:112px;min-width:0;padding:0}.bean-jar-art{position:absolute;inset:0;background:var(--native-jar) no-repeat center/contain;will-change:transform;pointer-events:none}.bean-jar small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.bean-jar b{position:absolute;top:48%;left:0;right:0;font:29px Mickey;color:#ffff00;text-shadow:1px 1px #000;line-height:1;will-change:transform}
.best-panel{background:none;min-width:95px;height:64px;color:white;text-shadow:1px 2px #000;padding:8px}.best-panel small,.best-panel b{color:#ffffb0;text-shadow:1px 2px #000}.best-panel b{font-size:23px}
.hud #pause{font-family:Impress;min-width:70px}.hud #sound{font-size:15px;padding:10px 20px}
.route{top:15px;left:50%;transform:translateX(-50%);background:transparent var(--native-scroll) no-repeat center/100% 100%;border:0;border-radius:0;box-shadow:none;min-width:340px;max-width:380px;padding:18px 24px 24px;gap:15px;color:#292112}
.route-label{color:#534934;font:11px Impress;letter-spacing:0}.route strong{font:20px Impress}.route-next{color:#534934;font:13px Impress}#distance{color:#3b3125;font:15px Impress}.route-track{bottom:16px;left:27px;right:27px;height:3px;background:#97754555;border-radius:0}.route-track i{background:#6e572f}
.overlay{background:#0003;backdrop-filter:none}.panel{background:transparent var(--native-dialog) no-repeat center/100% 100%;border:0;outline:0;border-radius:0;box-shadow:none;padding:45px 48px;width:min(610px,95vw);max-height:94vh;overflow:auto}
.eyebrow{font:15px Impress;letter-spacing:0;color:#4c4c3c}h1{font:48px Mickey;color:#ff5454;text-shadow:none;line-height:1;transform:none;margin:12px 0 22px}h1 br{display:none}
.subtitle{font:17px Impress;color:#161616;line-height:1.35}.controls{font:13px Impress;color:#161616;margin:20px 0;gap:20px}.controls b{font:21px Impress;color:#161616}.panel #start{font-size:22px;min-width:170px}
.powers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.power{border:0;border-radius:0;background:none;padding:0;color:#444;font:13px Impress;line-height:1.25}.power b{font:16px Impress;color:#171717;font-weight:normal;margin-bottom:3px}
.bottom{bottom:15px;left:16px;right:16px}.hint{font:12px Impress;color:white;text-shadow:1px 1px #000;background:none;border:0;border-radius:0;padding:0;line-height:1.5}.chip{background:transparent var(--native-dialog) no-repeat center/100% 100%;border:0;border-radius:0;box-shadow:none;color:#171717;font:16px Impress;padding:15px 20px}.bottom button{min-width:190px;font-size:18px}
#toast{top:115px;background:transparent var(--native-dialog) no-repeat center/100% 100%;border:0;border-radius:0;box-shadow:none;color:#161616;font:22px Impress;padding:18px 35px}
.route{transition:opacity .2s}.route.tunnel-view{opacity:0}
.power-clock{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:7px;background:var(--native-clock) no-repeat center/contain;font:20px Impress;color:#d00}.chip{display:flex;align-items:center;padding:6px 16px}.panel{padding:55px 60px 62px}
button:not(:disabled):hover,button:not(:disabled):active{transform:none;filter:none}
.overlay:not(.hidden){animation:veil-in .22s ease-out}.overlay:not(.hidden) .panel{animation:panel-in .38s cubic-bezier(.2,.8,.2,1)}
#toast:not(.hidden){animation:toast-in .3s cubic-bezier(.2,.8,.2,1)}
.chip{animation:chip-in .26s cubic-bezier(.2,.8,.2,1);transform-origin:bottom left}.chip.expiring .power-clock{animation:clock-pulse .65s ease-in-out infinite alternate}
.route{transition:opacity .3s ease,translate .3s ease}.route.tunnel-view{translate:0 -10px}
@keyframes veil-in{from{background-color:#0000}to{background-color:#0003}}
@keyframes panel-in{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toast-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes chip-in{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes clock-pulse{to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:650px){.hud{inset:8px 6px auto}.hud>div{gap:3px}.stat{min-width:85px;padding:12px 12px;height:65px}.stat small{font-size:13px}.stat b{font-size:24px}.bean-jar{min-width:0;width:75px;height:91px;padding:38px 5px 0}.bean-jar small{font-size:9px;top:18px}.bean-jar b{font-size:20px}.best-panel{min-width:51px;width:51px;padding:7px 0}.best-panel small{font-size:11px}.best-panel b{font-size:18px}.hud button{font-size:12px;padding:8px 9px;min-height:34px}.hud #sound{font-size:11px;padding:8px 10px}.hud #pause{min-width:45px;font-size:15px}.route{top:95px;left:50%;right:auto;min-width:310px;width:calc(100% - 26px);padding:16px 22px 22px;gap:12px}.route strong{font-size:17px}.route-next{font-size:11px}.route-label{font-size:10px}#distance{font-size:13px}#toast{top:173px;font-size:17px;max-width:95vw;width:max-content;padding:15px 28px}.panel{padding:34px 28px;max-height:94vh}h1{font-size:35px;margin:12px 0 18px}.subtitle{font-size:15px}.powers{grid-template-columns:1fr 1fr;gap:12px}.power{font-size:11px}.power b{font-size:14px}.controls{font-size:11px;gap:12px}.controls b{font-size:20px}.bottom{bottom:12px;left:10px;right:10px}.bottom button{min-width:150px;font-size:15px;padding:8px 14px}.hint{max-width:180px;font-size:10px}.chip{font-size:13px;padding:12px 16px}.active{max-width:200px}}

/* The remastered dynamic frame keeps its native corners with nine-slice borders. */
.overlay{background:#183d4b66;backdrop-filter:blur(3px)}
.panel{background:none;border:28px solid transparent;border-image:var(--native-frame) 33.333333% fill stretch;border-radius:0;padding:14px 24px 16px;width:min(640px,95vw);max-height:min(850px,96vh);overflow:auto;text-align:center;filter:drop-shadow(0 14px 22px #142d3b44)}
.panel-header{padding:5px 8px 20px}.eyebrow{color:#497286;font:13px Impress;letter-spacing:1px}h1{font-size:46px;line-height:1.05;margin:9px 0 14px;color:#ee6453}
.panel .subtitle{font-size:17px;line-height:1.45;margin:0 auto;max-width:440px;color:#334956}
.panel-section{position:relative;padding:20px 0}.panel-section::before,.panel-footer::before{content:'';position:absolute;left:8px;right:8px;top:0;height:3px;background:var(--native-divider) no-repeat center/100% 100%;opacity:.22}
.panel h2{font:18px Impress;color:#426478;margin:0 0 14px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;font:13px Impress;color:#577080}.controls b{font-size:23px;line-height:1.2;color:#243f50;margin-bottom:4px}
.mobile-instructions{font:12px Impress;color:#6d8795;margin:12px 0 0}.powers{grid-template-columns:1fr 1fr;gap:15px 24px;margin:0;text-align:left}.power{font-size:13px;color:#5a7484;line-height:1.35}.power b{font-size:16px;color:#284b62;margin-bottom:4px}.panel-footer{position:relative;padding-top:21px}.panel #start{min-width:220px;min-height:50px;font-size:25px;color:#233b47}.credit{font:10px Impress;color:#7b94a0;line-height:1.4;margin:14px 0 0}
@media(max-width:650px){.panel{border-width:21px;padding:9px 12px 10px;width:96vw;max-height:96dvh}.panel-header{padding:4px 0 16px}.panel .subtitle{font-size:14px}h1{font-size:34px;margin:7px 0 12px}.panel-section{padding:16px 0}.panel h2{font-size:16px;margin-bottom:12px}.controls{gap:7px;font-size:11px}.controls b{font-size:20px}.mobile-instructions{font-size:11px}.powers{gap:12px 16px}.power{font-size:11px}.power b{font-size:13px}.panel-footer{padding-top:17px}.panel #start{min-height:46px;font-size:23px}.credit{font-size:9px;margin-top:11px}}

.panel{width:min(760px,96vw);max-height:96dvh}.panel-header{padding:2px 0 12px}h1{margin:6px 0 12px}.controls{grid-template-columns:repeat(5,1fr);gap:10px}.control{display:flex;flex-direction:column;align-items:center;gap:8px}.control-keys{display:flex;justify-content:center;gap:4px;min-height:36px}.key{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:2px 6px;border:1px solid #668598;border-radius:6px;background:linear-gradient(#fff,#d5e3e9);box-shadow:0 3px #7893a2,inset 0 1px #fff;font:14px Impress;color:#28495b}.key svg,.gesture svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.gesture{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#e0eff4;color:#426c80}.gesture svg{width:30px;height:30px;stroke-width:2}
body[data-input=touch] .controls{grid-template-columns:repeat(4,1fr)}.powers{gap:10px;grid-template-columns:1fr 1fr}.power{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:10px;min-height:94px;padding:9px 12px;background:#e8f2f5;border:1px solid #bbd4df;border-radius:11px;font-size:13px}.power b{font-size:17px}.power-icon{display:inline-block;flex:none;width:72px;height:72px;background-repeat:no-repeat;background-position:center;background-size:contain}.power p{margin:4px 0;color:#4b6f80}.power time{display:inline-block;border-radius:12px;background:#d1e6ed;padding:3px 8px;color:#355c6f;font-size:12px}.power:last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}.chip .power-icon{width:44px;height:44px}.chip{gap:4px;font-size:13px;padding:5px 12px}.chip-label{max-width:90px}.chip .power-clock{width:35px;height:35px;margin:0;font-size:17px}.hint{display:flex;gap:10px;max-width:600px;margin-top:10px}.hint .control{flex-direction:row;gap:5px}.hint .key{height:24px;min-width:24px;font-size:11px;padding:0 4px}.hint .key svg{width:17px;height:17px}.hint .control-keys{min-height:24px;gap:3px}.hint .gesture{width:25px;height:25px}.hint .gesture svg{width:23px;height:23px}.hint .control span:last-child{font-size:11px}.hint .control:nth-child(5){display:none}
.panel[data-screen=result] .menu-only,.panel[data-screen=paused] .treasures{display:none}.panel-footer{display:flex;flex-direction:column;align-items:center;gap:10px}.panel-footer #watch-clip,.panel-footer #continue-run{font-size:18px;min-height:44px;min-width:240px}.panel-footer p{font:13px Impress;color:#355c6f;margin:0}.panel #message{color:#a22;font-size:14px}#run-stats dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}#run-stats dl>div{padding:15px 8px;background:#e9f2f6;border:1px solid #c4dbe5;border-radius:10px}#run-stats dt{color:#4b7185;font-size:14px}#run-stats dd{font:27px Mickey;color:#284e61;margin:8px 0 0}.clip-panel{width:min(1100px,96vw);height:min(790px,94dvh);display:flex;flex-direction:column;background:#132532;border:2px solid #719eae;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px #0007;color:#fff}.clip-panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.clip-panel h2{font:21px Impress;margin:0}.clip-panel header button{min-height:36px;font-size:16px}.clip-panel #clip-frame{flex:1;min-height:0;background:#0a1620}.clip-panel iframe{width:100%;height:100%;border:0}.clip-panel p{margin:10px 16px;font-size:15px}#clip-progress{width:calc(100% - 32px);margin:0 16px 14px;height:8px;accent-color:#ffc94d}#clip-dialog{z-index:10;background:#061420e8;backdrop-filter:none}
@media(max-width:650px){.panel-header{padding-bottom:8px}.panel h1{font-size:34px}.panel-section{padding:13px 0}.controls{gap:7px;font-size:10px}.control-keys{gap:3px}.key{min-width:25px;height:30px;font-size:11px;padding:1px 4px}.key svg{width:19px}.powers{gap:8px}.power{grid-template-columns:1fr;gap:3px;text-align:center;padding:7px 5px;min-height:139px}.power .power-icon{width:60px;height:60px;justify-self:center}.power b{font-size:13px;margin:0}.power p{font-size:11px;margin:4px 0}.power time{font-size:10px;padding:2px 6px}.power:last-child{width:calc(50% - 4px)}.hint{gap:5px;max-width:200px;flex-wrap:wrap}.hint .control{gap:3px}.hint .control span:last-child{font-size:9px}.hint .control:nth-child(4){display:none}.hint .gesture{height:23px;width:23px}.bottom button{min-width:143px}.chip{padding:4px 7px;gap:1px}.chip .power-icon{width:35px;height:35px}.chip-label{display:none}.chip .power-clock{height:29px;width:29px;font-size:15px}.active{max-width:235px}#run-stats dl{grid-template-columns:1fr 1fr;gap:9px}#run-stats dd{font-size:24px}#run-stats dt{font-size:12px}.clip-panel{height:94dvh}.clip-panel h2{font-size:16px}.clip-panel p{font-size:13px}}
@media(max-width:650px){.panel-footer{position:sticky;bottom:-10px;background:#d4f1fd;padding:12px 0 4px;z-index:1}.panel-footer::before{opacity:0}.panel .power:last-child{width:100%;grid-template-columns:60px 1fr;text-align:left;min-height:98px}.panel .power:last-child .power-icon{width:60px;height:60px}}
.panel{position:relative;isolation:isolate}.panel::before{content:'';position:absolute;inset:0;z-index:-1;background:#b9dce9;pointer-events:none}.panel-footer{background:#b9dce9}.power{background:#d5e7ee;border-color:#a3c5d5}.power time{background:#bfdce6}
.key{font:600 13px/1 Arial,Helvetica,sans-serif;text-shadow:none;letter-spacing:0;white-space:nowrap;font-synthesis:none}.hint .key{font:600 11px/1 Arial,Helvetica,sans-serif;height:26px;padding:0 6px;box-shadow:0 2px #7893a2,inset 0 1px #fff}.hint .control-keys{min-height:28px}.hint .control>span:last-child{font:12px/1.2 Arial,Helvetica,sans-serif;text-shadow:0 1px 2px #000;}
@media(max-width:650px){.key{font:600 11px/1 Arial,Helvetica,sans-serif}.hint .control>span:last-child{font-size:10px}}
#watch-clip{display:flex;gap:14px;width:100%;max-width:520px;padding:18px;background:linear-gradient(160deg,#f9fdff,#e5f2f7);border:1px solid #7ba9bd;border-radius:16px;box-shadow:0 4px 0 #85aebf,0 7px 16px #284e611a;text-align:left;color:#233b47}
#watch-clip:hover{background:linear-gradient(160deg,#fff,#d7edf6);border-color:#4d89a3;transform:translateY(-1px)}
#watch-clip:active{background:#d7edf6;transform:translateY(2px);box-shadow:0 2px 0 #85aebf}
#watch-clip:focus-visible{outline:3px solid #276d8e;outline-offset:4px}
#clip-clear-type{display:block;font:17px/1.3 Impress;text-align:left;color:#284e61;text-wrap:balance}
#clip-toon{width:72px;height:72px;flex:none;object-fit:contain;border:1px solid #c0dbe7;border-radius:50%;background:#e5f2f7;image-rendering:auto}
.clip-replay-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;overflow-wrap:anywhere}
#clip-toon-name{font:20px/1.2 Impress;color:#233b47}
#clip-clear-title{font:16px/1.35 Impress;color:#557688}
.clip-play{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#2a7190;color:#fff;font:14px Arial;padding-left:2px}
#watch-replay-again{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;min-height:42px;border:1px solid #759fb2;border-radius:10px;background:#e8f4f9;color:#284e61;text-decoration:none;font:16px Impress;box-shadow:0 2px 0 #91b5c5}
#watch-replay-again:hover{background:#fff;border-color:#4d89a3}#watch-replay-again:focus-visible{outline:3px solid #276d8e;outline-offset:3px}
#active{position:fixed;left:min(calc(50% + 38vh),calc(100% - 264px));right:auto;top:70%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;width:246px;max-width:none;max-height:62dvh;overflow:visible;pointer-events:none;z-index:2}
#active .chip{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;padding:12px;background:linear-gradient(145deg,#143949f5,#102a39f2);border:2px solid #55788b;border-image:none;border-radius:14px;box-shadow:none;color:#fff;text-shadow:none;transform-origin:right center}
#active .power-icon{width:76px;height:76px;background-size:contain}
#active .power-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
#active .chip-label{display:block;max-width:none;font:17px/1.2 Impress;color:#d5effa}
#active .power-clock{display:block;width:auto;height:auto;margin:0;background:none;font:700 25px/1 Arial,Helvetica,sans-serif;color:#ffdf82;font-variant-numeric:tabular-nums}
#active .power-meter{height:5px;overflow:hidden;background:#ffffff26;border-radius:5px}
#active .power-meter i{display:block;height:100%;background:#ffdc73;border-radius:inherit}
#active .expiring{border-color:#ffc36f}#active .expiring .power-meter i{background:#ffb16b}
@media(max-width:650px){#active{left:min(calc(50% + 30vh),calc(100% - 166px));top:60%;width:158px;gap:8px;max-height:54dvh}#active .chip{grid-template-columns:54px 1fr;gap:8px;padding:9px;border-radius:12px}#active .power-icon{width:54px;height:54px}#active .chip-label{font-size:13px}#active .power-clock{font-size:22px}#active .power-meta{gap:5px}}
@media(max-width:650px){#watch-clip{min-width:0;padding:13px;gap:11px}#clip-clear-type{font-size:16px}.clip-replay-item{padding:10px;gap:10px}#clip-toon{width:56px;height:56px}#clip-toon-name{font-size:17px}#clip-clear-title{font-size:14px}.clip-play{width:28px;height:28px;font-size:12px}}
/* Native model turntables: 96 views in an 8-by-12 atlas, 30 FPS. */
#fps-meter{position:fixed;left:12px;bottom:64px;z-index:100;pointer-events:none;padding:7px 10px;border:1px solid #ffffff40;border-radius:6px;background:#071521e6;color:#a9ffc1;font:600 13px/1.3 monospace;font-variant-numeric:tabular-nums;text-shadow:none}
#fps-meter[hidden]{display:none}
.hud{z-index:5}.sound-controls{position:relative;pointer-events:auto}
.sound-panel{display:none;position:absolute;top:100%;right:0;width:230px;padding:14px;background:#edf6fa;border:1px solid #92bbcd;border-radius:12px;box-shadow:0 6px 20px #102f4529;color:#284e61;text-align:left}
.sound-controls.sound-open .sound-panel{display:block}
.sound-panel h2{font:18px/1.2 Impress;margin:0 0 12px}.sound-panel label{display:grid;grid-template-columns:1fr auto;gap:6px;font:14px/1.2 Impress;margin:10px 0 0}.sound-panel output{font:12px/1.2 Arial;font-variant-numeric:tabular-nums}.sound-panel input{grid-column:1/-1;width:100%;margin:0;height:22px;accent-color:#2a7190;cursor:pointer}
.power-icon,#active .power-icon{background-image:var(--power-frames);background-size:800% 1200%;background-position:0 0;animation:power-turn-column calc(3.2s / 12) steps(8) infinite,power-turn-row 3.2s steps(12) infinite}
@keyframes power-turn-column{to{background-position-x:calc(100% * 8 / 7)}}
@keyframes power-turn-row{to{background-position-y:calc(100% * 12 / 11)}}
@media(prefers-reduced-motion:reduce){.power-icon,#active .power-icon{animation:none}}
.panel{border:2px solid #92bbcd;border-image:none;border-radius:22px;background:#edf6fa;padding:24px 28px;filter:none;box-shadow:0 12px 36px #102f4533;scrollbar-width:thin;scrollbar-color:#91b6c7 transparent}
.panel::before{content:none}.panel-footer{background:#edf6fa;position:static;padding-bottom:0}
.panel-section::before,.panel-footer::before{height:1px;background:#bdd8e5;opacity:1;left:0;right:0}
.key{box-shadow:none;background:#fff;border-color:#aec8d4}.power{background:#fff;border-color:#cee1e9}.power time{background:#e4f1f6}
#watch-clip,#watch-replay-again{box-shadow:none;border-color:#b6d2df;background:#e0eff6}
#watch-clip:active{box-shadow:none;transform:none}
#watch-replay-again{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;padding:16px;border-radius:16px;text-align:left}
.watch-heading{display:block;width:100%;font:19px/1.3 Impress;text-align:center;text-wrap:balance}
#again-toon{width:72px;height:72px;flex:none;object-fit:contain;border:1px solid #c0dbe7;border-radius:50%;background:#e5f2f7}
#again-toon-name{font:20px/1.2 Impress}#again-clear-title{font:16px/1.35 Impress;color:#557688}#again-clear-type{font:13px/1.3 Impress;color:#557688}
@media(max-width:650px){.panel{padding:16px 14px;border-width:1px;border-radius:16px}.panel-footer{position:static;background:#edf6fa;padding:14px 0 0}#watch-replay-again{padding:13px}.watch-heading{font-size:16px}#again-toon{width:56px;height:56px}#again-toon-name{font-size:17px}#again-clear-title{font-size:14px}}

/* Shared dark palette for menus, results, replay cards and volume settings. */
:root{--menu-bg:#142b38;--menu-card:#1e3948;--menu-border:#416171;--menu-text:#edf5fa;--menu-muted:#b5ccd9;--menu-accent:#ffe18c}
.overlay{background:#06121cb3}
.panel{background:var(--menu-bg);border-color:var(--menu-border);color:var(--menu-text);box-shadow:0 12px 36px #020b1455;scrollbar-color:#52768a var(--menu-bg)}
.panel-footer{background:var(--menu-bg)}
.panel h1{color:#ff9381}.panel h2,.panel .controls b{color:#d5eaf4}
.panel .subtitle,.panel .controls,.panel .mobile-instructions,.panel .credit,.panel-footer p{color:var(--menu-muted)}
.panel-section::before,.panel-footer::before{background:#365565}
.panel .key,.panel .gesture{background:#294a5c;border-color:#55788b;color:#e2f2fa}
.panel .power{background:var(--menu-card);border-color:var(--menu-border);color:var(--menu-muted)}
.panel .power b{color:var(--menu-text)}.panel .power p{color:var(--menu-muted)}
.panel .power time{background:#2b4d5e;color:var(--menu-accent)}
#run-stats dl>div{background:var(--menu-card);border-color:var(--menu-border)}
#run-stats dt{color:var(--menu-muted)}#run-stats dd{color:var(--menu-accent)}
.panel #message{color:#ffb5a6}
#watch-clip,#watch-replay-again{background:var(--menu-card);border-color:var(--menu-border);color:var(--menu-text)}
#watch-clip:hover,#watch-replay-again:hover{background:#294858;border-color:#7599ac}
#watch-clip:active,#watch-replay-again:active{background:#213e4e}
#clip-clear-type,.watch-heading{color:var(--menu-accent)}
#clip-toon,#again-toon{background:#355565;border-color:#658392}
#clip-toon-name,#again-toon-name{color:var(--menu-text)}
#clip-clear-title,#again-clear-title,#again-clear-type{color:var(--menu-muted)}
#watch-clip:focus-visible,#watch-replay-again:focus-visible{outline-color:var(--menu-accent)}
.clip-panel{background:var(--menu-bg);border-color:var(--menu-border);color:var(--menu-text)}
.clip-panel p{color:var(--menu-muted)}
.sound-panel{background:var(--menu-bg);border-color:var(--menu-border);color:var(--menu-text);box-shadow:0 6px 20px #020b1444}
.sound-panel input{accent-color:#8ccbdd}

/* Center the desktop header on the same line as the jellybean jar. */
@media(min-width:651px){.route{top:68px;transform:translate(-50%,-50%)}
  .panel #start{color:var(--menu-text)}
}
@media(min-width:651px) and (max-width:1050px){.route{top:144px}#toast{top:190px}}
.stat:not(.bean-jar){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.overlay{z-index:20}#clip-dialog{z-index:30}
body:has(#overlay:not(.hidden)) .hud{z-index:21}
body:has(#overlay:not(.hidden)) .hud .stat,body:has(#overlay:not(.hidden)) .hud #pause{visibility:hidden}
body:has(#overlay:not(.hidden)) .route,body:has(#overlay:not(.hidden)) .bottom,body:has(#overlay:not(.hidden)) #active{visibility:hidden}
.panel #start{color:var(--menu-text)}
.panel[data-screen=menu] h1{color:#ffcc54}
.panel #start{background:#ffcc54;border-color:#e5ad32;color:#17384d}
.panel #start:hover{background:#ffdb7b;border-color:#f0bd49}
.panel #start:active{background:#edb83e;border-color:#d99f25}

/* One replay card and one shared row for the run actions. */
.panel-footer #watch-clip,.panel-footer #watch-replay-again{display:grid;grid-template-columns:72px minmax(0,1fr) 34px;align-items:center;gap:14px;width:100%;max-width:520px;min-width:0;padding:16px;border-radius:12px;text-align:left}
.panel-footer .watch-heading{grid-column:1/-1;font:17px/1.3 Impress;text-align:center;text-wrap:balance}
#watch-clip > #clip-clear-type{text-align:center}
#watch-replay-again .clip-replay-copy{grid-column:2/-1}
.run-actions{display:flex;justify-content:center;gap:12px;width:100%;max-width:520px}
.panel .run-actions #start,.panel .run-actions #continue-run{flex:1;min-width:0;max-width:254px;min-height:50px;padding:10px 16px;border:2px solid #c58d1c;border-image:none;border-radius:10px;background:#ffcc54;color:#17384d;font:23px/1.2 Impress;box-shadow:none}
.panel .run-actions:has(#continue-run.hidden) #start{flex:0 1 220px}
.panel .run-actions #start:hover,.panel .run-actions #continue-run:hover{background:#ffdb7b;border-color:#c58d1c}
.panel .run-actions #start:active,.panel .run-actions #continue-run:active{background:#edb83e;border-color:#b67b16}
.panel[data-screen=paused] #start:focus-visible{outline:none;background:#ffdb7b;border-color:#b67b16}
.panel[data-screen=paused] .result-only{display:none}
.panel[data-screen=paused] #run-stats dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel #quit-run{min-height:44px;min-width:220px;padding:10px 16px;border:1px solid var(--menu-border);border-image:none;border-radius:10px;background:var(--menu-card);color:var(--menu-text);font:18px/1.2 Impress;box-shadow:none}
.panel #quit-run:hover{background:var(--menu-bg);border-color:var(--menu-accent)}
@media(max-width:650px){.panel[data-screen=paused] #run-stats dl{gap:6px}.panel[data-screen=paused] #run-stats dd{font-size:21px}.panel[data-screen=paused] #run-stats dl>div{padding:12px 3px}}
.panel-header{position:relative}
.panel-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;column-gap:10px}
.panel-heading h1{grid-column:2;grid-row:1;margin:0}
.menu-sound-controls{grid-column:3;grid-row:1;position:relative;z-index:1}
.menu-sound-controls .sound-panel{max-width:calc(100vw - 72px)}
#sound,.hud #sound{width:44px;height:44px;min-width:44px;min-height:44px;padding:9px}
#sound svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sound .sound-muted,#sound.sound-off .sound-waves{display:none}#sound.sound-off .sound-muted{display:block}
.sound-panel{top:calc(100% - 1px);z-index:1;border-radius:12px 0 12px 12px}
.sound-panel h2{display:flex;align-items:center;justify-content:space-between;gap:12px}
#sound-muted-status{font:14px/1.2 Impress;color:var(--menu-accent)}
.sound-controls:has(#sound.sound-off) .sound-panel label:has(input[type=range]){opacity:.5}
.sound-panel input:disabled{cursor:not-allowed}
.sound-controls.sound-open #sound{position:relative;z-index:2;background:var(--menu-bg);border-color:var(--menu-border);border-bottom-color:transparent;border-radius:10px 10px 0 0}
.sound-controls.sound-open #sound::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--menu-bg)}
.sound-controls.sound-open #sound:focus-visible{outline-offset:-4px;outline-width:2px}
.sound-panel .mute-control{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--menu-border);cursor:pointer}
#sound-mute{grid-column:auto;width:18px;height:18px;margin:0;cursor:pointer}
@media(max-width:650px){
  .hud .sound-panel{border-radius:12px}
  .panel-heading{grid-template-columns:minmax(0,1fr) 44px;column-gap:8px}
  .panel-heading h1{grid-column:1}.menu-sound-controls{grid-column:2}
  .panel-footer #watch-clip,.panel-footer #watch-replay-again{grid-template-columns:56px minmax(0,1fr) 28px;padding:12px;gap:10px}
  .panel-footer .watch-heading{font-size:15px}.clip-play{width:28px;height:28px}
  .run-actions{gap:10px}.panel .run-actions #start,.panel .run-actions #continue-run{font-size:19px;padding:10px 8px}
}

/* Gameplay belongs to the track; secondary settings and records live in the menu. */
canvas{height:100dvh;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hud{inset:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) auto calc(12px + env(safe-area-inset-left));display:grid;grid-template-columns:44px minmax(0,1fr) 148px;grid-template-rows:32px auto;gap:5px;height:auto;align-items:start}
.hud>div{display:contents}
.hud .stat{min-width:0;width:100%;height:32px;padding:4px 10px;border-radius:8px;background:#102a39df;color:#fff;text-shadow:none}
.hud .stat small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hud .stat b{font:700 22px/1 Arial,Helvetica,sans-serif;color:#fff;text-shadow:none;font-variant-numeric:tabular-nums}
.hud .score-panel{grid-column:3;grid-row:1;display:flex;justify-content:flex-end}
.hud .bean-jar{grid-column:3;grid-row:2;justify-self:end;width:92px;height:112px;min-width:0;padding:0;background:none;border-radius:0}
.hud .bean-jar-art{inset:0;width:100%;height:100%}
.hud .bean-jar b{position:absolute;top:48%;left:0;right:0;font:29px/1 Mickey;color:#ffff00;text-shadow:1px 1px #000;text-align:center}
.hud .best-panel{display:none}
.hud #pause{grid-column:1;grid-row:1/3;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border-radius:10px;background:#102a39df}
#pause svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
.best-record{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.best-record h2{margin:0}.best-record strong{font:700 26px/1.2 Arial,Helvetica,sans-serif;color:var(--menu-accent);font-variant-numeric:tabular-nums}
.panel .powers{grid-template-columns:1fr;gap:5px}
.panel .power,.panel .power:last-child{grid-column:auto;justify-self:stretch;width:100%;min-height:0;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:5px 9px;text-align:left;border-radius:8px}
.panel .power .power-icon,.panel .power:last-child .power-icon{width:36px;height:36px;justify-self:center}
.panel .power>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
.panel .power b{font-size:15px;line-height:1.2;margin:0;grid-column:1;grid-row:1}.panel .power p{font-size:12px;line-height:1.2;margin:2px 0 0;grid-column:1/-1;grid-row:2}
.panel .power time{grid-column:2;grid-row:1;font:11px/1.2 Arial;padding:2px 5px;white-space:nowrap}
@media(max-width:650px){
  .panel .powers{gap:4px}
  .panel .power,.panel .power:last-child{grid-template-columns:30px minmax(0,1fr);gap:7px;padding:4px 8px}
  .panel .power .power-icon,.panel .power:last-child .power-icon{width:30px;height:30px}
  .panel .power>div{column-gap:6px}
  .panel .power b{font-size:14px;line-height:1.15}
  .panel .power p{font-size:11.5px;line-height:1.2}
  .panel .power time{font-size:10px}
}
.route{top:calc(16px + env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:max-content;min-width:0;max-width:350px;padding:8px 12px;gap:12px;border-radius:9px;background:#102a39c9;color:#fff}
.route-label{display:none}.route strong{font:16px/1.2 Impress;color:#fff}.route-next{font:12px/1.2 Impress;color:#bfd7e3}#distance{font:12px/1 Arial,Helvetica,sans-serif;color:#bfd7e3;white-space:nowrap}.route-track{display:none}
#toast{top:calc(100px + env(safe-area-inset-top));max-width:calc(100vw - 24px)}
#active{transform:none;translate:0 -50%;width:194px}
#active .chip{grid-template-columns:52px 1fr;padding:8px;gap:8px;border-width:1px;border-radius:10px}
#active .power-icon{width:52px;height:52px}#active .chip-label{font-size:14px}#active .power-clock{font-size:20px}
.bottom{bottom:calc(14px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right))}
.bottom #guard{min-width:0;min-height:48px;padding:6px 12px;gap:8px;background:#102a39df;font-size:16px}
.guard-art{width:34px;height:34px;background:var(--native-boost-shield) no-repeat center/contain}
#guard-count{font:700 17px/1 Arial;color:#ffe18c}
@media(max-width:1050px) and (min-width:651px){.route{left:70px;transform:none;max-width:calc(100vw - 250px)}.route-next{display:none}}
@media(max-width:650px){
  .hud{grid-template-columns:44px minmax(0,1fr) 134px;column-gap:8px;row-gap:4px}
  .hud .stat b{font-size:21px}.hud .bean-jar{width:75px;height:91px}.hud .bean-jar b{font-size:20px}
  .route{top:calc(66px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));transform:none;max-width:calc(100vw - 170px);padding:6px 8px;flex-direction:column;align-items:flex-start;gap:4px;background:#102a3999}
  .route strong{font-size:14px}.route-next{display:none}#distance{font-size:10px}
  #toast{top:calc(120px + env(safe-area-inset-top));font-size:16px}
  .hint{display:none}
  #active{left:calc(12px + env(safe-area-inset-left));right:auto;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));translate:none;width:calc(100% - 112px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:300px;max-height:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:6px}
  #active .chip{position:relative;display:flex;flex-direction:column;gap:2px;width:48px;height:66px;padding:3px 4px 7px;transform-origin:bottom left}
  #active .power-icon{width:36px;height:36px}
  #active .power-meta{gap:0;width:100%;text-align:center}#active .chip-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #active .power-clock{font:700 12px/1 Arial;color:#ffe18c;animation:none}
  #active .power-meter{position:absolute;bottom:3px;left:4px;right:4px;height:3px}
  .bottom{justify-content:flex-end}
  .bottom #guard{position:relative;width:68px;min-width:68px;height:68px;padding:5px;flex-direction:column;gap:1px;border-radius:12px}
  .guard-art{width:36px;height:36px}#guard-label{font:10px/1.1 Arial}#guard-count{position:absolute;right:4px;top:4px;font-size:12px;background:#173b4e;padding:3px 5px;border-radius:8px}
  .menu-sound-controls .sound-panel{left:auto;right:0;transform:none}
  .sound-panel{width:min(280px,calc(100vw - 24px));padding:18px}
  .sound-panel label{font-size:16px;gap:8px;margin-top:14px}.sound-panel input{height:30px}
}

/* Warm paper colors echo the native HUD artwork. */
:root{--hud-card:#f0e3c4;--hud-border:#ad9265;--hud-text:#392d1e;--hud-muted:#695538;--hud-accent:#8a581f}
.hud .score-panel,.hud #pause,.route,#active .chip,.bottom #guard{background:var(--hud-card);border:1px solid var(--hud-border);color:var(--hud-text);text-shadow:none}
.hud .score-panel b,.route strong,#active .chip-label{color:var(--hud-text)}
.route-next,#distance{color:var(--hud-muted)}
#active .power-clock,#guard-count{color:var(--hud-accent)}
#active .power-meter{background:#cbb994}
#active .power-meter i{background:#9c743b}
#active .expiring{border-color:#b2662a}#active .expiring .power-meter i{background:#b2662a}
.hud #pause:hover,.bottom #guard:hover{background:#f8edd5;border-color:#947546}
.hud #pause:active,.bottom #guard:active{background:#e2cea4}
.hud #pause:focus-visible,.bottom #guard:focus-visible{outline-color:#73572e}
@media(max-width:650px){#guard-count{background:#e0cea7}}

/* HUD lettering shares the logo face; beans retain the native compiled SignFont. */
.hud .score-panel b,.route strong,.route-next,#distance,#active .chip-label,#active .power-clock,.bottom #guard,#guard-label,#guard-count,#toast{font-family:Mickey;font-weight:400;font-variant-numeric:normal}
.hud .bean-jar{--jar-height:112px}
.hud .bean-jar b{display:flex;justify-content:center;top:68.8977%;height:1.5em;font-size:calc(var(--jar-height) * .340158 * var(--bean-fit,1));transform:translateY(-1.25em);color:transparent;text-shadow:none}
.bean-digit{position:relative;display:inline-block;flex:none;height:1.5em;color:transparent;white-space:pre}
.bean-digit::before{content:'';position:absolute;inset:0 auto 0 -.1em;width:1.25em;background:url('../assets/fonts/runner_BeanDigits.c146a495d6fc6ab4.png') no-repeat;background-size:13.75em 1.5em;background-position:var(--glyph-offset) 0;pointer-events:none}
.bottom{justify-content:flex-end}
@media(max-width:650px){.hud .bean-jar{--jar-height:91px}}

/* Give menu sections room while keeping the cards compact. */
.panel[data-screen=menu]{padding-top:18px;padding-bottom:18px}
.panel[data-screen=menu] .panel-header{padding-top:0;padding-bottom:16px}
.panel[data-screen=menu] .panel-heading{margin:3px 0 8px}
.panel[data-screen=menu] h1{margin:0}
.panel[data-screen=menu] .panel-section{padding:20px 0}
.panel[data-screen=menu] .panel-section h2{margin-bottom:12px}
.panel[data-screen=menu] .best-record{gap:5px}
.panel[data-screen=menu] .best-record h2{margin:0}
.panel[data-screen=menu] .control{gap:6px}
.gesture-tap svg{width:24px;height:24px}
.panel[data-screen=menu] .panel-footer{padding-top:18px}
@media(max-width:650px){
  .panel[data-screen=menu]{padding:12px}
  .panel[data-screen=menu] .panel-header{min-height:44px;padding-top:0;padding-bottom:14px}
  .panel[data-screen=menu] .panel-heading{margin:0}
  .panel[data-screen=menu] h1{margin:0;font-size:clamp(24px,7.8vw,34px);white-space:nowrap}
  .panel[data-screen=menu] .panel-section{padding:18px 0}
  .panel[data-screen=menu] .panel-section h2{font-size:14px;line-height:1.2;margin-bottom:12px}
  .panel[data-screen=menu] .best-record{gap:3px}
  .panel[data-screen=menu] .best-record h2{margin:0}
  .panel[data-screen=menu] .best-record strong{font-size:22px}
  .panel[data-screen=menu] .control-guide h2{display:none}
  .panel[data-screen=menu] .controls{gap:6px;font-size:10px;line-height:1.2}
  .panel[data-screen=menu] .control{gap:4px}
  .panel[data-screen=menu] .control-keys{min-height:30px}
  .panel[data-screen=menu] .gesture{width:28px;height:28px}
  .panel[data-screen=menu] .gesture svg{width:26px;height:26px}
  .panel[data-screen=menu] .gesture-tap svg{width:22px;height:22px}
  .panel[data-screen=menu] .key{height:26px}
  .panel[data-screen=menu] .panel-footer{padding-top:18px}
  .panel[data-screen=menu] .run-actions #start{min-height:44px;padding:8px;font-size:19px}
}

/* Solid colored surfaces distinguish controls, treasures, run totals and clips. */
.panel .controls .key,.panel .controls .gesture{background:#4a83a8;border:1px solid #8cc9ea;color:#fff;box-shadow:none}
.panel .controls .key{box-shadow:0 2px #244d69,inset 0 1px #ffffff26}
.panel[data-screen=menu] .power{background:#4d4f84;border-color:#9495b5}
.panel .power p{color:#edf5fa}
.panel[data-screen=menu] .app-actions{display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,220px) minmax(44px,1fr);align-items:center;gap:12px;max-width:none}
.panel[data-screen=menu] .app-actions #start{grid-column:2;width:100%}
.app-version{grid-column:1;justify-self:start;font:11px/1.4 Impress;color:var(--menu-muted);white-space:nowrap}
.panel-footer .menu-disclaimer{font:11px/1.4 Impress;color:var(--menu-muted);text-align:center}
.panel:not([data-screen=menu]) .menu-disclaimer{display:none}
.pwa-actions{grid-column:3;justify-self:end;display:flex;align-items:center}
.panel:not([data-screen=menu]) .app-version,.panel:not([data-screen=menu]) .pwa-actions,.panel:not([data-screen=menu]) #pwa-install-help{display:none}
.panel #install-app{width:44px;min-height:44px;min-width:0;padding:10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--menu-muted);box-shadow:none}
.panel #install-app svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel #install-app:hover{background:#ffffff09;color:var(--menu-text);border-color:transparent}
.panel #pwa-install-help{align-self:flex-end;max-width:320px;text-align:right;font:12px/1.4 Impress;color:var(--menu-muted)}
#run-stats dl>div{background:#625987;border-color:#a298c6}
#run-stats dt{color:#e0dbf3}
#watch-clip,#watch-replay-again{background:#345f80;border-color:#80aacb}
#watch-clip:hover,#watch-replay-again:hover{background:#407397;border-color:#a3c9e4}
#watch-clip:active,#watch-replay-again:active{background:#2c5271}

/* The top layer keeps volume settings outside the panel's scrollable area. */
.panel[data-screen=menu] .best-record{flex-direction:row;gap:12px}
.panel[data-screen=menu] .powers{--treasure-gap:8px;--treasure-card-width:240px;width:min(100%,calc(2 * var(--treasure-card-width) + var(--treasure-gap)));margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--treasure-gap)}
.panel[data-screen=menu] .power>div{grid-template-columns:minmax(0,1fr)}
.panel[data-screen=menu] .power:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - var(--treasure-gap))/2)}
@media(max-width:650px){
  .panel[data-screen=menu] .powers{--treasure-card-width:164px}
}
#sound-panel[popover]{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;transform:none}
#sound-panel[popover]::backdrop{background:transparent;pointer-events:none}

/* Community clips keep a landscape canvas on portrait and landscape phones. */
.clip-panel{width:min(1100px,96vw,calc((94dvh - 112px) * 16 / 9));height:auto;max-height:94dvh}
.clip-panel #clip-frame{flex:none;aspect-ratio:16/9;width:100%}
#clip-progress{display:none}
@media(max-width:650px){.clip-panel{height:auto}}
.route-jump-menu{position:fixed;z-index:5000;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));padding:12px;border:2px solid #c69744;border-radius:12px;background:#f4e6c6;color:#332611;box-shadow:0 4px 16px #0005;font:14px Arial,sans-serif;pointer-events:auto}
.route-jump-menu[hidden]{display:none}
.route-jump-menu header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.route-jump-menu header button{padding:0 8px;font-size:22px;border:0;background:transparent;color:inherit}
.route-jump-menu label{display:block;margin:4px 0}
.route-jump-menu select{width:100%;min-height:36px;font:inherit;color:inherit;background:#fff9ec;border:1px solid #b99860;border-radius:6px}
.route-jump-menu p{margin:8px 0;font-size:12px}
.route-jump-menu .route-jump-action{width:100%;padding:8px;background:#d5a647;border:1px solid #92651d;border-radius:6px;color:#332611;font-weight:bold}
.route-jump-menu output{display:block;margin-top:6px;font-size:12px}
.cog-suit-book[hidden],.cog-suit-grid article[hidden],.suit-save-note[hidden],.cog-suit-tracker[hidden],.cog-suit-tracker article[hidden]{display:none}
.panel .cog-suit-book{padding:10px 0}.panel .cog-suit-book h2{font-size:14px;margin-bottom:7px}
.cog-suit-grid{display:flex;justify-content:center;align-items:stretch;gap:8px;width:100%;text-align:center}
.cog-suit-grid,.cog-suit-tracker{--suit-card:#5d3c78;--suit-border:#aa85cb}
.cog-suit-grid article,.cog-suit-tracker article{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--suit-card);border:1px solid var(--suit-border);border-radius:10px;overflow:hidden;color:#fff6e9}
[data-department=cashbot]{--suit-card:#244f46;--suit-border:#6ba08a}
[data-department=lawbot]{--suit-card:#394c72;--suit-border:#8399c1}
[data-department=bossbot]{--suit-card:#63513d;--suit-border:#af9873}
.cog-suit-grid article{flex:1 1 0;min-width:0;max-width:180px;display:grid;grid-template-columns:minmax(48px,68px) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:2px;row-gap:0;padding:0;box-shadow:inset 0 1px #ffffff12,0 2px 5px #0002}
.cog-suit-grid article .cog-portrait{grid-column:1;grid-row:1/3;width:100%;max-width:68px;align-self:center;border-radius:9px 0 0 9px}
.cog-portrait{display:block;width:min(50px,100%);aspect-ratio:1;border-radius:4px;background-size:800% 100%;background-repeat:no-repeat}
.cog-suit-grid .suit-rank{font:12px/1.1 Impress;grid-column:2;grid-row:1;align-self:end;overflow-wrap:anywhere;padding:4px 4px 0}.cog-suit-grid .suit-level{grid-column:2;grid-row:2;align-self:start;margin-top:2px;padding:0 4px 4px}.suit-maxed{position:absolute;bottom:3px;left:6px;font:8px/1 Impress;color:#ffe29a}
.suit-level{display:flex;align-items:baseline;justify-content:center;gap:3px;white-space:nowrap;color:inherit}.suit-level span{font:12px/1.1 Impress}.suit-level b{font:700 24px/1.1 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums}
.suit-save-note{margin:10px 0 0;text-align:left;font-size:11px;color:var(--menu-muted);line-height:1.4}
.cog-suit-tracker{position:fixed;top:calc(174px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:2;width:62px;display:grid;gap:5px;pointer-events:none;text-align:center}
.cog-suit-tracker article{gap:2px;padding:0 0 4px;border-radius:8px}
.cog-suit-tracker .cog-portrait{width:100%;border-radius:7px 7px 0 0}.cog-suit-tracker .suit-level b{font-size:19px}.cog-suit-tracker .suit-level span{font-size:10px}
@media(max-width:650px){.cog-suit-grid{gap:4px}.cog-suit-grid article{display:flex;padding:0 0 5px;gap:0}.cog-suit-grid article .cog-portrait{width:100%;max-width:none;border-radius:9px 9px 0 0}.cog-suit-grid .suit-rank{font-size:10px;line-height:1.1;min-height:2.2em;display:flex;align-items:center;justify-content:center;padding:0}.cog-suit-grid .suit-level{margin:0}.cog-suit-grid .suit-level b{font-size:24px}.cog-suit-grid .suit-maxed{display:none}.cog-suit-tracker{top:calc(152px + env(safe-area-inset-top));width:54px}.cog-suit-tracker .suit-level b{font-size:17px}}
@media(max-height:500px) and (min-width:600px){.cog-suit-tracker{top:calc(12px + env(safe-area-inset-top));right:calc(166px + env(safe-area-inset-right));grid-template-columns:repeat(2,minmax(0,1fr));width:104px}.cog-suit-tracker .suit-level b{font-size:17px}}
@media(max-width:600px){.route-jump-menu{top:145px}}
/* Keep the scroll track inside the rounded panel, clear of every corner. */
.panel{padding:10px;overflow:hidden}
.panel-scroll{max-height:calc(96dvh - 24px);overflow:auto;padding:12px 16px;scrollbar-width:thin;scrollbar-color:#52768a transparent;scrollbar-gutter:stable}
.panel-scroll::-webkit-scrollbar{width:8px}.panel-scroll::-webkit-scrollbar-track{margin-block:12px}.panel-scroll::-webkit-scrollbar-thumb{background:#52768a;border:2px solid var(--menu-bg);border-radius:8px}
@media(max-width:650px){.panel{padding:8px}.panel-scroll{padding:8px 4px;max-height:calc(96dvh - 18px)}}
@media(max-width:650px){.cog-suit-grid article{max-width:90px}.cog-suit-grid .suit-rank,.cog-suit-grid .suit-level{align-self:center;width:100%}}