/* The page around the game in the HUD's marker look: the loading screen, the
   legal and support links and the privacy note. Colours follow the menu's
   day/night choice (html[data-theme], set by the game). */
:root{
  --marker-paper:#fffdf6;--marker-ink:#1f1a17;--marker-shadow:#1f1a17;--marker-hover:#fff4c2;
  --marker-muted:#6e655c;--marker-swipe:#ffc93c;--marker-swipe-stripe:#ffd866;--marker-underline:#8fe36a;
  --marker-green:#7ed957;--marker-green-shine:#a8e98c;--marker-pink:#ff7ac3;--marker-focus:#ff7a1a;
  --marker-hatch:#efe7d3;
  --shell-sky:#5ebcff;--shell-horizon:#4ed3d7;--shell-mist:#c9ecff;
  --shell-floor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Crect width='120' height='48' fill='%23fff2b8'/%3E%3Cpath d='M0 1H120M0 25H120M1 1V25M61 1V25M31 25V49M91 25V49' stroke='%23d2b884' stroke-width='3'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --marker-paper:#272b36;--marker-ink:#f3ead6;--marker-shadow:#0000008c;--marker-hover:#343a49;
  --marker-muted:#b8b0a2;--marker-swipe:#c8901a;--marker-swipe-stripe:#d9a12e;--marker-underline:#3b8a2e;
  --marker-hatch:#323746;
  --shell-sky:#071a2a;--shell-horizon:#0f3b45;--shell-mist:#173a52;
  --shell-floor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Crect width='120' height='48' fill='%23544b38'/%3E%3Cpath d='M0 1H120M0 25H120M1 1V25M61 1V25M31 25V49M91 25V49' stroke='%2334302a' stroke-width='3'/%3E%3C/svg%3E");
}
/* The fonts are in marker-fonts.css. */

*{box-sizing:border-box}
body{margin:0;background:var(--shell-sky);color:var(--marker-ink);font:16px/1.5 system-ui,sans-serif}
[hidden]{display:none!important}
#game{position:fixed;inset:0}
#canvas{display:block;width:100%;height:100%;outline:0}

/* Loading screen: the menu's sky and brick floor, the logo, and a paper card
   with the runner, the bar and the percentage. */
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.6vh,26px);padding:24px 16px 32px;overflow:hidden;isolation:isolate;text-align:center;color:var(--marker-ink);font:800 16px/1.3 "Fatter Marker","Comic Sans MS","Chalkboard SE",cursive;background:linear-gradient(var(--shell-sky) 0 66%,var(--shell-horizon) 72.4%,var(--shell-mist) 72.6%)}
#loading::before{content:"";position:absolute;z-index:-2;left:-60%;right:-60%;top:72.5%;height:62%;background:var(--shell-floor) 50% 0/120px 48px;transform-origin:50% 0;transform:perspective(300px) rotateX(58deg);pointer-events:none}
#loading::after{content:"";position:absolute;z-index:-1;inset:72.5% 0 auto;height:9%;background:linear-gradient(var(--shell-mist),transparent);pointer-events:none}

#loading-logo{margin:0;line-height:0}
.loading-logo{display:block;width:min(600px,84vw);height:auto;overflow:visible}
.loading-logo text{font-family:"Fatter Logo","Arial Black",sans-serif;font-size:98px;font-weight:400;font-synthesis:none;fill:var(--marker-ink)}
.loading-logo .swipe{fill:var(--marker-swipe)}
.loading-logo .swipe-stripe{fill:var(--marker-swipe-stripe)}
.loading-logo .ink-line{fill:none;stroke:var(--marker-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.loading-logo .star{fill:var(--marker-pink);stroke:var(--marker-ink);stroke-width:2;stroke-linejoin:round}

/* Only the paper leans, like the menu's cards; its contents stay level so the
   bar and the percentage read straight. Sizes inside are in em of the card's
   16 px, so the whole card scales with one font size. */
.loading-card{position:relative;isolation:isolate;width:min(33.75em,100%);padding:.9375em 1.4375em 1.0625em;font-size:16px}
.loading-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--marker-paper);border:.1875em solid var(--marker-ink);border-radius:1.625em 1.125em 1.5em 1em/1.125em 1.5em 1em 1.625em;box-shadow:.3125em .4375em 0 var(--marker-shadow);transform:rotate(-1deg)}
/* The runner's stage keeps its place while the sprites load, over an ink
   ground line at the characters' feet (315 of 340 units). */
.loading-stage{position:relative;width:100%;aspect-ratio:1000/340;margin:0 0 .5em}
.loading-stage::before{content:"";position:absolute;left:1%;right:1%;top:calc(92.65% - 4px);height:9px;background:var(--marker-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 9' preserveAspectRatio='none'%3E%3Cpath d='M3 5C70 3 130 7 210 5S350 3 430 5S540 7 597 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 9' preserveAspectRatio='none'%3E%3Cpath d='M3 5C70 3 130 7 210 5S350 3 430 5S540 7 597 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.loading-stage:has(#loading-chase[data-state="unavailable"]){display:none}
/* Visual progress is time-based: 0–85 in 10s, then 85–99 over 30s.
   Compositor transforms keep presentation independent of download callbacks.
   Actual readiness overrides the timeline immediately, never delaying play. */
#loading-chase{position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden}
.loading-runner-track{position:absolute;inset:0;transform:translate3d(16%,0,0)}
.loading-character{position:absolute}
.loading-sprite-frame{position:absolute;inset:0;overflow:hidden}
.loading-sprite-sheet{position:absolute;top:0;left:0;max-width:none}
.loading-character>img{display:block;width:100%;height:100%}

/* The bar: a paper track with a faint hatch, filled with the PLAY button's
   green and a lighter marker shine along its top. */
#loading-activity{position:relative;width:100%;height:1.5em;flex-shrink:0;overflow:hidden;border:.1875em solid var(--marker-ink);border-radius:.875em .625em .8125em .5625em/.75em .5625em .75em .625em;background:repeating-linear-gradient(-62deg,var(--marker-paper) 0 .5625em,var(--marker-hatch) .5625em .8125em)}
#loading-activity::before{content:"";display:block;width:100%;height:100%;background:linear-gradient(transparent 20%,var(--marker-green-shine) 20% 42%,transparent 42%),var(--marker-green);box-shadow:inset -.1875em 0 0 #1f1a1733;transform-origin:left center;animation:loading-fill 40s linear both;will-change:transform}
.loading-status{display:flex;align-items:baseline;justify-content:space-between;gap:.75em;margin-top:.5em;min-height:1.625em}
#load-note{color:var(--marker-muted);font-size:1.0625em;text-transform:lowercase;text-align:left}
/* The percentage reel: 100 rows of the same height, moved by whole rows. */
#load-percent{display:block;height:1.1818em;line-height:1.1818em;min-width:3em;overflow:hidden;font-size:1.375em;text-align:right;color:var(--marker-ink)}
#loading-percent-reel{display:block;animation:loading-percentage 40s both;will-change:transform}
#loading-percent-reel>span{display:block;height:1.1818em;line-height:1.1818em}
@keyframes loading-fill{0%{transform:scaleX(0)}25%{transform:scaleX(.85)}100%{transform:scaleX(.99)}}
@keyframes loading-percentage{0%{transform:translate3d(0,0,0);animation-timing-function:steps(85,end)}25%{transform:translate3d(0,-85%,0);animation-timing-function:steps(14,end)}100%{transform:translate3d(0,-99%,0)}}
#loading[data-progress-state="complete"] #loading-activity::before{animation:none;transform:scaleX(1)}
progress{display:block;width:100%;height:9px;margin:10px 0}

/* A start that failed: the card says so and offers Try again. */
#load-title{margin:.07em 0 .2em;font-size:1.75em;line-height:1.15;text-transform:lowercase}
#loading:has(#retry:not([hidden])) .loading-stage{display:none}
#loading:has(#retry:not([hidden])) .loading-status{flex-direction:column;align-items:center;gap:.375em}
#loading:has(#retry:not([hidden])) #load-note{text-transform:none;text-align:center;color:var(--marker-ink);font-size:1.0625em;max-width:44ch;overflow-wrap:anywhere}
#loading:has(#retry:not([hidden])) #load-percent{height:auto;min-height:1.3em;overflow:visible;text-align:center;font-size:.9375em;line-height:1.35;color:var(--marker-muted)}
#retry{margin:.6364em 0 .1818em;padding:.3636em 1.1818em .4545em;border:.1364em solid var(--marker-ink);border-radius:.8182em .5455em .7273em .5em/.5455em .7273em .5em .8182em;background:var(--marker-green);color:#1f1a17;box-shadow:.1818em .2273em 0 var(--marker-shadow);font:800 1.375em/1.2 "Fatter Marker","Comic Sans MS",cursive;cursor:pointer;transform:rotate(-1.5deg);transition:transform .15s,box-shadow .15s}
#retry:hover{transform:rotate(-1.5deg) translateY(-.09em);box-shadow:.2273em .3182em 0 var(--marker-shadow)}
#retry:active{transform:rotate(-1.5deg) translate(.09em,.14em);box-shadow:.05em .05em 0 var(--marker-shadow)}
#retry:focus-visible{outline:3px solid var(--marker-focus);outline-offset:4px}

/* Desktop windows: the logo sits exactly where the menu draws it, so the menu
   opens around it. The game scales its 1280 x 800 page by
   k = min(width / 1280, height / 800) and centres it; at k = 1 the menu's logo
   swipe spans x 418-853 and y 70-135. The card centres in the space below. */
@media(min-width:901px) and (min-height:501px){
  #loading{--k:min(calc(100vw / 1280),calc(100vh / 800));--page-top:calc((100vh - 800 * var(--k)) / 2);padding-top:calc(var(--page-top) + 168 * var(--k))}
  #loading-logo{position:absolute;left:calc(50% - 260.7 * var(--k));top:calc(var(--page-top) + 24.6 * var(--k))}
  #loading-logo .loading-logo{width:calc(566.2 * var(--k))}
  /* Bigger windows draw the menu bigger; the card grows with it. */
  .loading-card{font-size:calc(16 * max(1px,var(--k)))}
}
@media(max-height:640px){
  #loading{padding:16px 16px 22px}
  .loading-logo{width:min(470px,70vw)}
  .loading-card{width:min(470px,100%)}
}
@media(max-height:500px){
  #loading{gap:6px;padding:10px 16px 46px}
  .loading-logo{width:min(330px,40vw)}
  .loading-card{width:min(390px,58vw);font-size:13.5px}
}
/* Short screens: while the game loads, the links wait in one row at the
   bottom, clear of the logo and the card. */
@media(max-height:500px){html:not(.fatter-mobile) body:has(#loading:not([hidden])) #legal-links{top:auto;bottom:max(6px,env(safe-area-inset-bottom,0px));left:50%;right:auto;max-width:calc(100% - 16px);display:flex;flex-wrap:nowrap;gap:0 8px;overflow-x:auto;scrollbar-width:none;padding:2px 8px 3px;font-size:11px;transform:translateX(-50%);box-shadow:2px 3px 0 var(--marker-shadow)}}
@media(prefers-reduced-motion:reduce){#retry{transition:none}}

/* Legal documents and support: a marker sticker in the bottom right corner,
   clear of the menu's day/night and settings buttons in the top right. */
#legal-links{position:fixed;bottom:max(12px,env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:10;display:grid;grid-template-columns:repeat(3,max-content);justify-content:end;justify-items:start;align-items:center;gap:1px 7px;max-width:calc(100% - 24px);padding:3px 8px 4px;background:var(--marker-paper);color:var(--marker-ink);border:2px solid var(--marker-ink);border-radius:11px 7px 10px 6px/7px 10px 6px 11px;box-shadow:2px 3px 0 var(--marker-shadow);font:800 11.5px/1.3 "Fatter Marker","Comic Sans MS","Chalkboard SE",cursive;transform:rotate(1deg)}
#legal-links a,#legal-links button{position:relative;color:inherit;font:inherit;text-decoration:none;white-space:nowrap;padding:1px 2px 2px;margin:0;border:0;border-radius:5px 3px 6px 3px;background:none;cursor:pointer;background-image:linear-gradient(var(--marker-underline),var(--marker-underline));background-repeat:no-repeat;background-size:calc(100% - 4px) 2px;background-position:2px calc(100% - 1px);transition:background-size .12s,background-position .12s}
#legal-links a:hover,#legal-links button:hover,#legal-links a:focus-visible,#legal-links button:focus-visible{background-image:linear-gradient(var(--marker-swipe),var(--marker-swipe));background-size:100% 62%;background-position:0 78%;color:#1f1a17}
#legal-links a:focus-visible,#legal-links button:focus-visible{outline:2.5px solid var(--marker-focus);outline-offset:2px}
/* Each link has its own green marker underline; the "|" separators stay
   in the markup for plain-text readers. */
#legal-links .separator{display:none}
#privacy-status{position:fixed;bottom:70px;right:14px;z-index:11;max-width:min(360px,calc(100% - 32px));margin:0;padding:10px 14px;border:2.5px solid var(--marker-ink);border-radius:14px 9px 13px 8px/9px 13px 8px 14px;background:var(--marker-paper);color:var(--marker-ink);box-shadow:3px 4px 0 var(--marker-shadow);font:800 13px/1.45 "Fatter Marker","Comic Sans MS",cursive;transform:rotate(-.5deg)}
@media(max-width:900px){#legal-links{top:calc(92px + env(safe-area-inset-top,0px));bottom:auto;right:max(10px,env(safe-area-inset-right,0px));max-width:calc(100% - 20px)}#privacy-status{top:44px;bottom:auto}}
@media(max-width:520px){#legal-links{grid-template-columns:repeat(2,max-content);column-gap:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){#legal-links a,#legal-links button{transition:none}}