/* 日系療癒旅行小誌: pale teal sea, cream islands, grey-green plants, a little terracotta, riso grain and paper */
:root{
  --land:#f6eedb; --land-line:#c9b48c; --wash:#e7f1ea; --hill:#a7b896; --hill2:#8fa585; --tree:#9fb08c; --lake:#b9dbe0;
  --ink:#4a463c; --muted:#8c8573; --paper:#fbf6ea; --paper2:#f3ead8; --acc:#c8714b; --acc-dark:#a65a3a; --gold:#e3b862;
  --hand:"LXGW WenKai TC","Noto Serif TC",serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{touch-action:manipulation}   /* no double-tap zoom: quick taps on cards were zooming the page */
html,body{margin:0;height:100%;overflow:hidden;background:#cfe6e2;color:var(--ink);font-family:var(--hand);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}

/* ---------- Sky / sea: two layers crossfade when the time of day changes ---------- */
.sky{position:fixed;inset:0;z-index:0}
.sky i{position:absolute;inset:0;transition:opacity 2.6s ease}
.sky i.off{opacity:0}
.grain{position:fixed;inset:0;z-index:5;pointer-events:none;background-size:180px 180px}
.paper-edge{position:fixed;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 120px #b9a98022}

/* ---------- World ---------- */
.world{position:fixed;inset:0;overflow:hidden;z-index:1;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.world.dragging{cursor:grabbing}
/* the whole map moves as one GPU layer */
.cam{position:absolute;left:0;top:0;width:1600px;height:1100px;transform-origin:0 0;will-change:transform}
.map{display:block;overflow:visible}
.wave{fill:none;stroke-linecap:round}
.tiles{position:absolute;inset:0;pointer-events:none}
.tiles img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.map{position:relative}
.clouds{position:absolute;inset:0;pointer-events:none;overflow:visible}
.cl{position:absolute;left:0;width:150px;height:56px;opacity:.72;will-change:transform;animation:drift linear infinite;transition:opacity 2.6s;
  background:radial-gradient(circle at 28% 66%,#fffdf6 0 21px,transparent 22px),radial-gradient(circle at 52% 42%,#fffdf6 0 27px,transparent 28px),radial-gradient(circle at 74% 64%,#fffdf6 0 20px,transparent 21px),radial-gradient(ellipse 46% 34% at 52% 76%,#fffdf6 98%,transparent)}
@keyframes drift{from{transform:translateX(-260px) scale(var(--sc,1))}to{transform:translateX(var(--dx,1900px)) scale(var(--sc,1))}}
body[data-mood=dusk] .cl{opacity:.42}
body[data-mood=night] .cl{opacity:.16}
body[data-mood=night] .region{fill:#d9cfb6}
body[data-mood=night] .region-en{fill:#bdb39b}
.region{font-family:var(--hand);font-size:22px;fill:#a69777;letter-spacing:6px;font-weight:700}
.region-en{font-family:var(--mono);font-size:10px;fill:#b9ac8e;letter-spacing:4px}
.country{font-family:var(--hand);font-size:15px;fill:#a69777;letter-spacing:3px;font-weight:700;text-anchor:middle}
.ocean{font-family:var(--hand);font-size:20px;fill:#8fb8b2;letter-spacing:8px;text-anchor:middle;opacity:.8}
.ocean-en{font-family:var(--mono);font-size:9px;fill:#9cc4be;letter-spacing:4px;text-anchor:middle;opacity:.8}
.region,.region-en{text-anchor:middle}
body[data-mood=night] .country{fill:#d9cfb6}
/* trip medallions: a round close-up of the place, on a paper rim, with a dashed leader to the real spot */
.leader path{fill:none;stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round;opacity:.75}
.med{cursor:default}
.med-shadow{fill:#4a463c1c}
.med-rim{fill:var(--paper);stroke:#e2d6bb;stroke-width:1}
.med .island path:nth-child(3){fill:#fbf3e2}
.med-sea{fill:#d3e9e4}
body[data-mood=dusk] .med-sea{fill:#d6dde3}
body[data-mood=night] .med-sea{fill:#a9bcc8}
.med-line{fill:none;stroke:var(--mc);stroke-width:2;opacity:.8}
.med-dash{fill:none;stroke:var(--mc);stroke-width:1.2;stroke-dasharray:3 5;opacity:.5}
.med-tag rect{fill:var(--mc)}
.med-tag text{font-family:var(--hand);font-size:16px;font-weight:700;fill:#fffdf6;text-anchor:middle;letter-spacing:2px}
.mark{font-family:var(--hand);font-size:12px;fill:#8c8573;text-anchor:middle;letter-spacing:1px;opacity:.85}
.world-btn{position:fixed;right:16px;bottom:max(20px,env(safe-area-inset-bottom));z-index:10;background:var(--paper);border:1px solid #e6dcc4;border-radius:99px;padding:10px 16px;font-size:15px;font-weight:700;box-shadow:0 3px 0 #e0d3b8}
.world-btn:active{transform:translateY(3px);box-shadow:none}
body.deck-open .world-btn{visibility:hidden}
.route{fill:none;stroke:#b3a281;stroke-width:2.6;stroke-dasharray:1 9;stroke-linecap:round;opacity:.8}
.route.plane{stroke:#fffdf6;stroke-dasharray:8 10;opacity:.95;stroke-width:2.2}
.route.rail{stroke:#9a876a;stroke-dasharray:12 6;stroke-width:2.6;opacity:.6}
.route.bus{stroke:#7fa7b5;stroke-dasharray:10 6;stroke-width:2.6;opacity:.75}
.route.car{stroke:#c99a7c;stroke-dasharray:7 6;stroke-width:2.6;opacity:.8}
.route.walked{stroke:var(--acc);opacity:.95}
.route.plane.walked{stroke:#f6d6c4}

.spot{cursor:pointer;outline:none}
.spot .pin{fill:var(--paper);stroke:var(--paper)}
.spot .pin-mis{fill:none;stroke:var(--acc);stroke-width:1.4;opacity:.55}
.spot image{transition:filter .8s}
.spot.locked image{filter:grayscale(1) sepia(.25) brightness(1.18) blur(2.5px)}
.spot .q{font-family:var(--hand);font-size:26px;font-weight:700;fill:#fffdf6;text-anchor:middle;dominant-baseline:central}
.spot:not(.locked) .q{display:none}
.spot .ring{fill:none;stroke:#fffdf6;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.spot.locked .ring{animation:ring 2.8s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.spot .tag{fill:var(--paper);stroke:#e2d6bb;stroke-width:1}
.spot .tag-t{font-family:var(--hand);font-size:17px;fill:var(--ink);text-anchor:middle;font-weight:700}
.spot .done{display:none}
.spot.complete .done{display:block}
.spot:hover .pin-mis,.spot:focus-visible .pin-mis{opacity:1;stroke-width:2}
.spot.here .tag{fill:var(--acc);stroke:var(--acc)}.spot.here .tag-t{fill:#fffdf6}

.dog .pup{animation:breathe 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.dog.her .pup{animation-delay:-1.2s}
@keyframes breathe{50%{transform:scaleY(.955)}}
.dog.walking .pup{animation:step .32s ease-in-out infinite}
.dog.her.walking .pup{animation-delay:-.16s}
@keyframes step{50%{transform:translateY(-4px) rotate(3deg)}}
.dog .tail{animation:wag .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:10% 90%}
@keyframes wag{to{transform:rotate(-20deg)}}
.dog .bubble{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;transform-box:fill-box}
.dog.ask .bubble{opacity:1;transform:none}
.dog.her,.hero{cursor:pointer;transition:opacity .2s}
.dog .alt{display:none}
.dog[data-pose] .base{display:none}
.dog[data-pose=lost] .p-lost,.dog[data-pose=snack] .p-snack,.dog[data-pose=cheer] .p-cheer,.dog[data-pose=wave] .p-wave,.dog[data-pose=shoot] .p-shoot{display:inline}
.dog[data-pose] .pup{animation:poseHop .45s cubic-bezier(.3,1.6,.5,1)}
.dog[data-pose=cheer] .pup{animation:poseHop .45s cubic-bezier(.3,1.6,.5,1) 3}
@keyframes poseHop{50%{transform:translateY(-8px)}}
.dog.her.away{opacity:0;pointer-events:none}
.hero .plane{display:none}
/* rail legs (the night train to Lao Cai, the Tadami line): both dogs ride a little train */
.hero .train{display:none}
.hero.riding .train{display:block}
.hero .train image{display:none}
.hero[data-ride=rail] .r-rail,.hero[data-ride=bus] .r-bus,.hero[data-ride=car] .r-car{display:inline}
.hero.riding .pup,.hero.riding .shadow,.hero.riding .bubble{display:none}
.hero.riding .train{animation:chug .32s ease-in-out infinite}   /* bounce on the outer group; the inner one flips left/right */
@keyframes chug{50%{transform:translateY(-1.5px)}}
.hero.flying .plane-dir{animation:glide 1.6s ease-in-out infinite}   /* a slow float; the outer group tilts and flips */
@keyframes glide{50%{transform:translateY(-4px)}}
.hero.flying .pup,.hero.flying .shadow{display:none}
.hero.flying .plane{display:block}
.pup-svg{display:block;overflow:visible}

/* ---------- Bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:max(16px,env(safe-area-inset-top)) 18px 0;pointer-events:none;z-index:10}
.bar>*{pointer-events:auto}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink);text-decoration:none;background:#fbf6eadd;padding:8px 12px;border-radius:99px;border:1px solid #e6dcc4}
.book-btn{display:flex;align-items:baseline;gap:4px;background:var(--paper);padding:9px 16px;border-radius:99px;border:1px solid #e6dcc4;font-size:15px;font-weight:700}
.book-btn b{font-family:var(--mono);font-size:16px;color:var(--acc)}
.book-btn span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.book-btn.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.18)}}
.mood{position:fixed;top:calc(max(16px,env(safe-area-inset-top)) + 46px);left:50%;transform:translateX(-50%);z-index:10;font-size:13px;letter-spacing:.12em;background:#fbf6eacc;border:1px solid #e6dcc488;padding:5px 14px;border-radius:99px;white-space:nowrap;transition:opacity .6s;pointer-events:none}
.mood:empty{opacity:0}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fbf6ea;font-size:15px;padding:10px 18px;border-radius:99px;opacity:0;transition:opacity .3s,transform .3s;z-index:20;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;display:grid;place-items:center;background:#e7efe8aa;backdrop-filter:blur(2px);z-index:30;transition:opacity .5s}
.intro.gone{opacity:0;pointer-events:none}
.intro-card{position:relative;background:var(--paper);border:1px solid #e6dcc4;border-radius:20px;padding:0 30px 28px;text-align:center;width:min(360px,calc(100vw - 40px));animation:pop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.intro-art{display:flex;justify-content:center;align-items:flex-end;margin:-110px -14px 4px}
.intro-art img{height:170px;width:auto;animation:hop 2.4s ease-in-out infinite}
.intro-art img+img{height:180px;margin-left:-18px;animation-delay:-.9s}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.intro-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);margin:0}
.intro h1{font-size:38px;letter-spacing:.12em;margin:8px 0 12px}
.intro p{font-size:16px;line-height:1.9;margin:0 0 22px}
.go{background:var(--acc);color:#fbf6ea;font-size:18px;font-weight:700;padding:12px 30px;border-radius:99px;box-shadow:0 3px 0 var(--acc-dark)}
.go:active{transform:translateY(3px);box-shadow:0 0 0 var(--acc-dark)}

/* ---------- Draw (card pack) ---------- */
.draw{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#f2ead9;opacity:0;transition:opacity .35s;pointer-events:none;overflow:hidden}
.draw::after{content:"";position:absolute;inset:0;background:inherit;background-image:var(--grain);background-size:180px;opacity:1;pointer-events:none}
.draw.on{opacity:1;pointer-events:auto}
.draw-stage{position:relative;width:0;height:0;z-index:1}
.pack{position:absolute;left:-92px;top:-128px;width:184px;height:256px;border-radius:14px;background:var(--pc,#c8714b);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fbf6ea;text-align:center;cursor:pointer;box-shadow:4px 5px 0 color-mix(in srgb,var(--pc) 55%,#4a463c);animation:packin .7s cubic-bezier(.3,1.5,.5,1),wobble 2.4s ease-in-out .8s infinite}
@keyframes packin{from{transform:translateY(60px) scale(.6);opacity:0}}
@keyframes wobble{0%,100%{transform:rotate(0)}10%{transform:rotate(-3deg)}20%{transform:rotate(3deg)}30%{transform:rotate(0)}}
.pack::before{content:"";position:absolute;left:14px;right:14px;top:36px;border-top:2px dashed #fbf6ea99}
.pack::after{content:"";position:absolute;inset:0;border-radius:14px;background-image:var(--grain);background-size:180px;opacity:1}
.pack .pk-top{font-family:var(--mono);font-size:10px;letter-spacing:.2em;position:absolute;top:12px;opacity:.85}
.pack .pk-name{font-size:26px;font-weight:700;letter-spacing:.1em;line-height:1.3;padding:0 14px}
.pack .pk-n{font-family:var(--mono);font-size:12px;margin-top:10px;opacity:.85}
.pack .pk-shine{position:absolute;inset:0;border-radius:14px;background:linear-gradient(110deg,transparent 38%,#fff5 50%,transparent 62%);background-size:250% 100%;animation:shine 2.6s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
.pk-dogs{position:absolute;top:-56px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:2px}
.pup-img{display:block;width:auto}
.pack.open{animation:packout .45s ease-in forwards}
@keyframes packout{30%{transform:scale(1.06)}100%{transform:scale(.3) translateY(-80px);opacity:0}}

.burst-ray{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,#f6c9a0aa,transparent 62%);opacity:0;transform:scale(.4);pointer-events:none}
.burst-ray.on{animation:ray 1.1s ease-out}
@keyframes ray{30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

/* ---------- Deck: one big photo card at a time ---------- */
.draw{touch-action:none}
/* once the deck has faded in, the map underneath stops being drawn at all (clouds, dogs, camera) */
body.deck-open .world,body.deck-open .sky,body.deck-open .grain,body.deck-open .paper-edge,body.deck-open .mood{visibility:hidden;transition:visibility 0s .4s}
body.deck-open .cl,body.deck-open .dog .pup{animation-play-state:paused}
.draw-stage{translate:0 -14px}
.dk-head{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;transition:opacity .3s}
.dk-dogs{display:flex;align-items:flex-end;flex:none}
.dk-dogs .pup-img{height:40px}
.dk-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dk-title b{font-size:20px;letter-spacing:.08em}
.dk-title small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-close{margin-left:auto;flex:none;width:42px;height:42px;font-size:28px;line-height:1;color:var(--muted);border-radius:50%}
.dk-bar{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:16px;z-index:3;transition:opacity .3s}
.dk-prev{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid #e6dcc4;font-size:24px;line-height:1;padding-bottom:3px}
.dk-prev:disabled{opacity:.35;cursor:default}
.dk-count{font-family:var(--mono);font-size:13px;letter-spacing:.12em;min-width:62px;text-align:center}
.dk-all{background:var(--pc,var(--acc));color:#fbf6ea;font-weight:700;font-size:15px;padding:10px 18px;border-radius:99px;box-shadow:0 3px 0 color-mix(in srgb,var(--pc,var(--acc)) 60%,#4a463c)}
.dk-all:active{transform:translateY(3px);box-shadow:none}
.draw-hint{position:absolute;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);left:0;right:0;margin:0;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.1em;z-index:3;pointer-events:none}
.draw.packing .draw-hint{bottom:max(36px,env(safe-area-inset-bottom));color:var(--ink);font-size:16px}
.draw.packing .dk-head,.draw.packing .dk-bar,.draw.leaving .dk-head,.draw.leaving .dk-bar{opacity:0;pointer-events:none}
.draw.packing .dk-card{opacity:0!important;transition:none;pointer-events:none}
.draw .pack{z-index:300}
/* only the card on top takes taps; the rest of the stack (and cards already swiped away) never do */
.dk-card:not(.top),.draw.leaving .dk-card{pointer-events:none}

.dk-card{position:absolute;left:0;top:0;width:calc(var(--pw) + 20px);translate:-50% -50%;transform-origin:50% 70%;transition:transform .45s cubic-bezier(.2,.9,.3,1.08),opacity .35s;perspective:1400px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dk-card.top{will-change:transform}
/* viewer (from the overview / book): just the one photo, ‹ n/N ›, tap to go back */
.draw.view .dk-card:not(.top){opacity:0!important}
.draw.view .dk-card{cursor:zoom-out}
.draw.view .dk-all{width:44px;height:44px;padding:0 0 3px;border-radius:50%;background:var(--paper);color:var(--ink);border:1px solid #e6dcc4;box-shadow:none;font-size:24px;font-weight:400;line-height:1}
.draw.view .dk-all:disabled,.dk-prev:disabled{opacity:.35;cursor:default}
.dk-card.dragging{transition:none;cursor:grabbing}
.dk-card.fly{transition:transform .58s cubic-bezier(.6,0,.8,.4),opacity .58s}
.dk-card:not(.top) .dk-front img{pointer-events:none}
.dk-in{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.25,.5,1)}
.dk-card.flip .dk-in{transform:rotateY(180deg)}
/* small, crisp shadows: big blurred ones on every card in the stack were the main cost while swiping */
.dk-face{border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 0 #4a463c1a,0 3px 8px #4a463c14}
.dk-card.top .dk-face{box-shadow:0 2px 0 #4a463c14,0 8px 18px #4a463c1f}
.dk-front{position:relative;transform:rotateY(180deg);background:var(--paper);padding:10px 10px 12px;overflow:hidden}
.dk-front::before{content:"";position:absolute;left:18px;top:0;width:34px;height:5px;background:var(--pc);border-radius:0 0 3px 3px;z-index:1}
.dk-front img{width:var(--pw);height:var(--ph);object-fit:cover;border-radius:4px;background:#e9e0cc;-webkit-user-drag:none}
.dk-cap{position:relative;padding:10px 6px 0}
.dk-cap b{display:block;font-size:20px;letter-spacing:.06em;line-height:1.35;padding-right:52px}
.dk-cap p{margin:4px 0 0;font-size:14px;line-height:1.7}
.dk-meta{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.dk-exif{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);margin-top:2px;opacity:.85}
.dk-no{position:absolute;right:16px;top:calc(var(--ph) + 22px);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--pc)}
.dk-back{position:absolute;inset:0;background:var(--pc);border:6px solid var(--paper);display:grid;place-items:center;color:#fbf6ea;overflow:hidden}
.dk-back::before{content:"";position:absolute;inset:9px;border:1.5px dashed #fbf6ea88;border-radius:5px}
.dk-back-name{font-size:26px;font-weight:700;letter-spacing:.14em;writing-mode:vertical-rl}
.dk-back-n{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.15em;opacity:.85}
/* rare: a gold-foil print — the cover, or photos marked ★5 */
.dk-card.rare .dk-front{background:linear-gradient(135deg,#efd08a,#fbf1d2 28%,#e6bf6c 52%,#fbf1d2 74%,#dfb25a)}
.dk-card.rare .dk-front img{box-shadow:0 0 0 2px #fffaf0}
.dk-card.rare .dk-meta,.dk-card.rare .dk-exif{color:#7c6a48}
.dk-badge{position:absolute;top:20px;left:20px;background:var(--acc);color:#fbf6ea;font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:99px;box-shadow:0 2px 0 var(--acc-dark);z-index:2}
/* the foil glint moves a strip (GPU) instead of repainting the card, and only sweeps twice */
.dk-shine{position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(110deg,transparent 20%,#fff9 50%,transparent 80%);transform:translateX(-120%);pointer-events:none;z-index:1}
.dk-card.rare.flip.top .dk-shine{animation:glint 1.5s ease-in-out .5s 2}
@keyframes glint{to{transform:translateX(260%)}}

/* ---------- Sheet & book ---------- */
.sheet,.book{position:fixed;left:0;right:0;bottom:0;z-index:25;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.sheet.on,.book.on{transform:none}
.sheet-inner,.book-inner{position:relative;background:var(--paper);border-top:1px solid #e6dcc4;border-radius:22px 22px 0 0;padding:26px 22px max(26px,env(safe-area-inset-bottom));max-height:78vh;overflow-y:auto;box-shadow:0 -10px 40px #4a463c18;max-width:980px;margin:0 auto}
.sheet-inner::before,.book-inner::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:180px;opacity:.6;pointer-events:none;border-radius:inherit}
.book{top:0}.book-inner{max-height:none;height:100%;border-radius:0}
.sheet-close{position:absolute;top:14px;right:16px;width:36px;height:36px;font-size:26px;line-height:1;color:var(--muted);border-radius:50%;z-index:1}
.sheet-close:hover{background:#4a463c0d}
/* the two of them sit on the top edge of the overview sheet */
.sheet-dogs{position:absolute;right:max(72px,calc(50% - 420px));bottom:calc(100% - 8px);display:flex;align-items:flex-end;gap:2px;z-index:1;pointer-events:none}
.sheet:not(.on) .sheet-dogs{visibility:hidden;transition:visibility 0s .5s}
.sheet-dogs img{height:74px;width:auto}
.sheet-dogs.cheer img{height:78px;animation:cheer .5s cubic-bezier(.3,1.6,.5,1) .35s 3}
.sheet-dogs.cheer img+img{animation-delay:.47s}
@keyframes cheer{50%{transform:translateY(-10px)}}
.sheet-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);margin:0}
.sheet h2,.sheet-title{font-size:28px;letter-spacing:.08em;margin:6px 0 4px}
.sheet-note{font-size:15px;color:var(--muted);margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 14px}
@media (max-width:420px){.cards{grid-template-columns:repeat(3,1fr);gap:10px 8px}.print span{font-size:11px}.print small{display:none}}
.print{background:#fffdf7;padding:6px 6px 0;border-radius:3px;box-shadow:1px 2px 0 #4a463c18,0 6px 16px #4a463c12;transform:rotate(var(--r,0deg));transition:transform .25s;cursor:zoom-in;text-align:left;position:relative}
.print:hover{transform:rotate(0) scale(1.03)}
.print img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.print span{display:block;font-size:13px;padding:7px 2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.print small{font-family:var(--mono);font-size:9px;color:var(--muted);float:right;margin-top:2px}
.sheet-foot{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;position:relative}
.pill{display:inline-block;background:var(--acc);color:#fbf6ea;text-decoration:none;font-weight:700;font-size:15px;padding:10px 20px;border-radius:99px;box-shadow:0 3px 0 var(--acc-dark)}
.pill.ghost{background:var(--paper2);color:var(--ink);box-shadow:0 3px 0 #e0d3b8}
.book h2{font-size:32px;letter-spacing:.1em;margin:6px 0 4px}
.book-progress{font-size:15px;color:var(--muted);margin:0 0 20px}
.book-group{margin-bottom:26px;position:relative}
.book-group h3{font-size:18px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.book-group h3 small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.slot{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#efe6d2;position:relative}
.slot img{width:100%;height:100%;object-fit:cover}
.slot.locked img{filter:grayscale(1) blur(6px) brightness(1.3);opacity:.5}
.slot.locked::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:700;color:#b9ad92}
.book-reset{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-decoration:underline;position:relative}


.page-shutter{position:fixed;inset:0;z-index:100;pointer-events:none}
.page-shutter i{position:absolute;left:0;right:0;height:50.5%;background:#2f2c25;transform:scaleY(0);transition:transform .28s cubic-bezier(.7,0,.3,1) .06s}
.page-shutter i:first-child{top:0;transform-origin:top}.page-shutter i:last-child{bottom:0;transform-origin:bottom}
.page-shutter.closed i{transform:scaleY(1);transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .cl,.spot.locked .ring,.dog .pup,.dog .tail,.pack,.pack .pk-shine,.intro-art img{animation:none}
  .sky i{transition:none}
}