/* Ten Sushi · Our story · the hero: the counter (game v5).
   A 3D sushi counter (three.js, drawn in the page's printed style) behind a paper-and-wood frame:
   wide screens: title and the "now" plate on the left, the counter in the middle, the menu board and the story button on the right.
   Everything else (tablets, phones, narrow windows): stacked, with the menu as a strip you can swipe. */
.ctr{ --cur:46px; --pad:clamp(16px,2.2vw,32px); --gapc:clamp(16px,2vw,28px); --menuW:clamp(228px,18vw,272px);
  position:relative; height:var(--stage-h); min-height:620px; background:var(--shiro) url("../img/paper.png"); border-bottom:4px solid var(--sumi);
  overflow:hidden; isolation:isolate; scroll-margin-top:var(--hh);
  display:grid; grid-template-columns:minmax(272px,25%) minmax(0,1fr) var(--menuW); grid-template-rows:calc(var(--cur) + 4px) minmax(0,1fr) auto;
  grid-template-areas:"cur cur cur" "left gap menu" "left gap story"; column-gap:var(--gapc); row-gap:14px; padding:0 var(--pad) 22px; }
.ctr [hidden]{ display:none !important; }
.ctr .sr-live,.ctr .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the kōhaku curtain across the top: opening-day red and white */
.ctr-curtain{ position:absolute; left:0; right:0; top:0; height:var(--cur); z-index:5; border-bottom:4px solid var(--sumi); pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.28),transparent 34%),repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 2px,transparent 2px 30px),repeating-linear-gradient(90deg,var(--shiro) 0 56px,var(--beni) 56px 112px); }
.ctr-curtain::before{ content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--sumi); }

/* the 3D view sits behind everything; only the counter's things take a press, the rest of the page scrolls as usual */
.ctr-view{ position:absolute; left:0; right:0; top:var(--cur); bottom:0; z-index:0; }
.ctr-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
/* the counter's free space is never taller than what shows between the sticky header and the tab bar (--stage-h), so a move can always
   be seen whole (a landscape phone used to put its bottom under the tab bar) */
.ctr-gap{ grid-area:gap; pointer-events:none; min-height:0; max-height:calc(var(--stage-h,100vh) - 24px); }
.ctr-view:focus-visible{ outline:3px solid var(--sumi); outline-offset:-7px; }
.ctr-boot{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.ctr-boot span{ font:400 13px/1 var(--f-dot); letter-spacing:.08em; background:var(--shiro); border:3px solid var(--sumi); padding:9px 12px; box-shadow:3px 3px 0 var(--sumi); }
.ctr.ready .ctr-boot{ display:none; }

/* ---------- left: the title and the "now" plate ---------- */
.ctr-head{ grid-area:left; align-self:start; z-index:2; margin-top:16px; max-width:460px; background:var(--shiro); border:3px solid var(--sumi); box-shadow:5px 5px 0 var(--sumi); padding:16px 18px 17px; }
.ctr-tag{ display:inline-flex; margin:0 0 12px; font:900 12px/1 var(--f-sans); letter-spacing:.14em; white-space:nowrap; text-transform:uppercase; border:3px solid var(--sumi); background:var(--shiro); box-shadow:2px 2px 0 var(--sumi); }
.ctr-tag b{ background:var(--sumi); color:var(--shiro); padding:7px 9px; }
.ctr-tag span{ padding:7px 10px; }
.ctr-head h1{ margin:0; font:400 clamp(32px,3.5vw,54px)/.98 var(--f-marquee); letter-spacing:-.01em; color:var(--beni); text-transform:uppercase; cursor:default; -webkit-user-select:none; user-select:none; touch-action:pan-y; }
.ctr-head h1 .ch{ display:inline-block; transform-origin:50% 100%; transform:translateY(var(--y,0px)) rotate(var(--r,0deg)); }
.ctr-lede{ margin:12px 0 0; font:500 15px/1.6 var(--f-sans); }
.ctr-lede strong{ font-weight:900; color:var(--beni); white-space:nowrap; }
.ctr-lede .less{ display:none; }

/* the now plate: an enamel sign with the step you are on */
.ctr-now{ grid-area:left; align-self:end; z-index:2; position:relative; background:var(--shiro); border:5px solid var(--beni); border-radius:10px;
  box-shadow:0 0 0 3px var(--shiro),0 0 0 6px var(--sumi),7px 7px 0 6px var(--sumi); padding:14px 16px 14px; margin:0 6px 6px; }
.ctr-now::before,.ctr-now::after{ content:""; position:absolute; top:6px; width:8px; height:8px; border-radius:50%; background:var(--sumi-usu); left:7px; }
.ctr-now::after{ left:auto; right:7px; }
.ctr-dish{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; font:400 13px/1.2 var(--f-dot); letter-spacing:.06em; color:var(--beni); }
.ctr-dish [lang="ja"]{ font:700 13px/1 var(--f-mincho); color:var(--sumi-usu); letter-spacing:.04em; }
.ctr-dots{ display:flex; gap:6px; list-style:none; margin:0 0 10px; padding:0; }
.ctr-dots li{ flex:1; height:8px; border:2px solid var(--sumi); background:var(--shiro); border-radius:1px; }
.ctr-dots li.done{ background:var(--beni); }
.ctr-dots li.on{ background:var(--yamabuki); }
.ctr-say{ margin:0; min-height:3.1em; }
.ctr-say b{ display:block; font:400 clamp(18px,1.5vw,22px)/1.15 var(--f-marquee); text-transform:none; letter-spacing:0; }
.ctr-say span{ display:block; margin-top:5px; font:500 14px/1.45 var(--f-sans); color:var(--sumi-usu); }
.ctr-say span.nudge{ color:var(--beni); font-weight:900; }
.ctr-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.ctr-tools .btn{ min-height:46px; }
/* the way into the story when the menu is done: big, yellow, first */
.ctr-doors{ font-size:15px; padding:15px 20px; box-shadow:5px 5px 0 var(--sumi); }
.ctr-doors span{ display:inline-block; margin-left:4px; animation:ctr-bob 1.8s ease-in-out infinite; }
.ctr-now[data-mode="loading"] .ctr-dots{ visibility:hidden; }
.ctr-now[data-mode="done"] .ctr-dish [lang="ja"]{ visibility:hidden; }
.ctr-done-k{ display:none; }
.ctr-now[data-mode="done"] .ctr-done-k{ display:inline-grid; place-items:center; position:absolute; right:-14px; top:-34px; width:62px; height:62px; border:4px solid var(--beni); border-radius:50%; background:var(--shiro);
  color:var(--beni); font:800 34px/1 var(--f-mincho); transform:rotate(-10deg); box-shadow:2px 2px 0 var(--sumi); animation:ctr-thud .55s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes ctr-thud{ from{ transform:rotate(-2deg) scale(2.4); opacity:0; } 60%{ opacity:1; } to{ transform:rotate(-10deg) scale(1); opacity:1; } }

/* ---------- right: the menu board (お品書き): twelve hinoki plaques on a dark board ---------- */
.ctr-menu{ grid-area:menu; z-index:2; min-height:0; margin-top:16px; display:flex; flex-direction:column; background:var(--kokutan); border:3px solid var(--sumi); box-shadow:5px 5px 0 var(--sumi); padding:10px 10px 11px; }
.ctr-menu-h{ margin:0 2px 8px; display:flex; align-items:center; gap:8px; color:var(--shiro); font:900 12px/1 var(--f-sans); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.ctr-menu-h [lang="ja"]{ font:800 15px/1 var(--f-mincho); letter-spacing:.04em; }
.ctr-menu-h b{ margin-left:auto; color:var(--yamabuki); font:400 13px/1 var(--f-dot); letter-spacing:.02em; }
.ctr-tags{ list-style:none; margin:0; padding:0; flex:1; min-height:0; display:grid; grid-template-rows:repeat(12,minmax(30px,1fr)); gap:4px; }
.ctr-tags li{ min-height:0; display:flex; }
.ctr-fuda{ flex:1; min-height:30px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; padding:2px 6px 2px 10px; text-align:left; cursor:pointer;
  background:var(--hinoki); color:var(--sumi); border:2px solid var(--sumi); border-radius:2px; box-shadow:2px 2px 0 rgba(0,0,0,.55); transition:transform .12s, box-shadow .12s, background .2s; position:relative; }
.ctr-fuda .tx{ min-width:0; }
.ctr-fuda .en{ display:block; font:900 12.5px/1.12 var(--f-sans); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctr-fuda .jp{ display:block; font:700 11px/1.12 var(--f-mincho); color:var(--kuri); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctr-mark{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:2px dashed rgba(19,18,17,.42); font:800 13px/1 var(--f-mincho); color:transparent; background:transparent; }
.ctr-fuda.made .ctr-mark{ border:2px solid var(--beni); background:var(--shiro); color:var(--beni); transform:rotate(-10deg); }
.ctr-fuda.made.fresh .ctr-mark{ animation:ctr-thud .55s cubic-bezier(.2,.9,.3,1.2) both; }
.ctr-fuda[aria-current="true"]{ background:var(--shiro); box-shadow:2px 2px 0 rgba(0,0,0,.55), inset 6px 0 0 var(--beni); }
@media (hover:hover){ .ctr-fuda:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(0,0,0,.6); } .ctr-fuda[aria-current="true"]:hover{ box-shadow:4px 4px 0 rgba(0,0,0,.6), inset 6px 0 0 var(--beni); } }
.ctr-fuda:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,.55); }
.ctr-menu :focus-visible{ outline:3px solid var(--yamabuki); outline-offset:2px; }

@media (max-height:900px){ .ctr-fuda .jp{ display:none; } }

/* ---------- the story button: big, crimson, always there ---------- */
.ctr-story{ grid-area:story; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:12px; padding:12px 16px; min-height:64px;
  background:var(--beni); color:var(--shiro); border:3px solid var(--sumi); border-radius:2px; box-shadow:5px 5px 0 var(--sumi); text-decoration:none; transition:transform .12s, box-shadow .12s, background .2s; }
.ctr-story .k{ font:800 15px/1 var(--f-mincho); writing-mode:vertical-rl; letter-spacing:.08em; padding:3px 6px 3px 0; border-right:2px solid rgba(247,244,236,.55); }
.ctr-story .t{ display:block; font:400 clamp(17px,1.35vw,20px)/1.08 var(--f-marquee); text-transform:uppercase; letter-spacing:0; }
.ctr-story .t small{ display:block; margin-top:5px; font:900 11px/1.2 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; opacity:.92; }
.ctr-story .a{ font:900 30px/1 var(--f-sans); animation:ctr-bob 1.8s ease-in-out infinite; }
@keyframes ctr-bob{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(4px); } }
@media (hover:hover){ .ctr-story:hover{ background:var(--shu); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--sumi); } }
.ctr-story:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--sumi); }
.ctr-story:focus-visible{ outline:3px solid var(--sumi); outline-offset:4px; }
.ctr.all .ctr-story{ background:var(--sumi); }

/* ---------- the demo hand ---------- */
.ctr-hand{ position:absolute; left:0; top:0; z-index:3; width:0; height:0; pointer-events:none; opacity:0; transform:translate(-200px,-200px); transition:opacity .2s; will-change:transform; --hs:1; }
.ctr-hand.on{ opacity:1; }
.ctr-hand svg{ position:absolute; left:calc(-13px * var(--hs)); top:calc(-4px * var(--hs)); width:calc(58px * var(--hs)); height:calc(66px * var(--hs)); overflow:visible; filter:drop-shadow(3px 3px 0 rgba(19,18,17,.85)); }
.ctr-hand .ring{ position:absolute; left:-17px; top:-17px; width:34px; height:34px; border:3px solid var(--beni); border-radius:50%; opacity:0; }
.ctr-hand.tap .ring{ animation:ctr-ring .45s ease-out; }
@keyframes ctr-ring{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(1.5); opacity:0; } }

/* ---------- the fallback (no WebGL, or three.js could not load) ---------- */
.ctr-fb{ grid-area:gap; align-self:center; justify-self:center; z-index:2; max-width:420px; margin:0; background:var(--shiro); border:3px solid var(--sumi); box-shadow:5px 5px 0 var(--sumi); padding:16px 18px; font:500 15px/1.6 var(--f-sans); }
.ctr-fb b{ display:block; font:400 20px/1.2 var(--f-marquee); color:var(--beni); margin-bottom:6px; }

/* the words a dish says when it is done, over the counter */
.ctr-pop{ position:absolute; z-index:3; left:0; top:0; pointer-events:none; font:800 26px/1 var(--f-mincho); color:var(--beni); background:var(--shiro); border:3px solid var(--sumi); padding:6px 10px 8px; box-shadow:3px 3px 0 var(--sumi); white-space:nowrap; opacity:0; }
.ctr-pop.on{ animation:ctr-pop 1.6s ease-out both; }
@keyframes ctr-pop{ 0%{ opacity:0; transform:translate(-50%,-40%) scale(.6); } 14%{ opacity:1; transform:translate(-50%,-100%) scale(1.06); } 22%{ transform:translate(-50%,-100%) scale(1); } 78%{ opacity:1; transform:translate(-50%,-110%); } 100%{ opacity:0; transform:translate(-50%,-130%); } }

/* ---------- stacked: tablets, phones and narrow windows ----------
   title, the counter, the now plate right under it, the menu strip in the thumb zone, the story button last */
@media (max-width:959px), (max-aspect-ratio:5/4){
  .ctr{ --cur:26px; grid-template-columns:minmax(0,1fr); grid-template-rows:calc(var(--cur) + 2px) auto minmax(0,1fr) auto auto auto; grid-template-areas:"cur" "head" "gap" "now" "menu" "story";
    row-gap:8px; padding:0 12px 12px; min-height:600px; }
  .ctr-curtain{ background:linear-gradient(rgba(0,0,0,.28),transparent 34%),repeating-linear-gradient(90deg,var(--shiro) 0 34px,var(--beni) 34px 68px); }
  .ctr-curtain::before{ height:6px; }
  .ctr-head{ grid-area:head; margin-top:8px; max-width:none; padding:10px 12px 11px; box-shadow:3px 3px 0 var(--sumi); }
  .ctr-tag{ margin-bottom:7px; font-size:11px; letter-spacing:.12em; }
  .ctr-tag b,.ctr-tag span{ padding:5px 8px; }
  .ctr-head h1{ font-size:clamp(24px,6.6vw,40px); }
  .ctr-lede{ margin-top:6px; font-size:13px; line-height:1.45; }
  .ctr-now{ grid-area:now; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"dish dots" "say tools"; column-gap:12px; row-gap:5px; align-items:center;
    margin:0 6px 6px; padding:9px 12px 10px; border-width:4px; }
  .ctr-now::before,.ctr-now::after{ top:4px; width:6px; height:6px; left:5px; }
  .ctr-now::after{ left:auto; right:5px; }
  .ctr-dish{ grid-area:dish; margin:0; min-width:0; }
  .ctr-dish [lang="ja"]{ display:none; }
  .ctr-dots{ grid-area:dots; margin:0; width:clamp(70px,24vw,130px); gap:4px; }
  .ctr-dots li{ height:7px; }
  .ctr-say{ grid-area:say; min-height:0; }
  .ctr-say b{ font-size:17px; }
  .ctr-say span{ font-size:13px; margin-top:2px; }
  .ctr-tools{ grid-area:tools; margin:0; flex-wrap:nowrap; gap:8px; align-self:end; }
  .ctr-tools .btn{ padding:11px 13px; font-size:12px; white-space:nowrap; }
  .ctr-tools .ctr-doors{ padding:13px 16px; font-size:14px; }
  .ctr-now[data-mode="done"]{ grid-template-areas:"dish dots" "say say" "tools tools"; }
  .ctr-now[data-mode="done"] .ctr-tools{ justify-self:start; }
  .ctr-now[data-mode="done"] .ctr-done-k{ width:48px; height:48px; font-size:26px; top:-22px; right:10px; }
  .ctr-menu{ grid-area:menu; margin-top:0; padding:6px 0 7px; box-shadow:3px 3px 0 var(--sumi); }
  .ctr-menu-h{ margin:0 10px 5px; font-size:11px; }
  .ctr-menu-h [lang="ja"]{ font-size:13px; }
  .ctr-tags{ display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:0 10px 3px; scrollbar-width:thin; }
  .ctr-tags li{ flex:0 0 auto; scroll-snap-align:start; }
  .ctr-fuda{ width:150px; min-height:44px; }
  .ctr-fuda .jp{ display:none; }
  .ctr-story{ grid-area:story; min-height:54px; padding:8px 14px; box-shadow:4px 4px 0 var(--sumi); margin-right:4px; }
  .ctr-story .t{ font-size:17px; }
  .ctr-story .t small{ margin-top:3px; }
  .ctr-hand{ --hs:.86; }
}
/* short phones: the hero may run a little past the screen, the counter keeps its room; the lede keeps its point and drops a clause */
@media (max-width:959px) and (max-height:760px), (max-aspect-ratio:5/4) and (max-height:760px){
  .ctr{ min-height:650px; }
  .ctr-lede{ font-size:12.5px; }
  .ctr-lede .more{ display:none; }
  .ctr-lede .less{ display:inline; }
  .ctr-menu-h{ display:none; }
  .ctr-menu{ padding-top:7px; }
  .ctr-story .k{ display:none; }
  .ctr-story{ grid-template-columns:minmax(0,1fr) auto; min-height:52px; }
}

/* portrait tablets: the story button stands beside the now plate, so the counter keeps more height */
@media (min-width:700px) and (max-aspect-ratio:5/4), (min-width:700px) and (max-width:959px){
  .ctr{ grid-template-columns:minmax(0,1fr) minmax(230px,32%); grid-template-rows:calc(var(--cur) + 2px) auto minmax(0,1fr) auto auto; grid-template-areas:"cur cur" "head head" "gap gap" "now story" "menu menu"; column-gap:14px; }
  .ctr-story{ align-self:stretch; margin:0 4px 6px 0; }
}

/* ---------- reduced motion: nothing bobs, stamps simply appear ---------- */
.rm .ctr-story .a,.rm .ctr-doors span,.rm .ctr-fuda.made.fresh .ctr-mark,.rm .ctr-now[data-mode="done"] .ctr-done-k{ animation:none; }
.rm .ctr-pop.on{ animation:none; opacity:1; transform:translate(-50%,-100%); }
@media (prefers-reduced-motion:reduce){ .ctr-story .a,.ctr-doors span,.ctr-fuda.made.fresh .ctr-mark,.ctr-now[data-mode="done"] .ctr-done-k{ animation:none; } }