/* The mascot: the 8-bit technician in the bottom-right corner (assets/js/sprite.js,
   switched from admin, server/src/lib/mascot.js). Loaded by partials/sprite.html,
   which build-partials leaves off any page with <body data-sprite="off">.

   His brand colours are the theme's (--navy, --blue, --sky, --navy-deep), so a
   preset recolours him. The tokens below are what he DEPICTS (skin, a pumpkin,
   water, grime) and stay the same in every theme, the way the simulator's water
   does: a Santa hat is red under any palette. They are not --c-<hex> tokens on
   purpose, so the server never derives them from a core colour. */
:root{
  --sprite-hair:#5a3a22;--sprite-skin:#f0c08e;--sprite-boot:#3b2a1e;--sprite-gold:#f2c230;
  --sprite-steel:#9aa6b2;--sprite-white:#ffffff;--sprite-red:#d1343a;--sprite-orange:#f08a24;
  --sprite-orange-dark:#b85d10;--sprite-green:#2f8f3a;--sprite-pollen:#f3d23a;--sprite-sand:#d9c08c;
  --sprite-leather:#7a4a26;--sprite-black:#1d1d1f;--sprite-hivis:#d7f23a;--sprite-knit:#9c3b2c;
  --sprite-water:#5fb6f0;--sprite-water-light:#bfe6ff;--sprite-grime:#6f7d2c;--sprite-grime-dark:#3e4718;
  --sprite-flag-blue:#23408e;--sprite-teal:#1f9e9a;
}

/* The corner. 40x36 art pixels, 2px each on phones, 3px from 768px, 4px from 1024px. Under the header
   (z-index 60) and the tutorial video's pill and player (70); sprite.js lifts
   him above those when they are open. Only the button over him takes a click. */
.tsm{position:fixed;right:16px;bottom:16px;z-index:50;pointer-events:none;--tsm-s:2px;
  width:calc(40 * var(--tsm-s));height:calc(36 * var(--tsm-s));transition:opacity .25s,visibility .25s}
.tsm-art{position:absolute;inset:0}
.tsm-canvas{display:block;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated}
.tsm-art.is-flipped .tsm-canvas{transform:scaleX(-1)}
.tsm.is-clear{opacity:0;visibility:hidden}

/* The Easter egg's button: exactly over the technician (his 24x24 box sits 2
   art pixels in from the canvas's right and bottom edges). */
.tsm-btn{position:absolute;right:calc(2 * var(--tsm-s));bottom:calc(2 * var(--tsm-s));
  width:calc(24 * var(--tsm-s));height:calc(24 * var(--tsm-s));margin:0;padding:0;border:0;border-radius:12px;
  background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.tsm-btn:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}

.tsm-bubble{position:absolute;right:calc(18 * var(--tsm-s));bottom:calc(28 * var(--tsm-s));min-width:190px;
  padding:10px 36px 10px 12px;pointer-events:auto;background:var(--sprite-white);color:var(--navy);
  border:3px solid var(--navy);border-radius:4px;box-shadow:4px 4px 0 rgba(var(--navy-rgb),.25);
  font:600 .9rem/1.35 var(--font-ui)}
.tsm-bubble p{margin:0 0 4px;color:var(--navy)}
.tsm-bubble a{color:var(--blue-dark);text-decoration:underline}
.tsm-bubble::after{content:"";position:absolute;right:16px;bottom:-9px;width:12px;height:12px;
  background:var(--sprite-white);border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg)}
.tsm-bubble-x{position:absolute;top:3px;right:3px;width:28px;height:28px;padding:0;border:0;border-radius:4px;
  background:transparent;color:var(--navy);font:700 1.2rem/1 var(--font-ui);cursor:pointer}
.tsm-bubble-x:focus-visible,.tsm-bubble a:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}

/* A grime monster, peeking out of the edge of a content column. */
.tsm-monster{position:absolute;z-index:40;--tsm-s:2px;width:calc(14 * var(--tsm-s));height:calc(12 * var(--tsm-s));
  margin:0;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden}
.tsm-monster-art{display:block;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated;
  transform:translateX(100%);transition:transform .35s ease-out}
.tsm-monster--right .tsm-monster-art{transform:translateX(-100%)}
.tsm-monster.is-out .tsm-monster-art{transform:none}
.tsm-monster:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px;overflow:visible}
.tsm-poof{position:absolute;z-index:40;width:4px;height:4px;margin:20px 0 0 20px;pointer-events:none;background:var(--sprite-white);
  box-shadow:-12px -8px var(--sprite-gold),12px -10px var(--sprite-white),-16px 8px var(--sprite-white),
    14px 10px var(--sprite-gold),0 -18px var(--sprite-water-light),0 16px var(--sprite-water-light);
  animation:tsm-poof .6s steps(4) forwards}
@keyframes tsm-poof{from{transform:scale(.4);opacity:1}to{transform:scale(1.8);opacity:0}}

@media (min-width:768px){.tsm,.tsm-monster{--tsm-s:3px}}
@media (min-width:1024px){.tsm,.tsm-monster{--tsm-s:4px}}
/* Phones: the bubble keeps to the screen. */
@media (max-width:420px){.tsm-bubble{min-width:0;width:max-content;max-width:calc(100vw - 40px)}}
html.sprites-off .tsm,html.sprites-off .tsm-monster,
html.tsobx-sprite-away .tsm,html.tsobx-sprite-away .tsm-monster{display:none}

/* The light stringer: a pixel C9 bulb over the menu link being pointed at. Drawn
   inside the link's own padding, so nothing moves; 2px pixels. */
html:not(.sprites-off):not(.mascot-no-lights) .site-header .main-nav a.tsm-lit{position:relative}
html:not(.sprites-off):not(.mascot-no-lights) .site-header .main-nav a.tsm-lit::before{content:"";position:absolute;
  left:50%;top:1px;width:2px;height:2px;margin-left:-1px;background:var(--sprite-green);pointer-events:none;
  box-shadow:-2px 0 var(--sprite-green),2px 0 var(--sprite-green),
    -2px 2px var(--tsm-bulb),0 2px var(--tsm-bulb),2px 2px var(--tsm-bulb),
    -2px 4px var(--tsm-bulb),0 4px var(--tsm-bulb),2px 4px var(--tsm-bulb),0 6px var(--tsm-bulb);
  filter:drop-shadow(0 2px 3px var(--tsm-bulb));animation:tsm-twinkle 2.4s steps(2) infinite}
.tsm-bulb-0{--tsm-bulb:var(--sprite-red)}
.tsm-bulb-1{--tsm-bulb:var(--sprite-gold)}
.tsm-bulb-2{--tsm-bulb:var(--sprite-water)}
.tsm-bulb-3{--tsm-bulb:var(--sprite-orange)}
@keyframes tsm-twinkle{50%{opacity:.7}}

/* The 404 cameo (404.html): he stands by the message, whatever the width. */
.mascot-cameo{display:none;width:120px;height:108px;margin:0 auto 6px}
.mascot-cameo.is-on{display:block}
html.sprites-off .mascot-cameo{display:none}

@media (prefers-reduced-motion:reduce){
  .tsm,.tsm-monster-art{transition:none}
  html:not(.sprites-off):not(.mascot-no-lights) .site-header .main-nav a.tsm-lit::before{animation:none}
  .tsm-poof{display:none}
}