/* The way home: the book and the name are the home button, and pressing it is a hearthstone cast: green wisps running round
   the book with leaves riding them, and the cast bar filling at the foot of the screen. Then the page lets go and you are home.
   (A first version, a thin blue ring, is in commit 3d9ca91; a louder one with a flash and rising leaves is in 67f30a6.) */
.hs-home{cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.hs-home:focus-visible{outline:2px solid #9dff4a;outline-offset:4px;border-radius:6px}
.hs-wrap{position:relative;display:inline-block;flex:none;line-height:0;border-radius:50%;vertical-align:middle;isolation:isolate}
.hs-wrap img{position:relative;z-index:1;display:block;transition:transform .15s ease-out}
.hs-fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s}
/* a wisp: a thin bright arc on a tilted, flattened ring, running round it */
.hs-fx i{position:absolute;left:50%;top:50%;width:calc(var(--hs-d,54px) + 30px);height:calc(var(--hs-d,54px) + 30px);margin:calc(var(--hs-d,54px) / -2 - 15px);transform:rotate(var(--tilt)) scaleY(var(--flat));z-index:var(--z,2)}
.hs-fx i u{position:absolute;inset:0;border-radius:50%;animation:hs-turn var(--spd,1.1s) linear infinite;animation-direction:var(--dir,normal);animation-play-state:paused;
  background:conic-gradient(from 0deg,rgba(90,255,60,0) 0 38%,rgba(70,220,40,.35) 58%,rgba(124,255,58,.95) 86%,#eaffc4 97%,rgba(124,255,58,0) 100%);
  -webkit-mask:radial-gradient(circle,transparent calc(70% - 4.5px),#000 calc(70% - 3px),#000 calc(70% - .5px),transparent 70%);mask:radial-gradient(circle,transparent calc(70% - 4.5px),#000 calc(70% - 3px),#000 calc(70% - .5px),transparent 70%);
  filter:drop-shadow(0 0 3px rgba(90,255,60,.9))}
.hs-fx .w1{--tilt:-24deg;--flat:.42;--spd:1s;--z:2}
.hs-fx .w2{--tilt:28deg;--flat:.5;--spd:1.25s;--dir:reverse;--z:2}
.hs-fx .w3{--tilt:82deg;--flat:.36;--spd:.85s;--z:0}
/* a leaf riding a wisp: seven of them, spread round the three rings, each turned to the way it flies */
.hs-fx b{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--tilt)) scaleY(var(--flat));z-index:2}
.hs-fx b u{position:absolute;left:0;top:0;width:0;height:0;animation:hs-turn var(--spd,1.1s) linear infinite;animation-direction:var(--dir,normal);animation-delay:var(--at,0s);animation-play-state:paused}
.hs-fx b u::before{content:"";position:absolute;left:calc(var(--hs-d,54px) / 2 + 9px + var(--out,0px));top:-6px;width:7px;height:12px;border-radius:100% 0;background:linear-gradient(135deg,#f2ff9a,#a8e83c);transform:scaleY(calc(1 / var(--flat))) rotate(var(--lean,20deg)) scale(var(--sz,1));filter:drop-shadow(0 0 3px rgba(150,255,70,.9))}
.hs-fx .s1{--tilt:-24deg;--flat:.42;--spd:1s;--at:-.1s}
.hs-fx .s2{--tilt:28deg;--flat:.5;--spd:1.25s;--dir:reverse;--at:-.5s;--lean:-30deg}
.hs-fx .s3{--tilt:-24deg;--flat:.42;--spd:1s;--at:-.62s;--sz:.8;--out:3px}
.hs-fx .s4{--tilt:82deg;--flat:.36;--spd:.85s;--at:-.3s;--sz:.85;--lean:50deg}
.hs-fx .s5{--tilt:28deg;--flat:.5;--spd:1.25s;--dir:reverse;--at:-1.05s;--sz:.75;--out:4px;--lean:-10deg}
.hs-fx .s6{--tilt:82deg;--flat:.36;--spd:.85s;--at:-.7s;--sz:.7;--out:2px}
.hs-fx .s7{--tilt:-24deg;--flat:.42;--spd:1s;--at:-.36s;--sz:.65;--out:5px;--lean:60deg}
/* the green it throws on the book */
.hs-wrap::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:0;pointer-events:none;opacity:0;transition:opacity .18s;background:radial-gradient(circle closest-side,rgba(110,255,70,.5),rgba(80,220,50,.3) 45%,rgba(60,200,40,.12) 72%,transparent 100%)}
/* rest on it: two wisps and four leaves wake and drift round, slow; the cast is the same thing in a hurry */
.hs-home:hover .hs-fx,.hs-home:focus-visible .hs-fx,.hs-home.hs-hot .hs-fx{opacity:.8}
.hs-home:hover .hs-fx u,.hs-home:focus-visible .hs-fx u,.hs-home.hs-hot .hs-fx u{animation-play-state:running;animation-duration:calc(var(--spd,1.1s) * 3)}
.hs-home:hover .hs-fx :is(.w3,.s4,.s6,.s7),.hs-home:focus-visible .hs-fx :is(.w3,.s4,.s6,.s7),.hs-home.hs-hot .hs-fx :is(.w3,.s4,.s6,.s7){display:none}
.hs-home:hover .hs-wrap::after,.hs-home.hs-hot .hs-wrap::after{opacity:.3}
.hs-home:hover .hs-wrap img,.hs-home:focus-visible .hs-wrap img,.hs-home.hs-hot .hs-wrap img{transform:scale(1.03)}
.hs-home:hover .fwm,.hs-home:focus-visible .fwm,.hs-home.hs-hot .fwm{color:#f0ffd0}
.hs-home:active .hs-wrap img{transform:scale(.97)}
/* the cast: all three wisps and every leaf, fast, the green rising on the book */
.hs-wrap.casting .hs-fx{opacity:1}
.hs-wrap.casting .hs-fx i,.hs-wrap.casting .hs-fx b{display:block!important}
.hs-wrap.casting .hs-fx u{animation-play-state:running!important;animation-duration:calc(var(--spd,1.1s) * .8)!important}
.hs-wrap.casting::after{opacity:1;animation:hs-glow .6s ease-in both}
.hs-wrap.casting img{animation:hs-lift .6s ease-in both}
.hs-wrap.landed::after{animation:hs-land .8s ease-out both}
@keyframes hs-turn{to{transform:rotate(360deg)}}
@keyframes hs-glow{0%{opacity:.3;transform:scale(.9)}100%{opacity:.85;transform:scale(1.15)}}
@keyframes hs-lift{0%{transform:none;filter:none}70%{transform:translateY(-1px) scale(1.04);filter:brightness(1.08)}100%{transform:translateY(-2px) scale(1.06);filter:brightness(1.3) sepia(.3) hue-rotate(50deg) saturate(1.4)}}
@keyframes hs-land{0%{opacity:.9;transform:scale(1.3)}100%{opacity:0;transform:scale(1)}}
/* the cast bar, where the game puts it: the spell's icon in its gold frame, a bar in a bevelled frame with a stud at each end,
   the green filling behind a bright spark, the spell's name and the time left */
.hs-bar{position:fixed;left:50%;bottom:max(18vh,90px);z-index:200;display:flex;align-items:center;gap:9px;transform:translateX(-50%) translateY(6px);opacity:0;transition:opacity .12s,transform .12s;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.65))}
.hs-bar.on{opacity:1;transform:translateX(-50%)}
.hs-bar.done{opacity:0;transition-duration:.25s}
.hs-ic{position:relative;width:32px;height:32px;border-radius:5px;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px #8a7434,0 0 0 3px #3a2f12,0 0 12px rgba(90,255,60,.5);overflow:hidden;flex:none}
.hs-ic img{width:100%;height:100%;display:block}
.hs-ic::after{content:"";position:absolute;inset:0;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 8px rgba(0,0,0,.45)}
.hs-fr{position:relative;padding:3px;border-radius:5px;background:linear-gradient(180deg,#b89a4a,#6b5a2a 45%,#3a2f12);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,236,170,.6)}
.hs-fr::before,.hs-fr::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe28a,#a8842a);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.35)}
.hs-fr::before{left:-5px}.hs-fr::after{right:-5px}
.hs-tr{position:relative;display:block;width:min(250px,56vw);height:22px;border-radius:2px;background:linear-gradient(180deg,#050505,#161616);box-shadow:inset 0 0 0 1px #000,inset 0 2px 5px rgba(0,0,0,.9);overflow:hidden}
.hs-tr i{position:absolute;inset:1px;transform:scaleX(0);transform-origin:left;background:linear-gradient(180deg,#d8ff9a 0,#8fe83a 22%,#4fbe16 55%,#2a8a0a 100%)}
.hs-tr i::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.1) 0 6px,rgba(0,0,0,.08) 6px 12px);mix-blend-mode:overlay}
.hs-bar.on .hs-tr i{transform:scaleX(1);transition:transform var(--hs-cast,.52s) linear}
.hs-tr u{position:absolute;top:-4px;bottom:-4px;left:0;width:14px;margin-left:-7px;text-decoration:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,#fff 0,rgba(230,255,190,.9) 25%,rgba(150,255,80,.4) 55%,transparent 75%);transform:translateX(0)}
.hs-bar.on .hs-tr u{transform:translateX(min(250px,56vw));transition:transform var(--hs-cast,.52s) linear}
.hs-tr em{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(25% - .5px),rgba(0,0,0,.35) 25%,transparent calc(25% + .5px),transparent calc(50% - .5px),rgba(0,0,0,.35) 50%,transparent calc(50% + .5px),transparent calc(75% - .5px),rgba(0,0,0,.35) 75%,transparent calc(75% + .5px)),linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%)}
.hs-tr b,.hs-tr small{position:absolute;top:0;bottom:0;display:flex;align-items:center;font:600 12px/1 "Open Sans",system-ui,sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000,0 0 6px rgba(0,0,0,.8)}
.hs-tr b{left:0;right:0;justify-content:center}
.hs-tr small{right:7px;font-size:11px;font-weight:600;color:#f0ffd0;font-variant-numeric:tabular-nums}
/* and away */
html.hs-gone body{opacity:0;transition:opacity .09s ease-in}
.hs-in{display:inline-flex;align-items:center;gap:12px;border-radius:6px}
@media (hover:none){.hs-home:hover .hs-fx{opacity:0}.hs-home:hover .hs-wrap::after{opacity:0}.hs-wrap.casting .hs-fx,.hs-wrap.casting::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.hs-fx,.hs-wrap::after{display:none!important}.hs-wrap img{animation:none!important;transition:none!important}.hs-home:hover .hs-wrap img{transform:none}}
/* in the section bar the book is small and the bar is low: the wisps sit closer in and the bar lets them show */
.lab-site.hs-home .hs-fx i{width:calc(var(--hs-d,22px) + 18px);height:calc(var(--hs-d,22px) + 18px);margin:calc(var(--hs-d,22px) / -2 - 9px)}
.lab-site.hs-home .hs-fx b u::before{left:calc(var(--hs-d,22px) / 2 + 5px + var(--out,0px) * .5);width:5px;height:8px;top:-4px}
.lab-site.hs-home .hs-wrap::after{inset:-8px}
.lab-site.hs-home .hs-wrap{margin-right:2px}