/* Hidden Mini on every page (mini.js). Mini sits behind one element of the page (a step photo, a card, the template
   gallery...) and peeks out over an edge; a click finds it. The counter of pages where Mini was found lives in the
   footer (only in this browser, localStorage).
   The spot becomes its own stacking layer and Mini goes underneath it (z-index -1), so only the part sticking out shows. */
.has-mini{position:relative;isolation:isolate}
.has-mini>.mini-hide{z-index:-1}
.has-mini>.mini-hide.found{z-index:2}
.has-mini.mini-open{z-index:20}
.has-mini.mini-bg:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mini-bg);pointer-events:none}
.has-mini.mini-bg>.mini-hide{z-index:-2}
.has-mini.mini-bg>.mini-hide.found{z-index:2}
.mini-hide{position:absolute;z-index:0;width:auto;height:auto;padding:0;margin:0;border:0;background:transparent;box-shadow:none;outline:none;overflow:visible;-webkit-appearance:none;appearance:none;cursor:pointer;line-height:0;
  --out:-5px;--in:46px;rotate:var(--rot,0deg);transition:translate .35s cubic-bezier(.3,1.6,.5,1),rotate .35s cubic-bezier(.3,1.6,.5,1)}
/* Hiding places (mini.js picks one at random): Mini peeks over the top, round a side, or hangs upside down below the photo */
.peek-top-r .mini-hide{top:-34px;right:clamp(16px,8%,60px)}
.peek-top-l .mini-hide{top:-34px;left:clamp(16px,8%,60px)}
.peek-top-c .mini-hide{top:-34px;left:50%;margin-left:-32px}
.peek-left .mini-hide{left:-34px;top:38%;--rot:-90deg;--axis:x;--out:-5px;--in:46px}
.peek-right .mini-hide{right:-34px;top:52%;--rot:90deg;--axis:x;--out:5px;--in:-46px}
.peek-bottom .mini-hide{bottom:-34px;left:clamp(40px,22%,180px);--rot:180deg;--out:5px;--in:-46px}
.mini-hide:hover,.mini-hide:focus,.mini-hide:focus-visible,.mini-hide:active{background:transparent;box-shadow:none;outline:none}
.mini-hide,.mini-hide img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.mini-hide img{display:block;width:64px;height:64px;max-width:none;object-fit:contain}
.mini-hide:hover{translate:0 var(--out)}
.peek-left .mini-hide:hover,.peek-right .mini-hide:hover{translate:var(--out) 0}
.mini-hide.found{z-index:2;rotate:0deg;translate:0 var(--in)}
.peek-left .mini-hide.found,.peek-right .mini-hide.found{translate:var(--in) 0}
/* near the left edge the "You found me" bubble opens to the right */
.peek-left .mini-bubble,.peek-top-l .mini-bubble{right:auto;left:calc(100% + 6px)}
.mini-bubble{position:absolute;right:calc(100% + 6px);top:16px;background:var(--cream);border-radius:20px;padding:8px 14px;font-size:13px;line-height:1.35;white-space:nowrap;box-shadow:0 6px 18px #20242818;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.mini-hide.found .mini-bubble{opacity:1;transform:none}
.mini-bubble b{font-weight:800;font-size:15px}
/* opened to the other side when it would leave the screen (mini.js) */
.mini-bubble.flip{right:auto;left:calc(100% + 6px)}
.peek-left .mini-bubble.flip,.peek-top-l .mini-bubble.flip{left:auto;right:calc(100% + 6px)}
@media(max-width:760px){.mini-bubble{white-space:normal;width:max-content;max-width:150px}}

/* Hint: sits at the right edge until the first scroll */
.mini-hint{position:fixed;right:0;bottom:24px;z-index:15;display:flex;align-items:center;gap:6px;outline:none;cursor:help;transition:opacity .4s,transform .4s}
.mini-hint-label{background:var(--cream);border:1px solid #20242818;border-radius:20px;padding:9px 14px;font-size:13px;line-height:1.35;box-shadow:0 8px 24px #2024281a}
/* Mini peeks in from the right edge of the screen */
.mini-hint img{width:58px;height:58px;object-fit:contain;margin-right:-14px;transform:rotate(-10deg);transition:transform .3s}
.mini-hint:hover img,.mini-hint:focus-visible img{transform:rotate(-4deg) translateX(-4px)}
.mini-tip{position:absolute;right:24px;bottom:calc(100% + 10px);width:220px;background:var(--ink);color:#fff;border-radius:14px;padding:11px 14px;font-size:13px;line-height:1.45;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.mini-tip:after{content:'';position:absolute;right:28px;top:100%;border:7px solid transparent;border-top-color:var(--ink)}
.mini-hint:hover .mini-tip,.mini-hint:focus-visible .mini-tip{opacity:1;transform:none}
.mini-hint:focus-visible .mini-hint-label{outline:2px solid var(--ink);outline-offset:2px}
.mini-hint.gone{opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s}


/* corner badge after Mini is found (mini.js): pops up where the hint sits, the count ticks up, then it slides away */
.mini-badge{position:fixed;right:18px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:40px;background:var(--cream);box-shadow:0 10px 28px #20242826;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.mini-badge.show{opacity:1;transform:none}
.mini-badge img{width:44px;height:44px}
.mini-badge-n{font:800 22px/1 Rubik,sans-serif;color:var(--ink);display:inline-block}
.mini-badge.tick .mini-badge-n{animation:miniTick .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes miniTick{0%{transform:scale(1)}40%{transform:scale(1.45);color:#e0429c}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.mini-badge{transition:opacity .2s}.mini-badge.tick .mini-badge-n{animation:none}}
@media print{.mini-badge{display:none!important}}

/* the counter in the footer: appears once Mini has been found somewhere */
.mini-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 8px;margin:0 0 16px;font-size:14px;color:#45484b}
.mini-count img{width:28px;height:28px;flex:none}
.mini-count b{font-weight:700;color:var(--ink)}
.mini-count img.is-cubi{width:30px;height:30px}
.mini-count-sep{margin:0 4px;color:#9a9c9e}
.mini-count-part{display:inline-flex;align-items:center;gap:8px}
@media(max-width:560px){.mini-count{justify-content:flex-start}.mini-count-sep{display:none}.mini-count-part{flex-basis:100%}}
/* Cubi (a rare surprise instead of Mini): a little bigger, Cubi is the bigger friend */
.mini-badge.is-cubi img{width:50px;height:50px}

/* card grids: a slightly smaller Mini over a card picture */
.pc-cell .mini-hide img,.pt .mini-hide img,.h-grid .mini-hide img,.pp-tips .mini-hide img{width:56px;height:56px}
.pc-cell .mini-hide,.pt .mini-hide,.h-grid .mini-hide,.pp-tips .mini-hide{top:-29px}
@media(max-width:760px){.pc-cell .mini-hide img,.pt .mini-hide img,.h-grid .mini-hide img{width:50px;height:50px}.pc-cell .mini-hide,.pt .mini-hide,.h-grid .mini-hide{top:-27px}}
/* Cubi: a touch smaller than Mini and further out, so the closed eyes (about 40% down the face) show
   while only about as much sticks out above the edge as with Mini */
.mini-hide.is-cubi img{width:58px;height:58px}
.has-mini[class*=peek-top]>.mini-hide.is-cubi{top:-35px}
.has-mini.peek-bottom>.mini-hide.is-cubi{bottom:-35px}
.has-mini.peek-left>.mini-hide.is-cubi{left:-35px}
.has-mini.peek-right>.mini-hide.is-cubi{right:-35px}
.pc-cell>.mini-hide.is-cubi img,.pt>.mini-hide.is-cubi img,.h-grid .mini-hide.is-cubi img,.pp-tips .mini-hide.is-cubi img{width:50px;height:50px}
.pc-cell[class*=peek-top]>.mini-hide.is-cubi,.pt[class*=peek-top]>.mini-hide.is-cubi,.h-grid [class*=peek-top]>.mini-hide.is-cubi,.pp-tips [class*=peek-top]>.mini-hide.is-cubi{top:-30px}
@media print{.mini-hint,.mini-hide,.mini-count{display:none!important}}