/* Runner layer on top of the Rainwalk interface: same glass, small caps and mint accent. */
body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
body:not(.in-menu) aside h1,body:not(.in-menu) aside>p{display:none}
body.in-menu .objective{display:none}
body:not(.in-menu) .objective{margin-top:12px}
#distance{font-family:Manrope,sans-serif;font-size:30px!important;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#progress{font-variant-numeric:tabular-nums}
#menu,#over,#pausebox{position:absolute;z-index:6;background:#0f1f2ce6;border:1px solid #ffffff2a;border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px #0008;padding:26px 26px 24px}
#menu{right:30px;top:96px;bottom:110px;width:min(400px,calc(100vw - 60px));display:flex;flex-direction:column;overflow:hidden}
#menu small,#over small,#pausebox small{font-size:9px;letter-spacing:2.4px;color:#9fc4bb}
#menu h2,#over h2,#pausebox h2{font-family:Manrope,sans-serif;font-weight:500;font-size:26px;letter-spacing:-.6px;line-height:1.2;margin:8px 0 6px}
#menu>p,#over p{font-size:12px;color:#aebfca;line-height:1.6;margin:0 0 14px}
#cities{display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;min-height:0;padding-right:2px;overscroll-behavior:contain}
.city{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name jp" "blurb blurb" "best best";gap:3px 10px;text-align:left;padding:13px 15px 12px 18px;border-radius:12px;background:linear-gradient(100deg,color-mix(in srgb,var(--a) 70%,#132836),#132836 70%);border-color:#ffffff1c;line-height:1.35;transition:border-color .15s,transform .15s;overflow:hidden}
.city::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--b);opacity:.55}
.city:hover,.city:focus-visible{border-color:#9fd8c4aa;transform:translateY(-1px)}
.city.here{border-color:#b6e1cb;background:linear-gradient(100deg,color-mix(in srgb,var(--a) 80%,#173b3a),#173b3a 75%)}
.city.here::before{opacity:1}
.city small{grid-area:jp;font-size:12px;letter-spacing:1px;color:#d9cfb5;font-family:serif}
.city strong{grid-area:name;font-size:15px;font-weight:600}
.city span{grid-area:blurb;font-size:12px;color:#aebfca}
.city em{grid-area:best;font-style:normal;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#8fc9b5;margin-top:4px}
button.primary{background:#2c5b55e8;border-color:#b6e1cb88;font-weight:600;letter-spacing:.5px;padding:13px 20px;font-size:14px}
button.primary:hover{background:#376b64}
#run{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px}
#run kbd{margin:0}
#over,#pausebox{left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));text-align:center}
#over-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 12px}
#over-stats div{background:#132836;border:1px solid #ffffff14;border-radius:10px;padding:12px 6px}
#over-stats b{display:block;font-family:Manrope,sans-serif;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
#over-stats span{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#9fb3be}
#over-best{color:#bde5d7!important}
.row{display:flex;gap:10px;justify-content:center;margin-top:14px}
.row button{flex:1}
#coach{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(560px,calc(100vw - 32px));pointer-events:none}
#coach span{font-size:11px;padding:7px 11px;border-radius:20px;background:#10202dcc;border:1px solid #ffffff22;color:#d3e2df}
#coach span.count{color:#9fc4bb;font-variant-numeric:tabular-nums}
/* When the yokai are close the edges of the screen go cold and dark. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,#1a0610cc 100%);opacity:0;transition:opacity .35s;z-index:2}
body.danger::after{opacity:1}
body.in-menu .controls{opacity:.7}
#pause{min-width:64px}
@media(max-width:850px){#menu{right:16px;left:16px;width:auto;top:auto;bottom:16px;max-height:58vh;padding:20px 18px 18px}#menu>p{display:none}#menu h2{font-size:21px}
 #cities{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:4px;flex:none}
 .city{flex:0 0 72%;scroll-snap-align:start;min-height:112px;align-content:start}
 body.in-menu footer,body.in-menu aside{display:none}}
@media(pointer:coarse){#coach{bottom:84px}footer .controls{display:none}#over h2,#pausebox h2{font-size:22px}aside{left:20px;top:78px}.live{display:inline}#pause{min-width:auto}}
@media(max-height:500px){#menu{top:12px;bottom:12px;right:16px;left:auto;width:min(380px,48vw);max-height:none}#menu>p{display:none}#cities{flex-direction:column;overflow-y:auto;overflow-x:hidden}.city{flex:none;min-height:0}body.in-menu aside{display:block;top:auto;bottom:20px}body.in-menu aside h1{display:block;font-size:24px}header{padding:14px 18px}footer{padding:10px 18px}aside{top:64px}#over,#pausebox{padding:18px}#over-stats{margin:8px 0}}
body.in-menu #pause{display:none}
@media(max-width:850px),(pointer:coarse){#run kbd{display:none}}
@media(max-width:600px){footer .controls{display:none}}
@media(max-height:500px){#menu{padding:14px 16px}#menu h2{font-size:18px;margin:4px 0 8px}#cities{flex:1 1 auto;min-height:0}#run{margin-top:10px;padding:10px}.city{padding:9px 12px}.city span{display:none}}
.brand .kanji{font-family:serif;font-weight:600;letter-spacing:2px;color:#e7d7b2;margin-left:4px}
/* Narrow phones: keep the logo on one line and clear of the HUD below it. */
@media(max-width:600px){.brand{font-size:15px;letter-spacing:3px;white-space:nowrap}.brand span{margin-top:6px}.live{display:none!important}.top button{white-space:nowrap}aside{top:92px}}