/* Ten Sushi · Our Story, v2. Builds on site.css (tokens, header, footer, buttons, reactions).
   Every chapter is a tall "track" with a pinned "stage" (--p, 0 to 1, is how far through the track you are). Inside, a note (the copy and the
   job card) and a scene. Scenes are composed once in a 100 x 70 unit "box" (1u = --u) that always fits the free area beside the note and
   never reaches under the note or the lane path, so nothing overlaps. The pictures are painted from small states (classes and data
   attributes) set by chapters.js; scrolling only decides when those states get set. */

/* the part of a scene's 100 x 70 box that is framed on phones (left, width, top, height in box units); registered so it can glide */
@property --vx{ syntax:'<number>'; inherits:true; initial-value:0; }
@property --vw{ syntax:'<number>'; inherits:true; initial-value:100; }
@property --vy{ syntax:'<number>'; inherits:true; initial-value:0; }
@property --vh{ syntax:'<number>'; inherits:true; initial-value:70; }

/* ---------- the shared drawing language ---------- */
:root{
  --hh:70px; --tb:0px; --gut:36px; --stage-h:calc(100vh - var(--hh) - var(--tb)); --run:150vh;
  --seam:repeating-linear-gradient(90deg,var(--shiro) 0 14px,var(--beni) 14px 28px);
  --skin:#F3D3B3; --hl:var(--yamabuki);
}
@supports (height:100svh){ :root{ --stage-h:calc(100svh - var(--hh) - var(--tb)); --run:150svh; } }
@media (max-width:900px){ :root{ --tb:64px; --gut:30px; --run:130vh; } @supports (height:100svh){ :root{ --run:130svh; } } }

.art{ display:block; overflow:visible; stroke:var(--sumi); stroke-width:.55; stroke-linejoin:round; stroke-linecap:round; }
.art.fill{ position:absolute; inset:0; width:100%; height:100%; }
.fs{ fill:var(--sumi); } .fw{ fill:var(--shiro); } .fk{ fill:var(--kinari); } .fb{ fill:var(--beni); } .fr{ fill:var(--shu); } .fy{ fill:var(--yamabuki); }
.fg{ fill:var(--rokusho); } .fa{ fill:var(--ai); } .fh{ fill:var(--hinoki); } .fu{ fill:var(--kuri); } .fo{ fill:var(--kokutan); } .fz{ fill:var(--nezumi); } .fn{ fill:none; }
.skin{ fill:var(--skin); }

/* ---------- a chapter: a tall track and a pinned stage ---------- */
.chap{ position:relative; height:calc(var(--stage-h) + var(--run)); scroll-margin-top:var(--hh); --p:0; }
.stage{ container-type:size; position:sticky; top:var(--hh); height:var(--stage-h); display:grid; grid-template-columns:minmax(300px,36%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); background:var(--sky,var(--kinari)); border-bottom:4px solid var(--sumi); overflow:hidden; isolation:isolate; }
.stage::before{ content:""; position:absolute; left:0; right:0; top:0; height:16px; background:var(--seam); border-bottom:4px solid var(--sumi); z-index:6; pointer-events:none; }
.stage > .note{ grid-column:1; grid-row:1; align-self:center; justify-self:center; width:calc(100% - 2 * var(--pad)); max-width:460px; margin-top:16px; z-index:4; }
.stage > .scene{ grid-column:1 / -1; grid-row:1; }
.chap.flip .stage{ grid-template-columns:minmax(0,1fr) minmax(300px,36%); }
.chap.flip .stage > .note{ grid-column:2; margin-right:46px; }
.scene{ position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--sky,var(--kinari)) url("../img/paper.png"); background-blend-mode:multiply; }
/* 1u comes from the room the note and the lane gutter leave free (cq units are the stage's here) */
.scene > *{ --noteW:max(300px,36cqw); --gutS:var(--gut); --cx:calc(50% + (var(--noteW) - var(--gutS)) / 2); --u:min(calc((100cqw - var(--noteW) - var(--gutS)) / 100),calc(100cqh / 70)); --yoff:calc((100cqh - var(--u) * 70) * .4); }
.chap.flip .scene > *{ --gutS:0px; --cx:calc(50% - var(--noteW) / 2); }
.ground{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--u) * 14 + var(--yoff)); background:var(--gnd,#D9D2C0); border-top:calc(var(--u) * .55) solid var(--sumi); }
.ground::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 9),rgba(19,18,17,.13) calc(var(--u) * 9) calc(var(--u) * 9.35)); }
.box{ position:absolute; left:var(--cx); bottom:var(--yoff); width:calc(var(--u) * 100); height:calc(var(--u) * 70); translate:-50% 0; }

/* the notes: the copy lives on paper objects, never in a plain column */
.note{ position:relative; background:var(--shiro); color:var(--sumi); border:4px solid var(--sumi); box-shadow:6px 6px 0 var(--sumi); padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px) clamp(14px,1.6vw,20px); }
.note .tag{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font:900 11px/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; }
.note .tag .no{ font:400 15px/1 var(--f-dot); background:var(--shu); color:var(--sumi); padding:8px 9px 7px; border:3px solid var(--sumi); box-shadow:3px 3px 0 var(--sumi); letter-spacing:.06em; }
.note h2{ margin:0 0 12px; font:400 clamp(26px,3.1vw,42px)/1.04 var(--f-marquee); text-transform:uppercase; }
.note p{ margin:0 0 12px; font:500 clamp(15px,1.25vw,17px)/1.6 var(--f-sans); }
.note-site{ background:var(--yamabuki); rotate:calc(-.7deg - var(--tilt) * 1deg); padding-top:calc(clamp(16px,2vw,24px) + 14px); }
.note-site::before{ content:""; position:absolute; left:-4px; right:-4px; top:-4px; height:16px; background:repeating-linear-gradient(135deg,var(--sumi) 0 12px,var(--yamabuki) 12px 24px); border:4px solid var(--sumi); }

/* ---------- the job card: a stamp for each step and help, no instructions in words ----------
   The step names and the "now" line stay in the page for screen readers (visually hidden); the scene shows what to do. */
.job{ margin:14px 0 0; padding-top:12px; border-top:3px dashed var(--sumi); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.job:empty{ display:none; }
.job .sl{ list-style:none; margin:0; padding:0; display:flex; gap:7px; }
.job .sl li{ display:block; }
.job .sl .lb,.job .sl .pg,.job .now{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.job .sl .st{ position:relative; display:block; width:24px; height:24px; border-radius:50%; border:3px solid var(--sumi); background:var(--shiro); }
.job .sl .st::after{ content:"天"; position:absolute; inset:0; display:grid; place-items:center; font:800 12px/1 var(--f-mincho); color:transparent; }
.job .sl li.cur .st{ background:var(--yamabuki); box-shadow:2px 2px 0 var(--sumi); animation:curpulse 1.5s ease-in-out infinite; }
.job .sl li.done .st{ background:var(--shu); border-color:var(--beni); }
.job .sl li.done .st::after{ color:var(--shiro); }
@keyframes curpulse{ 0%,100%{ scale:1; } 50%{ scale:1.18; } }
.job .tools{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.job .tools .btn:disabled{ opacity:.4; cursor:default; box-shadow:2px 2px 0 var(--sumi); transform:none; }
.job .reward{ display:none; flex-wrap:wrap; gap:10px; flex-basis:100%; }
.chap.complete .job .reward{ display:flex; }
.chap.complete .job .tools{ display:none; }
/* when the job is done the closing line is shown: it is the story's last word, not an instruction */
.chap.complete .job .now{ position:static; width:auto; height:auto; margin:0; padding:8px 11px; overflow:visible; clip-path:none; white-space:normal; flex-basis:100%; background:var(--rokusho); color:var(--shiro); font:400 14px/1.45 var(--f-dot); letter-spacing:.03em; }
.chap.complete .job .now b{ display:none; }
.job .reward .btn-beni{ color:var(--shiro); }
.job .reward .playagain span[aria-hidden]{ font-size:1.25em; line-height:0; margin-right:2px; }
/* the dashed mark where a dragged thing belongs */
.dest{ display:none; border:calc(var(--u) * .5) dashed var(--hl); border-radius:calc(var(--u) * 1.2); background:rgba(247,244,236,.32); pointer-events:none; z-index:2; animation:destpulse 1.6s ease-in-out infinite; }
.dest.on{ display:block; }
@keyframes destpulse{ 0%,100%{ opacity:.55; scale:1; } 50%{ opacity:1; scale:1.04; } }

/* ---------- props: absolutely placed in box units; a button where the visitor can play ---------- */
.p{ position:absolute; left:calc(var(--u) * var(--x,0)); top:calc(var(--u) * var(--y,0)); width:calc(var(--u) * var(--w,10)); height:calc(var(--u) * var(--h,10)); }
.p > svg{ display:block; width:100%; height:100%; }
button.p{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
button.p::after{ content:""; position:absolute; inset:calc(var(--u) * var(--hit,1.2) * -1); }       /* a bigger invisible target for fingers */
.stage :focus-visible{ outline-offset:calc(var(--u,6px) * .5); }
.chap[data-ink="dark"] :focus-visible{ outline-color:var(--yamabuki); }
.chap[data-ink] .note :focus-visible{ outline-color:var(--sumi); }                /* paper is paper, whatever the room around it */
.chap[data-ink] .note-chalk :focus-visible{ outline-color:var(--yamabuki); }
.p.lift{ z-index:12; }
.p.dragx{ cursor:grab; }
.p.dragx.is-target{ touch-action:none; }
.p.dragx.lift{ cursor:grabbing; }

/* the target of the current step pulses; after a few idle seconds the hand shows the gesture */
.is-target{ animation:tgt 2.4s ease-in-out infinite; }
.chap.hint1 .is-target{ animation-duration:1.25s; }
@keyframes tgt{ 0%,100%{ filter:var(--sh,drop-shadow(0 0 0 transparent)) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); } 50%{ filter:var(--sh,drop-shadow(0 0 0 transparent)) drop-shadow(0 0 calc(var(--u,6px) * 1.4) var(--hl)) drop-shadow(0 0 calc(var(--u,6px) * .4) var(--hl)); } }
.hand{ position:absolute; left:calc(var(--u) * var(--hx,0)); top:calc(var(--u) * var(--hy,0)); width:calc(var(--u) * 5.6); height:calc(var(--u) * 6.6); margin:calc(var(--u) * -.8) 0 0 calc(var(--u) * -1.6); pointer-events:none; z-index:30; opacity:0; transition:opacity .25s; }
.hand.on{ opacity:1; }
.hand svg{ width:100%; height:100%; filter:drop-shadow(calc(var(--u) * .35) calc(var(--u) * .35) 0 rgba(19,18,17,.5)); stroke:none; }
.hand .ring{ position:absolute; left:calc(var(--u) * .2); top:calc(var(--u) * -.1); width:calc(var(--u) * 3.4); height:calc(var(--u) * 3.4); margin:calc(var(--u) * -1.2) 0 0 calc(var(--u) * -.8); border:calc(var(--u) * .45) solid var(--hl); border-radius:50%; opacity:0; }
.hand.tap .ring,.hand.drag .ring{ animation:ringpulse 1.3s ease-out infinite; }
.hand.tap svg{ animation:handtap 1.3s ease-in-out infinite; }
.hand.drag{ animation:handdrag 2.4s ease-in-out infinite; }
@keyframes ringpulse{ 0%{ scale:.5; opacity:.9; } 100%{ scale:1.7; opacity:0; } }
@keyframes handtap{ 0%,100%{ translate:0 0; } 40%{ translate:0 calc(var(--u) * .9); } }
@keyframes handdrag{ 0%,10%{ translate:0 0; } 72%,100%{ translate:calc(var(--u) * (var(--hx2) - var(--hx))) calc(var(--u) * (var(--hy2) - var(--hy))); } }

/* shared bits several scenes use */
.chain{ position:absolute; top:calc(var(--u) * -4.8); height:calc(var(--u) * 4.8); width:calc(var(--u) * .8); background:repeating-linear-gradient(180deg,var(--sumi) 0 calc(var(--u) * .6),transparent calc(var(--u) * .6) calc(var(--u) * 1.2)); pointer-events:none; }
.chain.l{ left:calc(var(--u) * 3.4); } .chain.r{ right:calc(var(--u) * 3.4); }
button.p.hang,button.p.drag-x,button.p.jar,button.p.lt{ touch-action:pan-y; }
.cloud{ animation:drift 38s ease-in-out infinite; filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); }
@keyframes drift{ 0%,100%{ translate:calc(var(--u) * -4) 0; } 50%{ translate:calc(var(--u) * 4) 0; } }
.doorsign{ perspective:calc(var(--u) * 30); --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); }
.doorsign .ds{ position:absolute; inset:0; display:grid; place-items:center; white-space:nowrap; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:calc(var(--u) * .4) solid var(--sumi); font:800 max(11px,calc(var(--u) * 2.3))/1 var(--f-mincho); letter-spacing:0; transition:rotate .45s cubic-bezier(.3,1.3,.5,1); }
.doorsign .a{ background:var(--sumi-usu); color:var(--shiro); rotate:x 0deg; }
.doorsign .b{ background:var(--rokusho); color:var(--shiro); rotate:x 180deg; }
.doorsign.open .a{ rotate:x -180deg; } .doorsign.open .b{ rotate:x 0deg; }
.ppl{ filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); --sk:var(--skin); pointer-events:none; }
.chap[data-open="1"] .ppl{ pointer-events:auto; }
.kami{ position:absolute; width:calc(var(--u) * .9); height:calc(var(--u) * 1.5); pointer-events:none; z-index:25; }

/* a jump, a reset or Skip: change the picture without animating it */
.chap.nt *,.chap.nt *::before,.chap.nt *::after{ transition:none !important; }

/* ---------- 1 · a plaza on Bank Street ---------- */
.c1{ --sky:#E9E1CD; --gnd:#D9D2C0; --hl:var(--shu); }
.c1 .ground::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--u) * 4.6); background:repeating-linear-gradient(90deg,var(--yamabuki) 0 calc(var(--u) * 5),transparent calc(var(--u) * 5) calc(var(--u) * 10)) center calc(var(--u) * 2.1) / 100% calc(var(--u) * .5) no-repeat,var(--kokutan); border-top:calc(var(--u) * .55) solid var(--sumi); z-index:1; }
.c1 .lit{ opacity:0; transition:opacity .7s; }
.c1[data-lights="1"] .lit{ opacity:1; }
/* the hoarding: four panels that lift away (one wears a 天 poster) */
.art .seal-t3{ font:800 5.6px var(--f-mincho); fill:var(--sumi); stroke:none; }
.c1 .panel{ transform-origin:50% 100%; --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)); filter:var(--sh); transition:translate .55s cubic-bezier(.5,0,.8,.4),rotate .55s ease-in,opacity .5s ease-in .05s,visibility 0s .6s; }
.c1 .panel.up{ translate:0 calc(var(--u) * -36); rotate:calc(var(--rot) * 1deg); opacity:0; visibility:hidden; pointer-events:none; }
.c1 .banner{ display:grid; place-items:center; background:var(--yamabuki); border:calc(var(--u) * .5) solid var(--sumi); box-shadow:calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi); transform-origin:50% 0; rotate:-.5deg; transition:translate .5s ease-in,opacity .45s ease-in,visibility 0s .5s; pointer-events:none; }
.c1 .banner span{ font:400 calc(var(--u) * 3.1)/1 var(--f-marquee); letter-spacing:.16em; white-space:nowrap; }
.c1:not([data-panels="0"]) .banner{ translate:0 calc(var(--u) * -10); opacity:0; visibility:hidden; }
/* the roadworks clear away with the hoarding */
.c1 .barrier,.c1 .roadsign,.c1 .cone{ transition:opacity .6s .25s,translate .6s .25s; }
.c1 .cone{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)); filter:var(--sh); transform-origin:100% 100%; }
.c1[data-panels="4"] .barrier,.c1[data-panels="4"] .roadsign,.c1[data-panels="4"] .cone{ opacity:0; translate:calc(var(--u) * 14) 0; pointer-events:none; }
/* the sign: waits on the pavement, then hangs on its chains */
.c1 .sign{ transform-origin:50% 0; display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 1.4); background:var(--sumi); color:var(--shiro); outline:calc(var(--u) * .4) solid var(--shu); outline-offset:calc(var(--u) * -.9); border:calc(var(--u) * .55) solid var(--sumi); box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi); rotate:-2deg; transition:rotate .45s,box-shadow .6s; z-index:3; }
.c1 .sign.hung{ rotate:0deg; }
.c1 .sign .chain{ opacity:0; transition:opacity .3s .35s; }
.c1 .sign.hung .chain{ opacity:1; }
.c1 .sg-seal{ display:grid; place-items:center; width:calc(var(--u) * 5.4); height:calc(var(--u) * 5.4); border-radius:50%; background:var(--shu); color:var(--shiro); border:calc(var(--u) * .4) solid var(--shiro); font:800 calc(var(--u) * 3.3)/1 var(--f-mincho); }
.c1 .sg-name{ font:400 calc(var(--u) * 3.6)/1 var(--f-marquee); letter-spacing:.03em; white-space:nowrap; }
.c1[data-lights="1"] .sign{ box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi),0 0 calc(var(--u) * 5) calc(var(--u) * .6) rgba(255,198,26,.55); }
/* the noren rolls down as you pull the cord (--kn, 0 to 1, is set by the script) */
.c1 .noren{ filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .5) 0 rgba(19,18,17,.55)); display:flex; justify-content:center; gap:calc(var(--u) * .25); padding-top:calc(var(--u) * 1); pointer-events:none; }
.c1 .noren .rod{ position:absolute; left:calc(var(--u) * -.8); right:calc(var(--u) * -.8); top:0; height:calc(var(--u) * 1.1); background:var(--sumi); border-radius:calc(var(--u) * .55); }
.c1 .noren .nr{ overflow:hidden; position:relative; display:block; flex:1; height:calc(var(--u) * 8.2); background:var(--beni); border:calc(var(--u) * .45) solid var(--sumi); border-top:0; transform-origin:50% 0; scale:1 calc(.05 + var(--kn,0) * .95); }
.c1 .noren .nr b{ display:grid; place-items:center; height:100%; color:var(--shiro); font:800 calc(var(--u) * 4.4)/1 var(--f-mincho); }
.c1 .cord2{ background:var(--sumi); height:calc(var(--u) * (.8 + var(--kn,0) * 8.2)); }
.c1 .knob{ translate:0 calc(var(--u) * var(--kn,0) * 8.2); --sh:drop-shadow(calc(var(--u) * .3) calc(var(--u) * .3) 0 var(--sumi)); filter:var(--sh); }
.c1[data-panels="4"] .knob{ z-index:4; }                /* behind the hoarding until it is down, then above the noren it pulls */
.c1 .knob.dragx.is-target{ touch-action:none; }
.c1[data-noren="1"] .knob,.c1[data-noren="1"] .cord2{ opacity:0; pointer-events:none; transition:opacity .5s .3s; }
.c1 .lswitch{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); }
.c1 .lswitch .lever{ transition:translate .2s; }
.c1 .lswitch.on .lever{ translate:0 2.1px; }
/* the queue arrives, the stamp lands, the bunting goes up */
.c1 .ppl{ --kq:0; opacity:0; translate:calc(var(--u) * 14) 0; transform-origin:50% 100%; transition:translate .9s ease-out calc(var(--qi) * .16s),opacity .25s calc(var(--qi) * .16s); }
.c1 .q1{ --qi:0; } .c1 .q2{ --qi:1; } .c1 .q3{ --qi:2; } .c1 .q4{ --qi:3; }
.c1[data-open="1"] .ppl{ opacity:1; translate:0 0; }
.c1 .hanko{ display:grid; place-items:center; border-radius:50%; border:calc(var(--u) * .9) solid var(--beni); color:var(--beni); background:rgba(247,244,236,.55); mix-blend-mode:multiply; font:400 calc(var(--u) * 2.7)/1 var(--f-dot); letter-spacing:0; opacity:0; scale:2.4; rotate:-12deg; transition:opacity .15s 1.2s,scale .28s 1.2s cubic-bezier(.3,1.6,.5,1); }
.c1 .hanko::before{ content:""; position:absolute; inset:calc(var(--u) * .7); border-radius:50%; border:calc(var(--u) * .3) solid var(--beni); }
.c1[data-open="1"] .hanko{ opacity:1; scale:1; }
.c1 .lpost,.c1 .bunting{ opacity:0; transition:opacity .7s 1.5s; }
.c1[data-open="1"] .lpost,.c1[data-open="1"] .bunting{ opacity:1; }
.c1 .bunting{ pointer-events:none; transform-origin:50% 0; }
.c1 .bunting .fl{ pointer-events:auto; stroke-width:.4; }
.c1[data-open="1"] .bunting{ pointer-events:none; }

/* ---------- 2 · luck or fate ---------- */
.c2{ --sky:#FFC61A; --gnd:#D2A96E; --hl:var(--beni); }
.c2 .scene{ background:radial-gradient(circle,rgba(19,18,17,.13) 1.4px,transparent 1.8px) 0 0 / 14px 14px,url("../img/paper.png"),var(--sky); background-blend-mode:normal,multiply,normal; }
.c2 .ground::after{ background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 12),rgba(70,40,15,.38) calc(var(--u) * 12) calc(var(--u) * 12.4)),repeating-linear-gradient(0deg,transparent 0 calc(var(--u) * 4.5),rgba(70,40,15,.16) calc(var(--u) * 4.5) calc(var(--u) * 4.8)); }
.note-slip{ rotate:calc(.9deg + var(--tilt) * 1deg); }
.c2 .garland{ pointer-events:none; filter:drop-shadow(calc(var(--u) * .35) calc(var(--u) * .35) 0 rgba(19,18,17,.55)); }
.c2 .garland .fl{ stroke-width:.4; transform-box:fill-box; transform-origin:50% 0; animation:sway 3.4s ease-in-out infinite; animation-delay:calc(var(--fi) * -.27s); }
@keyframes sway{ 0%,100%{ rotate:-7deg; } 50%{ rotate:7deg; } }
/* the board: five slips. Wide and tall screens list them all; elsewhere one slip at a time with a dot for each */
.board{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:7px; }
.board li{ position:relative; display:flex; gap:10px; align-items:flex-start; background:var(--kinari); border:3px solid var(--sumi); border-left:10px solid var(--nezumi); padding:7px 10px 7px 9px; font:700 14px/1.45 var(--f-sans); box-shadow:3px 3px 0 var(--sumi); }
.board .sn{ flex:none; font:400 14px/1.45 var(--f-dot); color:var(--sumi-usu); }
.board .tx{ visibility:hidden; }
.board .q{ position:absolute; inset:0; display:grid; place-items:center; font:400 20px/1 var(--f-dot); font-style:normal; letter-spacing:.3em; color:var(--sumi-usu); }
.board li.got{ border-left-color:var(--beni); }
.board li.got .sn{ color:var(--beni); }
.board li.got .tx{ visibility:visible; }
.board li.got .q{ display:none; }
.board li.got.show{ background:#FFF0B8; }
.dots{ display:none; counter-reset:sl; list-style:none; gap:8px; margin:9px 0 0; padding:0; }
.dots li{ counter-increment:sl; }
.dots button{ position:relative; width:30px; height:26px; border:3px solid var(--sumi); background:var(--kinari); color:var(--sumi-usu); font:400 13px/1 var(--f-dot); padding:0; cursor:default; }
.dots button::before{ content:counter(sl); }
.dots button::after{ content:""; position:absolute; inset:-10px -4px; }
.dots button.got{ background:var(--beni); color:var(--shiro); cursor:pointer; }
.dots button[aria-current="true"]{ background:var(--yamabuki); color:var(--sumi); box-shadow:2px 2px 0 var(--sumi); }
@media (max-width:1199px), (max-height:919px){
  html.js:not(.flat) .board{ gap:0; margin-bottom:0; }
  html.js:not(.flat) .board li{ grid-area:1 / 1; visibility:hidden; opacity:0; }
  html.js:not(.flat) .board li.show{ visibility:visible; opacity:1; }
  html.js:not(.flat) .board .sn{ display:none; }
  html.js:not(.flat) .dots{ display:flex; }
}
@media (max-width:900px), (max-aspect-ratio:11/10){
  .board li{ font-size:13.5px; padding:6px 8px 6px 7px; }
  .dots{ margin-top:7px; }
}
html:not(.js) .board .tx{ visibility:visible; } html:not(.js) .board .q{ display:none; }
/* after the scroll pours the capsules out, every slip shows at once (by hand you win and read them one at a time) */
html.js:not(.flat) .board.all{ gap:5px; margin-bottom:10px; }
html.js:not(.flat) .board.all li{ grid-area:auto; visibility:visible; opacity:1; }
html.js:not(.flat) .board.all .sn{ display:inline; }
.board.all ~ .dots{ display:none !important; }
@media (max-width:900px), (max-aspect-ratio:11/10){ html.js:not(.flat) .board.all{ gap:4px; margin-bottom:6px; } html.js:not(.flat) .board.all li{ font-size:12.5px; line-height:1.35; padding:4px 7px 4px 6px; border-left-width:7px; } }
/* the scene */
.c2 .machine{ pointer-events:none; filter:drop-shadow(calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi)); }
.c2 .dome{ border-radius:50%; }
.c2 .neko{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)); filter:var(--sh); transform-origin:50% 100%; }
.c2 .neko .paw{ transform-origin:12.6px 10.4px; animation:pawwave 1.7s ease-in-out infinite; }
.c2 .neko.cheer .paw,.c2[data-call="luck"] .neko .paw{ animation-duration:.4s; }
.c2[data-call="luck"] .neko{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)) drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255,255,255,.9)); }
@keyframes pawwave{ 0%,100%{ rotate:-5deg; } 50%{ rotate:15deg; } }
.c2 .spool{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)); filter:var(--sh); transform-origin:50% 100%; }
.c2 .tagl{ display:grid; place-items:center; background:var(--shiro); border:calc(var(--u) * .4) solid var(--sumi); box-shadow:calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi); font:400 max(11px,calc(var(--u) * 2.4))/1 var(--f-dot); letter-spacing:.14em; white-space:nowrap; pointer-events:none; }
.c2 .dish{ filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); }
.c2 .coin{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); z-index:5; }
.c2 .coin.in{ opacity:0; scale:.35; pointer-events:none; transition:opacity .2s .36s,scale .2s .36s; }
.c2 .slot{ pointer-events:none; }
.c2 .lamps{ display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.c2 .lamps i{ width:calc(var(--u) * 2.2); height:calc(var(--u) * 2.2); border-radius:50%; border:calc(var(--u) * .3) solid var(--sumi); background:#5B4636; transition:background .2s,box-shadow .2s; }
.c2 .lamps i.on{ background:var(--yamabuki); box-shadow:0 0 calc(var(--u) * 1.4) calc(var(--u) * .2) rgba(255,198,26,.95); }
.c2 .crank{ cursor:grab; }
.c2 .crank.is-dragging{ cursor:grabbing; }
.c2 .crk{ transform-origin:4.4px 4.4px; rotate:calc(var(--cr,0) * 1deg); }
.c2 .rattle .cap{ animation:rattle .7s ease-in-out both; animation-delay:calc(var(--ci) * 16ms); }
.c2 .rattle .cap:nth-child(odd){ animation-name:rattle2; }
@keyframes rattle{ 0%,100%{ translate:0 0; } 18%{ translate:-1.1px -1.8px; } 36%{ translate:1.2px .8px; } 54%{ translate:-.8px -1.2px; } 72%{ translate:.6px .5px; } }
@keyframes rattle2{ 0%,100%{ translate:0 0; } 18%{ translate:1.1px -1.4px; } 36%{ translate:-1.2px 1px; } 54%{ translate:.8px -1.6px; } 72%{ translate:-.6px .4px; } }
.c2 .capw{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); z-index:6; }
.c2 .capw i{ position:absolute; left:0; width:100%; height:50%; border:calc(var(--u) * .5) solid var(--sumi); }
.c2 .capw .t{ top:0; background:var(--cc); border-radius:999px 999px 0 0; border-bottom-width:calc(var(--u) * .25); }
.c2 .capw .b{ bottom:0; background:var(--shiro); border-radius:0 0 999px 999px; border-top:0; }
.c2 .capw:disabled{ pointer-events:none; }
.c2 .thread{ pointer-events:none; }
.c2 .thread path{ stroke-linecap:butt; stroke-dasharray:1 2; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s ease-in-out; }
.c2[data-call="fate"] .thread path{ stroke-dashoffset:0; }
.slipfly{ position:absolute; left:0; top:0; width:84px; height:30px; background:var(--kinari); border:3px solid var(--sumi); border-left:8px solid var(--beni); box-shadow:3px 3px 0 var(--sumi); pointer-events:none; }

/* ---------- 3 · order from your seat ---------- */
.c3{ --sky:#1B2B52; --hl:var(--yamabuki); }
.c3 .scene{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 2px,transparent 2px 38px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 38px),url("../img/paper.png"),var(--sky); background-blend-mode:normal,normal,multiply,normal; }
.c3 .ground{ display:none; }
.note-tent{ rotate:calc(-.8deg - var(--tilt) * 1deg); background:var(--shiro); border-top:calc(4px + 14px) solid var(--beni); }
.c3 .pool{ background:radial-gradient(ellipse 54% 62% at 40% 50%,rgba(255,206,110,.3),rgba(255,206,110,0) 72%); pointer-events:none; }
.c3 .mat{ background:repeating-linear-gradient(90deg,#C9A26B 0 calc(var(--u) * 2.2),#B8905A calc(var(--u) * 2.2) calc(var(--u) * 2.6)); border:calc(var(--u) * .55) solid var(--sumi); box-shadow:calc(var(--u) * .7) calc(var(--u) * .7) 0 rgba(0,0,0,.45); border-radius:calc(var(--u) * .6); pointer-events:none; }
.c3 .dock{ display:grid; place-items:end center; border:calc(var(--u) * .5) dashed rgba(247,244,236,.5); border-radius:calc(var(--u) * 1.2); pointer-events:none; transition:border-color .3s; }
.c3 .dock i{ font:400 max(11px,calc(var(--u) * 2.2))/1 var(--f-dot); font-style:normal; letter-spacing:.16em; color:rgba(247,244,236,.65); padding-bottom:calc(var(--u) * 1); }
.c3[data-step="away"] .dock{ animation:dockp 1.5s ease-in-out infinite; }
.c3[data-away="1"] .dock{ animation:none; border-color:transparent; }
@keyframes dockp{ 0%,100%{ border-color:rgba(247,244,236,.5); } 50%{ border-color:var(--yamabuki); } }
/* the kitchen's pass, with the order rail */
.c3 .kitchen{ z-index:8; background:var(--kokutan); border-bottom:calc(var(--u) * .55) solid var(--sumi); border-left:calc(var(--u) * .55) solid var(--sumi); box-shadow:calc(var(--u) * -.3) calc(var(--u) * .6) 0 rgba(0,0,0,.4); }
.c3 .kitchen .rail{ position:absolute; left:calc(var(--u) * .8); right:calc(var(--u) * .8); top:calc(var(--u) * 1.6); height:calc(var(--u) * .5); background:var(--nezumi); border-radius:calc(var(--u) * .25); }
.c3 .kitchen .tag3{ position:absolute; left:calc(var(--u) * 1.2); bottom:calc(var(--u) * .5); font:800 max(11px,calc(var(--u) * 2))/1 var(--f-mincho); font-style:normal; color:var(--yamabuki); }
.c3 .rt{ position:absolute; top:calc(var(--u) * 1.9); width:calc(var(--u) * 2.4); height:calc(var(--u) * 4); background:var(--kinari); border:calc(var(--u) * .3) solid var(--sumi); transform-origin:50% 0; opacity:0; translate:0 calc(var(--u) * -2); transition:opacity .2s,translate .35s cubic-bezier(.3,1.5,.5,1); }
.c3 .rt::before{ content:""; position:absolute; left:0; right:0; top:calc(var(--u) * .6); height:calc(var(--u) * .7); background:var(--beni); }
.c3 .rt:nth-child(3){ transition-delay:.1s; } .c3 .rt:nth-child(4){ transition-delay:.2s; }
.c3[data-sent="1"] .rt{ opacity:1; translate:0 0; }
.tkfly{ position:absolute; width:calc(var(--u) * 2.4); height:calc(var(--u) * 4); background:var(--kinari); border:calc(var(--u) * .3) solid var(--sumi); box-shadow:calc(var(--u) * .3) calc(var(--u) * .3) 0 rgba(0,0,0,.4); z-index:9; pointer-events:none; }
.tkfly::before{ content:""; position:absolute; left:0; right:0; top:calc(var(--u) * .6); height:calc(var(--u) * .7); background:var(--beni); }
/* table things (toys) */
.c3 .tea,.c3 .soy,.c3 .chop,.c3 .bell{ filter:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(0,0,0,.45)); }
.c3 .bell{ transform-origin:50% 100%; }
.c3 .tea .steam{ position:absolute; left:30%; top:-24%; width:calc(var(--u) * 2.4); height:calc(var(--u) * 5); background:radial-gradient(ellipse at 50% 100%,rgba(247,244,236,.7),transparent 70%); border-radius:50%; animation:steam 3.4s ease-in-out infinite; pointer-events:none; }
@keyframes steam{ 0%{ translate:0 0; opacity:0; scale:.7 .7; } 30%{ opacity:.75; } 100%{ translate:calc(var(--u) * .8) calc(var(--u) * -3); opacity:0; scale:1.2 1.4; } }
.c3 .chop .cs{ transform-box:fill-box; transform-origin:0% 50%; }
/* the iPad */
.c3 .ipad{ z-index:6; transform-origin:0 0; background:var(--sumi); border-radius:calc(var(--u) * 2.6); box-shadow:calc(var(--u) * .8) calc(var(--u) * .8) 0 rgba(0,0,0,.5); }
.c3 .ipad.fly{ transition:translate .75s cubic-bezier(.3,1.1,.4,1),scale .75s cubic-bezier(.3,1.1,.4,1),rotate .75s ease; }
.c3 .ipad.away{ translate:calc(var(--u) * 64) calc(var(--u) * 6); scale:.5; rotate:-3deg; }
.c3 .ipad.lift{ z-index:12; box-shadow:calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 rgba(0,0,0,.45); }
.c3 .ipad.is-target{ --sh:drop-shadow(calc(var(--u) * .8) calc(var(--u) * .8) 0 rgba(0,0,0,.5)); }
.c3 .ipad.is-target .ibar,.c3 .ipad.is-target .scr-sent{ touch-action:none; cursor:grab; }
.c3 .isc{ position:absolute; inset:calc(var(--u) * 2); border-radius:calc(var(--u) * 1); background:var(--shiro); overflow:hidden; display:flex; flex-direction:column; color:var(--sumi); font-family:var(--f-sans); }
.c3 .isc::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.2) 0 22%,transparent 22% 100%); pointer-events:none; }
.c3 .ibar{ flex:none; display:flex; align-items:center; gap:calc(var(--u) * 1.2); height:calc(var(--u) * 5); padding:0 calc(var(--u) * 1.3); background:var(--beni); color:var(--shiro); font:900 max(11px,calc(var(--u) * 2.3))/1 var(--f-sans); letter-spacing:.14em; }
.c3 .ibt{ flex:1; }
.c3 .ibs{ display:grid; place-items:center; width:calc(var(--u) * 3.4); height:calc(var(--u) * 3.4); border-radius:50%; background:var(--shu); border:calc(var(--u) * .3) solid var(--shiro); font:800 calc(var(--u) * 2.2)/1 var(--f-mincho); }
.c3 .ibn{ font:400 max(11px,calc(var(--u) * 2.4))/1 var(--f-dot); font-style:normal; background:var(--shiro); color:var(--beni); min-width:calc(var(--u) * 5); text-align:center; padding:calc(var(--u) * .55) calc(var(--u) * .8); border-radius:calc(var(--u) * 1); letter-spacing:.06em; }
.c3 .scr{ display:none; flex:1; min-height:0; flex-direction:column; padding:calc(var(--u) * 1.2); gap:calc(var(--u) * 1.1); }
.c3[data-screen="pick"] .scr-pick,.c3[data-screen="sent"] .scr-sent,.c3[data-screen="again"] .scr-again{ display:flex; }
.c3 .igrid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:calc(var(--u) * 1.1); }
.c3 .tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u) * .3); min-width:0; padding:0; background:var(--kinari); border:calc(var(--u) * .45) solid var(--sumi); border-radius:calc(var(--u) * 1.1); box-shadow:0 calc(var(--u) * .5) 0 var(--sumi); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font:inherit; color:inherit; }
.c3 .tile img{ display:block; width:calc(var(--u) * 6.6); height:calc(var(--u) * 6.6); border-radius:50%; object-fit:cover; border:calc(var(--u) * .4) solid var(--shiro); outline:calc(var(--u) * .4) solid var(--rim); pointer-events:none; }
.c3 .tile b{ font:800 max(11px,calc(var(--u) * 2.1))/1 var(--f-sans); letter-spacing:.02em; pointer-events:none; }
.c3 .tile .pl{ position:absolute; right:calc(var(--u) * -.5); top:calc(var(--u) * -.6); display:grid; place-items:center; width:calc(var(--u) * 3); height:calc(var(--u) * 3); border-radius:50%; background:var(--yamabuki); border:calc(var(--u) * .35) solid var(--sumi); font:900 max(11px,calc(var(--u) * 2.2))/1 var(--f-sans); font-style:normal; pointer-events:none; }
.c3 .tile .pl::before{ content:"+"; }
.c3 .tile.on{ background:var(--yamabuki); }
.c3 .tile.on .pl{ background:var(--rokusho); color:var(--shiro); }
.c3 .tile.on .pl::before{ content:"✓"; }
.c3 .tile:active{ translate:0 calc(var(--u) * .35); }
.c3 .send,.c3 .putaway,.c3 .again{ position:relative; flex:none; display:grid; place-items:center; height:calc(var(--u) * 7); padding:0 calc(var(--u) * 1); background:var(--beni); color:var(--shiro); border:calc(var(--u) * .45) solid var(--sumi); border-radius:calc(var(--u) * 1.1); box-shadow:0 calc(var(--u) * .5) 0 var(--sumi); font:900 max(11px,calc(var(--u) * 2.5))/1 var(--f-sans); letter-spacing:.04em; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.c3 .send::after,.c3 .putaway::after,.c3 .again::after{ content:""; position:absolute; inset:calc(var(--u) * -1.2) calc(var(--u) * -1) calc(var(--u) * -1.4); }
.c3 .send[aria-disabled="true"]{ background:var(--nezumi); color:var(--sumi-usu); box-shadow:0 calc(var(--u) * .3) 0 var(--sumi); cursor:default; }
.c3 .send.is-target,.c3 .putaway.is-target,.c3 .again.is-target{ --sh:drop-shadow(0 0 0 transparent); }
.c3 .scr-sent,.c3 .scr-again{ align-items:center; justify-content:center; text-align:center; }
.c3 .okc{ display:grid; place-items:center; width:calc(var(--u) * 6.4); height:calc(var(--u) * 6.4); border-radius:50%; background:var(--rokusho); color:var(--shiro); border:calc(var(--u) * .45) solid var(--sumi); font:900 max(13px,calc(var(--u) * 3.6))/1 var(--f-sans); font-style:normal; }
.c3 .scr .big{ margin:0; font:400 max(13px,calc(var(--u) * 3.6))/1.05 var(--f-marquee); text-transform:uppercase; }
.c3 .scr .sm{ margin:0; font:600 max(11px,calc(var(--u) * 2.3))/1.3 var(--f-sans); color:var(--sumi-usu); }
.c3 .scr-sent .putaway,.c3 .scr-again .again{ align-self:stretch; margin-top:auto; }
.c3 .ipad.away .putaway{ display:none; }
/* the server's arm and the plates (clipped so they come out from under the kitchen's pass) */
.armwrap{ position:absolute; inset:0; z-index:5; pointer-events:none; clip-path:inset(calc(var(--u) * 10.5) 0 0 0); }
.c3 .arm{ display:none; transform-origin:0 calc(var(--u) * 4.5); filter:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(0,0,0,.45)); }
.c3 .arm.on{ display:block; }
.c3 .plate{ z-index:2; pointer-events:auto; border-radius:50%; --sh:drop-shadow(calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(0,0,0,.5)); filter:var(--sh); }
.c3 .plate .pr{ position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:var(--shiro); border:calc(var(--u) * .5) solid var(--sumi); }
.c3 .plate .pr::after{ content:""; position:absolute; inset:calc(var(--u) * 1); border-radius:50%; border:calc(var(--u) * .3) solid rgba(19,18,17,.16); pointer-events:none; }
.c3 .plate img{ display:block; width:76%; height:76%; border-radius:50%; object-fit:cover; border:calc(var(--u) * .4) solid var(--shiro); outline:calc(var(--u) * .4) solid var(--rim); pointer-events:none; transition:scale .6s steps(3,end),opacity .6s steps(3,end); }
.c3 .plate.eaten img{ scale:0; opacity:0; }
.c3 .plate.eaten{ pointer-events:none; }

/* ---------- 5 · a third kitchen ---------- */
.c5{ --sky:#CBD9DC; --gnd:#8F8A80; --hl:var(--yamabuki); --wall:#9DB09A; --flo:#B58A5A; }
.c5 .ground{ height:calc(var(--u) * 1.8 + var(--yoff)); }
.c5 .ground::after{ display:none; }
.note-chalk{ background:#1F2B26; color:var(--kinari); border:4px solid var(--sumi); outline:10px solid var(--hinoki); outline-offset:-1px; box-shadow:10px 10px 0 var(--sumi); rotate:calc(-.6deg - var(--tilt) * 1deg); }
.note-chalk .tag{ color:var(--yamabuki); }
.note-chalk .tag .no{ background:var(--yamabuki); }
.note-chalk h2{ color:var(--shiro); padding-bottom:10px; border-bottom:3px dotted var(--yamabuki); }
.note-chalk p{ color:var(--kinari); }
.note-chalk .job{ border-top-color:rgba(247,244,236,.5); }
.note-chalk .job .sl li{ color:var(--kinari); }
.note-chalk .job .sl li.cur{ color:var(--shiro); }
.note-chalk .job .sl li.done{ color:var(--shiro); }
.note-chalk .job .sl .st{ background:#1F2B26; border-color:var(--kinari); }
.note-chalk .job .sl li.cur .st{ background:var(--yamabuki); border-color:var(--yamabuki); box-shadow:2px 2px 0 var(--sumi); }
.note-chalk .job .sl li.done .st{ background:var(--shu); border-color:var(--shu); }
.note-chalk .job .now{ background:var(--sumi); outline:2px solid var(--yamabuki); outline-offset:-2px; }
.note-chalk .job .tools .btn:not(:disabled){ background:var(--kinari); }
/* the street: three shopfronts, two with queues */
.c5 .lit5{ opacity:0; transition:opacity .7s 1.6s; }
.c5[data-open="1"] .lit5{ opacity:1; }
.c5 .fname{ display:grid; place-items:center; background:var(--sumi); color:var(--shiro); font:400 max(11px,calc(var(--u) * 2.3))/1 var(--f-dot); letter-spacing:.04em; white-space:nowrap; pointer-events:none; }
.c5 .lamp5{ border-radius:50%; background:#B3122A; border:calc(var(--u) * .3) solid var(--sumi); transition:background .4s 1.4s; }
.c5 .lamp5.l2{ background:#6B665D; }
.c5[data-open="1"] .lamp5{ background:#3D8F74; }
.c5 .wk{ transition:translate 1.8s ease-in-out calc(var(--wi) * .22s),opacity .3s calc(1.9s + var(--wi) * .22s); }
.c5[data-open="1"] .wk{ translate:calc(var(--u) * var(--tx)) 0; opacity:0; }
/* the room: a cutaway of the old shop */
.c5 .room{ background-color:var(--wall); border:calc(var(--u) * .55) solid var(--sumi); box-shadow:calc(var(--u) * .7) calc(var(--u) * .7) 0 var(--sumi); transition:background-color .9s; pointer-events:none; }
.c5[data-open="1"] .room{ --wall:#F2E6C8; }
.c5 .room::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(var(--u) * 2.4); background:var(--kuri); border-bottom:calc(var(--u) * .4) solid var(--sumi); }
.c5 .room::after{ content:""; position:absolute; left:0; right:0; top:59%; bottom:0; background:repeating-linear-gradient(0deg,transparent 0 calc(var(--u) * 3.4),rgba(70,40,15,.22) calc(var(--u) * 3.4) calc(var(--u) * 3.7)),var(--flo); border-top:calc(var(--u) * .45) solid var(--sumi); }
.c5 .glow5{ background:radial-gradient(ellipse 60% 70% at 46% 34%,rgba(255,214,120,.55),rgba(255,214,120,0) 72%); opacity:0; transition:opacity 1s; pointer-events:none; }
.c5:is([data-lantern="1"],[data-open="1"]) .glow5{ opacity:.8; }
.c5 .oldsign,.c5 .newsign{ display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 1.4); border:calc(var(--u) * .55) solid var(--sumi); box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi); font:400 max(11px,calc(var(--u) * 2.9))/1 var(--f-marquee); letter-spacing:.03em; white-space:nowrap; transform-origin:50% 0; }
.c5 .oldsign{ background:var(--kuri); color:var(--kinari); outline:calc(var(--u) * .3) solid var(--hinoki); outline-offset:calc(var(--u) * -.9); z-index:3; transition:translate .8s cubic-bezier(.5,0,.9,.4),rotate .8s ease-in,opacity .6s ease-in .2s; }
.c5 .oldsign .chain,.c5 .newsign .chain{ top:calc(var(--u) * -2.6); height:calc(var(--u) * 2.6); }
.c5 .oldsign .lf{ font-size:max(11px,calc(var(--u) * 3)); }
.c5[data-shelves="3"] .oldsign{ translate:0 calc(var(--u) * 30); rotate:9deg; opacity:0; }
.c5 .newsign{ background:var(--sumi); color:var(--shiro); outline:calc(var(--u) * .35) solid var(--shu); outline-offset:calc(var(--u) * -.9); opacity:0; translate:0 calc(var(--u) * -3); transition:opacity .5s .5s,translate .6s cubic-bezier(.3,1.5,.5,1) .5s; z-index:3; }
.c5[data-open="1"] .newsign{ opacity:1; translate:0 0; box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi),0 0 calc(var(--u) * 5) calc(var(--u) * .6) rgba(255,198,26,.5); }
.c5 .newsign .sg-seal{ display:grid; place-items:center; width:calc(var(--u) * 4.4); height:calc(var(--u) * 4.4); border-radius:50%; background:var(--shu); color:var(--shiro); border:calc(var(--u) * .35) solid var(--shiro); font:800 calc(var(--u) * 2.6)/1 var(--f-mincho); }
.c5 .door5{ background:var(--kokutan); border:calc(var(--u) * .5) solid var(--sumi); border-bottom:0; pointer-events:none; }
.c5 .door5::after{ content:""; position:absolute; inset:calc(var(--u) * .9); background:#3a3632; transition:background .6s .8s; }
.c5[data-open="1"] .door5::after{ background:linear-gradient(#FFF4C4,#FFD24A); }
.c5 .noren5{ filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .5) 0 rgba(19,18,17,.55)); display:flex; justify-content:center; gap:calc(var(--u) * .25); padding-top:calc(var(--u) * 1); pointer-events:none; z-index:2; opacity:0; translate:0 calc(var(--u) * -2); transition:opacity .4s .8s,translate .5s .8s cubic-bezier(.3,1.4,.5,1); }
.c5[data-open="1"] .noren5{ opacity:1; translate:0 0; }
.c5 .noren5 .rod{ position:absolute; left:calc(var(--u) * -.8); right:calc(var(--u) * -.8); top:0; height:calc(var(--u) * 1.1); background:var(--sumi); border-radius:calc(var(--u) * .55); }
.c5 .noren5 .nr{ overflow:hidden; position:relative; display:block; flex:1; height:calc(var(--u) * 6.4); background:var(--beni); border:calc(var(--u) * .45) solid var(--sumi); border-top:0; }
.c5 .noren5 .nr b{ display:grid; place-items:center; height:100%; color:var(--shiro); font:800 calc(var(--u) * 3.6)/1 var(--f-mincho); }
.c5 .doorsign{ z-index:3; }
/* the old shelves: tap one and its jars hop into the crate */
.c5 .shelf{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(19,18,17,.6)); filter:var(--sh); transition:translate .55s ease-in,opacity .45s ease-in .1s; z-index:2; }
.c5 .shelf.gone{ translate:calc(var(--u) * var(--dx)) calc(var(--u) * -3); opacity:0; pointer-events:none; }
.c5 .shelf svg .jr{ transform-box:fill-box; }
.jfly{ position:absolute; width:calc(var(--u) * 3); height:calc(var(--u) * 4.6); border:calc(var(--u) * .3) solid var(--sumi); border-radius:calc(var(--u) * .6); z-index:9; pointer-events:none; }
.c5 .crate{ filter:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(19,18,17,.55)); z-index:3; }
.c5 .cj{ opacity:0; transition:opacity .3s .5s; }
.c5:is([data-shelves="1"],[data-shelves="2"],[data-shelves="3"]) .cj1,.c5:is([data-shelves="2"],[data-shelves="3"]) .cj2,.c5[data-shelves="3"] .cj3{ opacity:1; }
/* dust and the broom */
.c5 .dust{ background:#6F5F4A; border-radius:50%; rotate:calc(var(--r) * 1deg); opacity:.9; transition:opacity .3s,scale .3s; pointer-events:none; }
.c5 .dust.swept{ opacity:0; scale:.2; }
.c5 .broom{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 rgba(19,18,17,.55)); filter:var(--sh); cursor:grab; z-index:5; transform-origin:50% 100%; }
.c5 .broom .head{ position:absolute; left:calc(var(--u) * .6); right:calc(var(--u) * .6); bottom:0; height:calc(var(--u) * 7); pointer-events:none; }
.c5 .broom.is-dragging{ cursor:grabbing; }
.c5[data-swept="1"] .broom{ opacity:0; pointer-events:none; transition:opacity .5s .3s; }
/* the counter, its outline and the stools */
.c5 .outline5{ border:calc(var(--u) * .5) dashed rgba(247,244,236,0); border-radius:calc(var(--u) * .8); pointer-events:none; }
.c5[data-step="counter"] .outline5{ border-color:var(--shiro); background:rgba(19,18,17,.18); animation:markp 1.4s ease-in-out infinite; }
.c5 .counter5{ --sh:drop-shadow(calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(19,18,17,.6)); filter:var(--sh); cursor:grab; z-index:4; transition:opacity .5s .2s; }
.c5[data-swept="0"] .counter5{ opacity:0; pointer-events:none; }
.c5 .counter5.is-dragging{ cursor:grabbing; }
.c5 .stool{ scale:0; transform-origin:50% 100%; transition:scale .35s cubic-bezier(.3,1.7,.5,1) calc(var(--si) * .08s); z-index:5; pointer-events:none; }
.c5[data-counter="1"] .stool{ scale:1; }
.c5 .dn{ opacity:0; transition:opacity .3s calc(2.1s + var(--di) * .22s); z-index:6; }
.c5[data-open="1"] .dn{ opacity:1; }
/* the lantern and its hook */
.c5 .hook5{ opacity:0; transition:opacity .4s; }
.c5[data-counter="1"] .hook5{ opacity:1; }
.c5 .lantern5{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 rgba(19,18,17,.55)); filter:var(--sh); transform-origin:50% 0; cursor:grab; z-index:6; transition:opacity .5s .2s; }
.c5:not([data-counter="1"]) .lantern5{ opacity:0; pointer-events:none; }
.c5[data-lantern="1"] .lantern5{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 rgba(19,18,17,.55)) drop-shadow(0 0 calc(var(--u) * 2.4) rgba(255,176,66,.9)); animation:swing 3.8s ease-in-out infinite; }
@keyframes swing{ 0%,100%{ rotate:-4deg; } 50%{ rotate:4deg; } }
.c5 .lantern5.is-dragging{ cursor:grabbing; }
@media (max-width:900px), (max-aspect-ratio:11/10){
  .note-chalk{ outline-width:7px; box-shadow:6px 6px 0 var(--sumi); }
}
@media (prefers-reduced-motion:reduce){ .c5[data-lantern="1"] .lantern5,.c5[data-step="counter"] .outline5{ animation:none !important; } }
html.rm .c5[data-lantern="1"] .lantern5,html.rm .c5[data-step="counter"] .outline5{ animation:none !important; }

/* ---------- 6 · welcome in ---------- */
.c6{ --sky:#15110F; --gnd:#2B2826; --run:60vh; --hl:var(--yamabuki); }
@supports (height:100svh){ .c6{ --run:60svh; } }
.c6 .scene{ background:url("../img/paper.png"),var(--sky); background-blend-mode:multiply,normal; }
.c6 .ground{ border-top-color:#4A4540; }
.c6 .ground::after{ background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 9),rgba(255,255,255,.07) calc(var(--u) * 9) calc(var(--u) * 9.35)); }
.note-kanban{ background:var(--hinoki); border:4px solid var(--sumi); box-shadow:8px 8px 0 var(--sumi); rotate:calc(.8deg + var(--tilt) * 1deg); }
.note-kanban::before,.note-kanban::after{ content:""; position:absolute; top:-20px; width:12px; height:22px; background:var(--kuri); border:3px solid var(--sumi); }
.note-kanban::before{ left:22px; } .note-kanban::after{ right:22px; }
.note-kanban .live{ margin:0 0 10px; padding:8px 12px; background:var(--sumi); color:var(--yamabuki); font:400 clamp(13px,1.1vw,15px)/1.45 var(--f-dot); letter-spacing:.04em; }
.note-kanban .keep{ margin:0 0 12px; font:700 14px/1.4 var(--f-sans); }
.finbtns{ display:flex; flex-wrap:wrap; gap:12px; }
.doors{ list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dbtn{ display:grid; gap:5px; justify-items:center; align-content:center; min-height:62px; padding:9px 6px 8px; background:var(--beni); color:var(--shiro); border:3px solid var(--sumi); box-shadow:4px 4px 0 var(--sumi); text-decoration:none; text-align:center; transition:translate .12s,box-shadow .12s; }
.dbtn b{ font:900 14px/1.1 var(--f-sans); letter-spacing:.02em; }
.dbtn .dst{ font:400 12px/1 var(--f-dot); letter-spacing:.08em; padding:3px 6px; background:var(--sumi); color:var(--yamabuki); }
.dbtn .dst:empty{ display:none; }
.dbtn.is-open .dst{ background:var(--rokusho); color:var(--shiro); }
@media (hover:hover){ .dbtn:hover{ translate:-1px -1px; box-shadow:6px 6px 0 var(--sumi); } }
.dbtn:active{ translate:2px 2px; box-shadow:2px 2px 0 var(--sumi); }
.dbtn:focus-visible{ outline:3px solid var(--sumi); outline-offset:3px; }
/* the street at night: lit windows and lanterns mean the kitchen is open */
.c6 .lit6{ opacity:0; transition:opacity .7s; }
.c6[data-t1="open"] .k-t1,.c6[data-t2="open"] .k-t2,.c6[data-t3="open"] .k-t3{ opacity:1; }
.c6 .sn6{ display:grid; place-items:center; background:var(--sumi); color:var(--shiro); border:calc(var(--u) * .45) solid var(--sumi); outline:calc(var(--u) * .3) solid var(--shu); outline-offset:calc(var(--u) * -.8); font:400 max(11px,calc(var(--u) * 2.4))/1 var(--f-dot); letter-spacing:.05em; white-space:nowrap; opacity:.55; transition:opacity .6s; }
.c6 .shop6[data-open="1"] .sn6{ opacity:1; text-shadow:0 0 calc(var(--u) * 1.4) rgba(255,198,26,.9); }
.c6 .lan6{ filter:grayscale(.9) brightness(.5); transition:filter .6s; }
.c6 .shop6[data-open="1"] .lan6{ filter:drop-shadow(0 0 calc(var(--u) * 1.8) rgba(255,176,66,.95)); animation:swing 4s ease-in-out infinite; transform-origin:50% 0; }
.c6 .door6{ display:block; text-decoration:none; cursor:pointer; z-index:4; }
a.p::after{ content:""; position:absolute; inset:calc(var(--u) * var(--hit,.8) * -1); }
.c6 .door6 .nrw{ position:absolute; inset:0; display:flex; justify-content:center; gap:calc(var(--u) * .3); padding-top:calc(var(--u) * .9); filter:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .5) 0 rgba(0,0,0,.5)); pointer-events:none; }
.c6 .door6 .rod{ position:absolute; left:calc(var(--u) * -.6); right:calc(var(--u) * -.6); top:0; height:calc(var(--u) * 1); background:var(--hinoki); border:calc(var(--u) * .3) solid var(--sumi); border-radius:calc(var(--u) * .5); }
.c6 .door6 .nr{ position:relative; overflow:hidden; flex:1; height:calc(var(--u) * 8.6); background:var(--beni); border:calc(var(--u) * .4) solid var(--sumi); border-top:0; transform-origin:50% 0; transition:rotate .35s cubic-bezier(.3,1.3,.5,1),translate .35s cubic-bezier(.3,1.3,.5,1); }
.c6 .door6 .nm b{ display:grid; place-items:center; height:100%; color:var(--shiro); font:800 calc(var(--u) * 3.6)/1 var(--f-mincho); }
.c6 .door6 .nm{ transform-origin:50% 0; transition:translate .35s cubic-bezier(.3,1.3,.5,1),scale .35s; }
@media (hover:hover){
  .c6 .door6:hover .nl,.c6 .door6.parted .nl{ rotate:-24deg; translate:calc(var(--u) * -.6) 0; }
  .c6 .door6:hover .nrr,.c6 .door6.parted .nrr{ rotate:24deg; translate:calc(var(--u) * .6) 0; }
  .c6 .door6:hover .nm,.c6 .door6.parted .nm{ translate:0 calc(var(--u) * -1.3); scale:1 .85; }
}
.c6 .door6:focus-visible .nl,.c6 .door6.parted .nl{ rotate:-24deg; translate:calc(var(--u) * -.6) 0; }
.c6 .door6:focus-visible .nrr,.c6 .door6.parted .nrr{ rotate:24deg; translate:calc(var(--u) * .6) 0; }
.c6 .door6:focus-visible .nm,.c6 .door6.parted .nm{ translate:0 calc(var(--u) * -1.3); scale:1 .85; }
.c6 .door6:focus-visible{ outline:3px solid var(--yamabuki); outline-offset:calc(var(--u) * .6); }
.c6 .stf{ pointer-events:auto; --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 rgba(0,0,0,.6)); filter:var(--sh); cursor:pointer; z-index:3; transform-origin:50% 100%; }
.c6 .stf svg{ animation:bob 3.2s ease-in-out infinite; transform-origin:50% 100%; }
.c6 .stf2 svg,.c6 .stf1 svg{ animation-delay:-1.1s; }
@keyframes bob{ 0%,100%{ translate:0 0; rotate:-1.5deg; } 50%{ translate:0 -3%; rotate:1.5deg; } }
.c6 .bubble{ display:grid; place-items:center; background:var(--shiro); border:calc(var(--u) * .5) solid var(--sumi); border-radius:calc(var(--u) * 1.6); box-shadow:calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi); font:800 max(11px,calc(var(--u) * 2.4))/1 var(--f-mincho); letter-spacing:.02em; white-space:nowrap; opacity:0; scale:.7; transform-origin:20% 100%; transition:opacity .3s,scale .4s cubic-bezier(.3,1.6,.5,1); pointer-events:none; z-index:6; }
.c6 .bubble::after{ content:""; position:absolute; left:calc(var(--u) * 3.6); bottom:calc(var(--u) * -1.7); width:calc(var(--u) * 1.8); height:calc(var(--u) * 1.8); background:var(--shiro); border-right:calc(var(--u) * .5) solid var(--sumi); border-bottom:calc(var(--u) * .5) solid var(--sumi); rotate:45deg; }
.c6.hello .bubble{ opacity:1; scale:1; }
@media (max-width:900px), (max-aspect-ratio:11/10){
  .c6 .live{ display:none; }
  .note-kanban .keep{ margin-bottom:8px; font-size:13px; }
  .doors{ gap:8px; margin-bottom:8px; }
  .dbtn{ min-height:54px; padding:7px 4px 6px; box-shadow:3px 3px 0 var(--sumi); }
  .dbtn b{ font-size:13px; }
  .finbtns{ gap:10px; } .finbtns .btn{ padding:12px 14px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce){ .c6 .stf svg,.c6 .shop6[data-open="1"] .lan6{ animation:none !important; } }
html.rm .c6 .stf svg,html.rm .c6 .shop6[data-open="1"] .lan6{ animation:none !important; }

/* ---------- 4 · a second kitchen ---------- */
.c4{ --sky:#E5321B; --gnd:#CFA583; --hl:var(--yamabuki); --rb:.15; }
.c4 .scene{ background:linear-gradient(180deg,#E5321B 0 38%,#EC572D 38% 54%,#F4802F 54% 68%,#FFAA2A 68% 100%); }
.c4 .scene::after{ content:""; position:absolute; inset:0; background:url("../img/paper.png"); mix-blend-mode:multiply; pointer-events:none; }
.c4 .ground::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--u) * 4.6); background:repeating-linear-gradient(90deg,var(--shiro) 0 calc(var(--u) * 5),transparent calc(var(--u) * 5) calc(var(--u) * 10)) center calc(var(--u) * 2.1) / 100% calc(var(--u) * .5) no-repeat,var(--kokutan); border-top:calc(var(--u) * .55) solid var(--sumi); z-index:1; }
.note-notice{ background:var(--kinari); rotate:calc(.7deg + var(--tilt) * 1deg); padding-top:calc(clamp(14px,1.6vw,20px) + 38px); }
.note-notice::before,.note-notice::after{ content:""; position:absolute; top:-12px; width:64px; height:24px; background:rgba(30,58,106,.5); }
.note-notice::before{ left:-18px; rotate:-24deg; } .note-notice::after{ right:-18px; rotate:22deg; }
.note-notice .nhead{ position:absolute; left:-4px; right:-4px; top:-4px; height:40px; display:grid; place-items:center; background:var(--beni); color:var(--shiro); border:4px solid var(--sumi); font:800 22px/1 var(--f-mincho); letter-spacing:.5em; text-indent:.5em; }
/* the shop */
.c4 .lit2{ opacity:0; transition:opacity .5s; }
.c4[data-open="1"] .lit2{ opacity:1; }
.c4 .rsign{ display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 1.2); background:var(--sumi); color:var(--shiro); border:calc(var(--u) * .55) solid var(--sumi); outline:calc(var(--u) * .35) solid var(--shu); outline-offset:calc(var(--u) * -.8); box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--sumi); }
.c4 .rs-seal{ display:grid; place-items:center; width:calc(var(--u) * 4.4); height:calc(var(--u) * 4.4); border-radius:50%; background:var(--shu); border:calc(var(--u) * .35) solid var(--shiro); font:800 calc(var(--u) * 2.8)/1 var(--f-mincho); }
.c4 .rs-name{ font:400 calc(var(--u) * 3.2)/1 var(--f-marquee); letter-spacing:.03em; white-space:nowrap; opacity:.55; transition:opacity .5s; }
.c4[data-open="1"] .rs-name{ opacity:1; text-shadow:0 0 calc(var(--u) * 1.4) rgba(255,198,26,.9); }
.art .seal-t4{ font:800 3.4px var(--f-mincho); fill:var(--sumi); stroke:none; }
/* nobori flags: down at the foot of the pole until you pull them up */
.c4 .npole,.c4 .nbar{ background:var(--kokutan); border:calc(var(--u) * .25) solid var(--sumi); }
.c4 .nb{ --rise:0; transform-origin:50% 0; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; background:var(--beni); color:var(--shiro); border:calc(var(--u) * .5) solid var(--sumi); box-shadow:calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi); translate:0 calc((1 - var(--rise)) * var(--u) * 20); cursor:grab; }
.c4 .nbr{ background:var(--yamabuki); color:var(--sumi); }
.c4 .nb b{ font:400 calc(var(--u) * 3.1)/1.1 var(--f-pop); letter-spacing:.06em; }
.c4 .nb.up{ animation:flut 2.8s ease-in-out infinite; }
.c4 .nbr.up{ animation-delay:-1.2s; }
@keyframes flut{ 0%,100%{ transform:skewY(-2.5deg); } 50%{ transform:skewY(2.5deg); } }
.c4 .nb.is-dragging{ cursor:grabbing; }
/* flower stands: they arrive in front of the shop, small, and grow when you set them down */
.c4 .fstand{ --sh:drop-shadow(calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sumi)); filter:var(--sh); transform-origin:50% 100%; scale:.78; transition:scale .5s cubic-bezier(.3,1.6,.5,1); z-index:3; }
.c4 .fstand.placed{ scale:1; z-index:2; }
.c4 .mark{ border:calc(var(--u) * .5) dashed rgba(247,244,236,.0); border-radius:50%; background:rgba(19,18,17,.0); transition:background .3s,border-color .3s; pointer-events:none; }
.c4[data-step="flowers"] .mark:not(.used){ border-color:var(--shiro); background:rgba(19,18,17,.25); animation:markp 1.4s ease-in-out infinite; }
@keyframes markp{ 0%,100%{ border-color:rgba(247,244,236,.55); } 50%{ border-color:var(--yamabuki); } }
/* the ribbon: it shows once the flowers are out; the bow is what you pull */
.c4:not([data-stands="2"]) :is(.post,.rib,.bow){ opacity:0; pointer-events:none; }
.c4 :is(.post,.rib,.bow){ transition:opacity .45s; }
.c4 .rib{ filter:drop-shadow(calc(var(--u) * .3) calc(var(--u) * .4) 0 var(--sumi)); scale:var(--rb) 1; transition:opacity .45s,translate .7s cubic-bezier(.5,0,.8,.4),rotate .7s ease-in; }
.c4 .rl{ transform-origin:0% 50%; } .c4 .rr{ transform-origin:100% 50%; }
.c4 .rib svg{ width:100%; height:100%; }
.c4 .bow{ --sh:drop-shadow(calc(var(--u) * .3) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); cursor:grab; z-index:4; }
.c4 .bow i{ position:absolute; inset:0; border-radius:50%; background:var(--beni); border:calc(var(--u) * .4) solid var(--sumi); box-shadow:calc(var(--u) * -1.1) calc(var(--u) * 1.4) 0 calc(var(--u) * -.5) var(--shiro); pointer-events:none; }
.c4[data-cut="1"] .rl{ translate:calc(var(--u) * -3) calc(var(--u) * 14); rotate:32deg; opacity:0; }
.c4[data-cut="1"] .rr{ translate:calc(var(--u) * 3) calc(var(--u) * 14); rotate:-32deg; opacity:0; }
.c4[data-cut="1"] .bow{ opacity:0; pointer-events:none; translate:0 calc(var(--u) * 12); transition:opacity .5s,translate .7s ease-in; }
/* scissors: they appear when the ribbon is tied */
.c4 .scissors{ --sh:drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi)); filter:var(--sh); cursor:grab; z-index:5; transition:opacity .4s,scale .4s cubic-bezier(.3,1.5,.5,1); }
.c4:not([data-tied="1"]) .scissors{ opacity:0; scale:.7; pointer-events:none; }
.c4[data-cut="1"] .scissors{ opacity:0; pointer-events:none; }
.c4 .scissors.is-dragging{ cursor:grabbing; }
.c4 .scissors .bl{ transform-box:view-box; transform-origin:3.2px 2.8px; }
.c4 .scissors.snip .b1{ animation:snip1 .26s ease-in-out 2; } .c4 .scissors.snip .b2{ animation:snip2 .26s ease-in-out 2; }
@keyframes snip1{ 0%,100%{ rotate:0deg; } 50%{ rotate:-17deg; } } @keyframes snip2{ 0%,100%{ rotate:0deg; } 50%{ rotate:17deg; } }
.c4 .mat4{ background:repeating-linear-gradient(90deg,var(--beni) 0 calc(var(--u) * 2.4),var(--shiro) calc(var(--u) * 2.4) calc(var(--u) * 3)); border:calc(var(--u) * .45) solid var(--sumi); box-shadow:calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--sumi); border-radius:calc(var(--u) * .4); z-index:1; pointer-events:none; }
/* the guests arrive when the doors open */
.c4 .ppl{ opacity:0; translate:calc(var(--u) * 12) 0; transform-origin:50% 100%; transition:translate .9s ease-out calc(var(--qi) * .15s),opacity .25s calc(var(--qi) * .15s); }
.c4 .g1,.c4 .g2{ translate:calc(var(--u) * -12) 0; }
.c4 .g1{ --qi:0; } .c4 .g2{ --qi:1; } .c4 .g3{ --qi:1; } .c4 .g4{ --qi:2; } .c4 .g5{ --qi:3; }
.c4[data-open="1"] .ppl{ opacity:1; translate:0 0; }
@media (max-width:900px), (max-aspect-ratio:11/10){
  .chap .note.note-notice,.chap.flip .note.note-notice{ padding-top:52px; }
  .note-notice .nhead{ height:36px; font-size:19px; }
  @media (max-height:700px){ .chap .note.note-notice,.chap.flip .note.note-notice{ padding-top:46px; } }
}
@media (prefers-reduced-motion:reduce){ .c4 .nb.up,.c4 .mark{ animation:none !important; } }
html.rm .c4 .nb.up,html.rm .c4 .mark{ animation:none !important; }

/*@@CHAPTERS@@*/

/* ---------- the lane path ---------- */
.lanepath{ position:fixed; z-index:55; right:max(5px,env(safe-area-inset-right)); top:50%; translate:0 -44%; height:min(54vh,440px); width:30px; pointer-events:none; transition:opacity .35s; }
.lanepath.off{ opacity:0; }
.lanepath.off *{ pointer-events:none !important; }
.lanepath::before{ content:""; position:absolute; left:50%; top:15px; bottom:15px; width:4px; margin-left:-2px; background:var(--sumi); }
.lanepath ol{ list-style:none; margin:0; padding:0; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.lanepath a{ position:relative; display:grid; place-items:center; width:30px; height:30px; text-decoration:none; pointer-events:auto; }
.lanepath a i{ width:12px; height:12px; border-radius:50%; background:var(--shiro); border:3px solid var(--sumi); transition:transform .2s, background .2s; }
.lanepath a.stamped i{ background:var(--shu); border-color:var(--beni); }
.lanepath a.on i{ background:var(--yamabuki); transform:scale(1.4); }
.lanepath a.on.stamped i{ background:var(--shu); box-shadow:0 0 0 3px var(--yamabuki); }
.lanepath a span{ position:absolute; right:36px; top:50%; translate:8px -50%; background:var(--shiro); color:var(--sumi); border:3px solid var(--sumi); box-shadow:3px 3px 0 var(--sumi); font:900 11px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; padding:6px 8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, translate .2s; }
.lanepath a:hover span,.lanepath a:focus-visible span,.lanepath.drag span.cur{ opacity:1; translate:0 -50%; }
.lanepath a:focus-visible{ outline:3px solid var(--sumi); outline-offset:0; border-radius:50%; }
/* the lantern you can drag along the lane: unlit paper until the part it stands at is done, then lit */
.walker{ position:absolute; left:50%; top:0; width:24px; height:32px; margin-left:-12px; translate:0 calc(var(--wy,0) * 1px); border-radius:46% / 18%; border-top:4px solid var(--sumi); border-bottom:4px solid var(--sumi); display:grid; place-items:center; color:var(--sumi-usu); font:400 13px/1 var(--f-brush); cursor:grab; touch-action:none; pointer-events:auto; box-shadow:3px 3px 0 rgba(0,0,0,.3); background:repeating-linear-gradient(180deg,var(--kinari) 0 5px,#E3DAC6 5px 6px); transition:box-shadow .5s,color .5s; }
.walker.lit{ color:var(--sumi); box-shadow:0 0 12px 3px rgba(255,176,66,.7), 3px 3px 0 rgba(0,0,0,.3); background:radial-gradient(ellipse 70% 60% at 50% 55%,#FFF7CF 0%,#FFDA6B 30%,#FFA141 60%,var(--shu) 100%); }
.walker.is-dragging{ cursor:grabbing; }
.walker::after{ content:""; position:absolute; inset:-9px; }
@media (max-width:900px){
  .lanepath{ width:26px; height:min(44vh,330px); right:max(2px,env(safe-area-inset-right)); }
  .lanepath a{ width:26px; height:26px; } .lanepath a i{ width:10px; height:10px; border-width:2.5px; }
  .walker{ width:20px; height:27px; margin-left:-10px; font-size:11px; }
}

/* ---------- small, portrait and static layouts ---------- */
@media (max-width:900px), (max-aspect-ratio:11/10){
  .stage, .chap.flip .stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .stage > .scene{ grid-column:1; grid-row:1; container-type:size; }
  .stage > .note, .chap.flip .stage > .note{ grid-column:1; grid-row:2; width:auto; max-width:none; margin:0 calc(var(--gut) + 4px) calc(var(--pad) * .6) var(--pad); align-self:end; justify-self:stretch; }
  /* the scene zooms in on the part of the picture where you play (--vx, --vw: its left edge and width in box units, set per chapter
     below); what lies outside it is only scenery. The box still never grows past the scene's height. */
  .scene > *, .chap.flip .scene > *{ --noteW:0px; --gutS:var(--gut); --u:min(calc((100cqw - var(--gutS)) / var(--vw,100)),calc(100cqh / var(--vh,70))); --cx:calc(50% - var(--gutS) / 2 + (50 - var(--vx,0) - var(--vw,100) / 2) * var(--u)); --yoff:calc((100cqh - var(--u) * var(--vh,70)) * .4 - (70 - var(--vy,0) - var(--vh,70)) * var(--u)); }
  .c1{ --vx:12; --vw:80; } .c2{ --vx:8; --vw:86; } .c4{ --vx:4; --vw:92; }
  /* chapter 3 follows the work like a camera: the iPad fills the phone while you pick and send (and for "another round"); the view
     widens to put the iPad in its stand and for the plates coming out of the kitchen */
  .c3{ --vx:1; --vw:60; --vy:5; --vh:60; transition:--vx .7s cubic-bezier(.3,.8,.3,1),--vw .7s cubic-bezier(.3,.8,.3,1),--vy .7s cubic-bezier(.3,.8,.3,1),--vh .7s cubic-bezier(.3,.8,.3,1); }
  .c3[data-step="away"], .c3[data-step="eat"]{ --vx:0; --vw:100; --vy:0; --vh:70; }
  .note, .chap.flip .note{ padding:12px 14px 11px; box-shadow:5px 5px 0 var(--sumi); }
  .note h2{ font-size:clamp(22px,6.4vw,30px); margin-bottom:6px; }
  .note p{ font-size:14px; line-height:1.48; margin-bottom:6px; }
  .note .tag{ margin-bottom:7px; }
  .note.note-site{ padding-top:26px; }
  .job{ margin-top:6px; padding-top:8px; gap:8px 10px; }
  .job .sl{ gap:5px; }
  .job .sl .st{ width:20px; height:20px; border-width:2.5px; }
  .job .tools{ gap:8px; }
  .job .tools .btn{ padding:9px 12px; }
  .chap.complete .job .now{ padding:6px 10px; font-size:13px; }
  /* a finished card stays small so the picture keeps its size: the closing line says it is done, "Play again" is just ↺ */
  .chap.complete .job .sl{ display:none; }
  .job .reward .playagain{ padding-left:12px; padding-right:12px; }
  .job .reward .playagain .t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  @media (max-height:700px){ .note .tag{ display:none; } .note h2{ font-size:clamp(20px,5.6vw,26px); } .note p{ font-size:13.5px; line-height:1.42; } .chap.complete .job .now{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }
}
/* short laptop screens: the card is a little tighter so it never grows past the stage */
@media (min-width:901px) and (max-height:780px){
  .note .tag{ display:none; }
  .note h2{ font-size:clamp(24px,2.7vw,34px); margin-bottom:8px; }
  .note p{ font-size:15px; line-height:1.5; margin-bottom:8px; }
  .job{ margin-top:10px; padding-top:9px; }
  .note-site,.note-notice{ padding-top:calc(clamp(14px,1.6vw,20px) + 30px); }
}
@media (max-height:520px){ :root{ --hh:62px; } }
html.flat .chap,html:not(.js) .chap{ height:auto; }
html.flat .stage,html:not(.js) .stage{ container-type:normal; position:relative; top:auto; height:auto; display:block; padding:42px 0 30px; overflow:visible; }
html.flat .stage > .note,html.flat .chap.flip .stage > .note,html:not(.js) .stage > .note,html:not(.js) .chap.flip .stage > .note{ margin:0 auto; width:min(calc(100% - 2 * var(--pad)),620px); max-width:none; z-index:4; }
html.flat .stage > .scene,html:not(.js) .stage > .scene{ container-type:size; width:100%; max-width:960px; margin:30px auto 0; aspect-ratio:100/70; border:4px solid var(--sumi); }
html.flat .lanepath{ display:none; }
html.flat .scene > *,html:not(.js) .scene > *,html.flat .chap.flip .scene > *{ --noteW:0px; --gutS:0px; --cx:50%; --u:min(calc(100cqw / 100),calc(100cqh / 70)); --yoff:0px; }

/* ---------- the current page in the nav ---------- */
.nav a[aria-current="page"]{ border-color:var(--sumi); box-shadow:3px 3px 0 var(--beni); }
.tabbar a[aria-current="page"]{ background:var(--yamabuki); }
.tabbar a[aria-current="page"] b{ color:var(--sumi); }

@media (prefers-reduced-motion:reduce){ .cloud,.is-target,.hand,.hand *,.c2 .neko .paw,.c2 .garland .fl{ animation:none !important; } }
html.rm .cloud,html.rm .is-target,html.rm .hand,html.rm .hand *,html.rm .c2 .neko .paw,html.rm .c2 .garland .fl{ animation:none !important; }