/* Where's Mrs Hague? – Easter egg styles (Mrs Hague's blue #1f66e5, with the school red) */

/* Mrs Hague peeking up from a bottom corner of the Fun corner */
.tsp-mh{position:absolute;bottom:0;z-index:6;width:96px;height:108px;pointer-events:none}
.tsp-mh--left{left:6px}
.tsp-mh--right{right:6px}
.tsp-mh-clip{position:absolute;inset:0;overflow:hidden}
.tsp-mh-hague{position:absolute;left:6px;bottom:0;width:84px;height:101px;padding:0;border:0;background:none;cursor:pointer;
  pointer-events:none;transform:translateY(104%);transition:transform .55s cubic-bezier(.2,1.3,.4,1);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));-webkit-tap-highlight-color:transparent}
.tsp-mh-hague svg{display:block;width:100%;height:100%}
.tsp-mh.is-up .tsp-mh-hague{transform:translateY(12%);pointer-events:auto}
.tsp-mh.is-go .tsp-mh-hague{transform:translateY(4%) scale(1.06)}
.tsp-mh-wave{transform-box:view-box;transform-origin:80px 106px}
.tsp-mh.is-up .tsp-mh-wave{animation:tsp-mh-wave .9s ease-in-out .5s 3}
.tsp-mh-hague:focus-visible{outline:4px solid #f2b705;outline-offset:2px;border-radius:12px}

/* her speech bubble, beside her head (so it stays clear of the Fun corner's words) */
.tsp-mh-say{position:absolute;top:26px;background:#fff;color:#1747a6;font:700 13px/1 "Baloo 2","Trebuchet MS","Segoe UI",sans-serif;
  padding:6px 10px;border-radius:999px;border:2px solid #1f66e5;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.tsp-mh--left .tsp-mh-say{left:88px}
.tsp-mh--right .tsp-mh-say{right:88px}
.tsp-mh-say::after{content:"";position:absolute;top:50%;margin-top:-5px;width:10px;height:10px;background:#fff;transform:rotate(45deg)}
.tsp-mh--left .tsp-mh-say::after{left:-7px;border-left:2px solid #1f66e5;border-bottom:2px solid #1f66e5}
.tsp-mh--right .tsp-mh-say::after{right:-7px;border-right:2px solid #1f66e5;border-top:2px solid #1f66e5}
.tsp-mh.is-talking .tsp-mh-say{opacity:1}

@keyframes tsp-mh-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg)}70%{transform:rotate(12deg)}}

@media (max-width:600px){
  .tsp-mh{width:80px;height:92px}
  .tsp-mh-hague{left:5px;width:70px;height:84px}
  .tsp-mh-say{top:20px}
  .tsp-mh--left .tsp-mh-say{left:74px}
  .tsp-mh--right .tsp-mh-say{right:74px}
}

/* the game over the top of the page (when "over the top of the page" is chosen) */
#tsp-mh-overlay{position:fixed;inset:0;z-index:2147483000;background:#15161c}
#tsp-mh-overlay[hidden]{display:none}
#tsp-mh-overlay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#15161c}
#tsp-mh-overlay .tsp-mh-close{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);
  width:46px;height:46px;border-radius:50%;border:3px solid #1f66e5;background:#fff;color:#1747a6;font:700 20px/1 "Segoe UI",system-ui,sans-serif;cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.35)}
#tsp-mh-overlay.is-ready .tsp-mh-close{display:none} /* the game shows its own "Back to the website" button once loaded */
html.tsp-mh-open,html.tsp-mh-open body{overflow:hidden !important}

html.simple-view .tsp-mh{display:none}

@media (prefers-reduced-motion: reduce){
  .tsp-mh-hague{transition:none}
  .tsp-mh.is-up .tsp-mh-wave{animation:none}
  .tsp-mh-say{transition:none}
}