:root{--or:#f7941d;--or2:#f15a24;--red:#d63a12;--grn:#8dc63f;--blk:#000;--ink:#fff;--mute:#bdbdbd}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{background:#000;color:#fff;font-family:"M PLUS 1p","Century Gothic",Arial,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased;line-height:1.35}
a{color:inherit;text-decoration:none}
.w{max-width:1080px;margin:0 auto;padding:0 18px}
/* top bar — their black site, white daruma logo */
.top{position:sticky;top:0;z-index:20;background:#000;border-bottom:3px solid var(--red)}
.top .w{display:flex;align-items:center;gap:12px;height:64px}
.top img{height:46px}
.top .nm{flex:1;line-height:1.05}
.top .nm b{display:block;font-size:20px;font-weight:900;letter-spacing:.02em}
.top .nm span{font-size:11px;color:var(--mute);font-weight:700;letter-spacing:.08em}
.top a.call{background:var(--red);font-weight:900;font-size:14px;padding:9px 14px;border-radius:999px}
/* hero — the EAT NOW! BE HAPPY flyer */
.hero{background:#d33a0d;background-image:radial-gradient(circle at 20% 30%,#e0561f 0 12%,transparent 13%),radial-gradient(circle at 80% 80%,#e0561f 0 10%,transparent 11%);padding:22px 0 26px}
.hero img{display:block;width:100%;max-width:820px;margin:0 auto}
.hero .w{text-align:center}
.hero p{font-size:17px;max-width:560px;margin:14px auto 18px;font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn{display:inline-block;font-weight:900;padding:13px 22px;border-radius:999px;margin:0 4px 8px;font-size:16px}
.btn.k{background:#000;color:#fff}.btn.w{background:#fff;color:#000}
.info{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid #000;border-bottom:3px solid #000}
.info div{padding:12px 10px;text-align:center;font-size:13px;border-right:1px solid #222}.info div:last-child{border:0}
.info small{display:block;color:var(--or);font-size:11px;letter-spacing:.12em;font-weight:900}
/* sticky board picker */
.tabs{position:sticky;top:67px;z-index:15;background:#000;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px max(18px,calc((100% - 1044px)/2));border-bottom:1px solid #222}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;background:var(--or2);color:#000;font-weight:900;font-size:15px;padding:6px 14px 5px;border-radius:6px;text-align:center;line-height:1.1}
.tabs small{display:block;font-size:10px;font-weight:800;color:#000;opacity:.75}
/* section titles, as on the boards: big japanese + bold english */
h2{font-size:clamp(30px,8vw,46px);font-weight:900;line-height:1;letter-spacing:-.01em}
h2 .jt{margin-right:6px}
.sub{color:#ddd;font-size:13px;margin-top:6px;font-weight:700}
/* black board */
.board{padding:40px 0 18px;border-bottom:1px solid #1d1d1d}
.board h2,.board .sub{text-align:center}
.bg{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px 26px;margin-top:24px}
.bi{display:grid;grid-template-columns:1fr 132px;gap:10px;align-items:stretch}
.bt{display:flex;flex-direction:column;min-width:0}
.tab{background:var(--or2);color:#000;font-weight:900;font-size:clamp(24px,7vw,30px);line-height:1.05;padding:5px 10px 4px;letter-spacing:.02em}
.tab.l{font-size:clamp(19px,5.4vw,24px)}.tab.xl{font-size:clamp(16px,4.4vw,20px)}
.tab.g{background:var(--grn)}
.ro{font-size:22px;font-weight:800;margin-top:4px;line-height:1.1}
.bt p{font-size:12px;font-weight:500;color:#e8e8e8;margin-top:3px;line-height:1.3}
.pr{margin-top:auto;padding-top:4px;font-size:30px;font-weight:900;text-align:right;line-height:1}
.ph img,.ph .nopic{width:132px;height:132px;object-fit:cover;border-radius:4px;display:block}
.nopic{background:#151515;color:#444;display:flex !important;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.bev{max-width:520px;margin:34px auto 10px}.bev h3{font-size:30px;font-weight:900;text-align:center;margin-bottom:12px}
.bl{display:flex;justify-content:space-between;font-size:19px;font-weight:800;padding:6px 0;border-bottom:1px dashed #333}.bl b{font-size:24px;font-weight:900}.bn{font-size:13px;color:#ddd;text-align:center;margin-top:12px}
/* orange sunburst specials board */
.burst{position:relative;overflow:hidden;padding:40px 0 0;color:#fff;background:var(--or);
  background-image:repeating-conic-gradient(from 0deg at 72% 18%,#f7a41d 0 7deg,#f58a1f 7deg 16deg)}
.burst h2,.burst .sub{text-align:center;text-shadow:0 3px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000}
.burst .sub{color:#fff}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px 20px;margin-top:26px;position:relative;z-index:1}
.sp{display:flex;align-items:center;gap:6px}
.circ{flex:none;width:118px;height:118px;border-radius:50%;border:6px solid #000;overflow:hidden;background:#222;display:flex;align-items:center;justify-content:center;color:#555;font-weight:900}
.circ img{width:100%;height:100%;object-fit:cover}
.st{min-width:0;text-shadow:0 2px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px 2px 0 #000}
.sj{font-size:21px;font-weight:900;line-height:1.1}
.sr{font-size:19px;font-weight:800;line-height:1.1}
.spr{font-size:42px;font-weight:900;line-height:1;margin-top:2px;text-shadow:0 3px 0 #000,3px 0 0 #000,-3px 0 0 #000,0 -3px 0 #000,3px 3px 0 #000,-3px 3px 0 #000}
.darumas{display:block;width:min(560px,92%);margin:14px 0 0 auto;position:relative}
/* assorted menu — their black list board with the logo */
.assorted{padding:40px 0 26px;border-bottom:1px solid #1d1d1d}
.ah{display:flex;align-items:center;gap:14px}
.ah img{height:84px}
.ah h2 .jt{display:block;font-size:15px;color:var(--or);margin:0 0 4px}
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 22px;margin-top:22px}
.li{display:flex;gap:12px;align-items:flex-start}
.li img,.li .nopic{width:104px;height:78px;object-fit:cover;flex:none;display:block}
.li b{display:block;font-size:15px;font-weight:900}.li i{display:block;font-style:normal;font-size:15px;font-weight:800}
.li small{display:block;font-size:11.5px;font-weight:500;color:#ddd;margin-top:2px}.li em{display:block;font-style:normal;font-size:17px;font-weight:900;margin-top:2px}
/* combo strip, like the bottom of the main board */
.combo{background:#111;border-top:1px solid #222;border-bottom:1px solid #222;padding:16px 0;text-align:center;font-size:14px}
.combo .vg{display:inline-block;width:16px;height:16px;background:var(--grn);vertical-align:-3px;margin-right:6px}
.revs{padding:44px 0}
.revs h2{font-size:32px;margin-bottom:18px}
.rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
blockquote{border:3px solid #fff;border-radius:16px;padding:16px 18px;font-size:16px;font-weight:700;position:relative}
cite{display:block;margin-top:8px;color:var(--or);font-style:normal;font-size:13px;font-weight:900}
.visit{background:#d33a0d;padding:40px 0 110px}
.visit .vg2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.visit h2{font-size:36px;margin-bottom:10px}
table{width:100%;border-collapse:collapse;font-size:15px}td{padding:8px 0;border-bottom:2px solid rgba(0,0,0,.25)}td:last-child{text-align:right}
iframe{width:100%;height:280px;border:4px solid #000;border-radius:14px;background:#000}
.foot{margin-top:22px;font-size:12px;opacity:.85}
.fab{position:fixed;left:14px;right:14px;bottom:14px;z-index:30;display:flex;gap:10px;transition:transform .3s,opacity .3s}
.fab.off{transform:translateY(130%);opacity:0;pointer-events:none}
.fab a{flex:1;text-align:center;font-weight:900;padding:14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5);border:3px solid #000}
.fab .c{background:var(--red)}.fab .m{background:#fff;color:#000}
@media(min-width:800px){.fab{left:auto;width:360px}.bi{grid-template-columns:1fr 150px}.ph img,.ph .nopic{width:150px;height:150px}}
/* phones: two dishes to a row (Ryan: "1 to a row is a pain in the ass to go through") — photo on top, then tab, name, price */
@media(max-width:639px){
.bg,.sg,.lg{grid-template-columns:1fr 1fr;gap:22px 12px}
.bi{grid-template-columns:1fr;gap:7px;align-content:start}
.bi .ph{order:-1}
.ph img,.ph .nopic{width:100%;height:auto;aspect-ratio:4/3}
.tab{font-size:clamp(17px,5.2vw,21px);padding:4px 7px 3px}.tab.l{font-size:clamp(14px,4.2vw,17px)}.tab.xl{font-size:clamp(12px,3.6vw,15px)}
.ro{font-size:16px}.bt p{font-size:11.5px}.pr{font-size:24px}
.sp{flex-direction:column;text-align:center;gap:6px}
.circ{width:min(132px,36vw);height:min(132px,36vw)}
.sj{font-size:16px}.sr{font-size:15px}.spr{font-size:34px}
.li{flex-direction:column;gap:6px}
.li img,.li .nopic{width:100%;height:auto;aspect-ratio:4/3}
}

/* page nav — their HOME • MENU • HISTORY • MAP • CONTACT US row with the white balls */
.pnav,.fnav,.lnav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-weight:900}
.pnav::-webkit-scrollbar{display:none}
.pnav{background:#000;padding:8px 14px 10px;font-size:14px;justify-content:flex-start}
@media(min-width:640px){.pnav{justify-content:center}}
.pnav a,.fnav a,.lnav a{flex:none;color:#aaa;letter-spacing:.04em}
.pnav a.on,.fnav a.on{color:#fff}
.pnav a:hover,.fnav a:hover,.lnav a:hover{color:#f00}
.ball{flex:none;width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block}
.tabs{top:104px}
html{scroll-padding-top:160px}
/* page titles — their red GIF titles, as type */
.ptitle{color:#f00;font-weight:900;font-size:clamp(34px,9vw,58px);letter-spacing:.01em;line-height:1;margin:34px 0 22px}
.page{padding-bottom:30px}
.page p.lead{font-size:16px;line-height:1.6;font-weight:700;max-width:640px;margin-bottom:14px}
.eat{font-size:clamp(30px,9vw,54px);font-weight:900;letter-spacing:.06em;margin:22px 0 6px}
.hist{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:800px){.hist{grid-template-columns:1.4fr 1fr}}
.hist img,.ct img{width:100%;max-width:360px;border-radius:6px;display:block}
.hmap{width:100%;max-width:440px;display:block;margin:4px 0 18px}
.page iframe{height:300px;border:3px solid #fff;margin-top:8px}
.btnr{display:inline-block;background:#f00;color:#fff;font-weight:900;padding:12px 20px;border-radius:999px;margin:6px 8px 0 0}
.btnw{display:inline-block;background:#fff;color:#000;font-weight:900;padding:12px 20px;border-radius:999px;margin:6px 8px 0 0}
.ct{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:800px){.ct{grid-template-columns:1fr 1fr}}
.ct dl dt{color:#f7941d;font-size:12px;letter-spacing:.14em;font-weight:900;margin-top:16px}
.ct dl dd{font-size:20px;font-weight:800;line-height:1.35}
.pf{border-top:1px solid #222;text-align:center;padding:26px 16px 34px;font-size:12px;color:#ddd}
.pf .fnav{flex-wrap:wrap;margin:16px 0 12px;font-size:14px}
.reg{color:#888;font-size:11px}
/* v3 tees — their two shirts from the old manpuku.ca History background (Upscayl 4x, cut apart), strewn down the page (Ryan, 19 Oct 2026) */
.tt{position:relative}
.page .tee{position:absolute;pointer-events:none;z-index:0;max-width:none;border-radius:0;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));animation:teefloat 6s ease-in-out infinite}
.page .t1{right:0;top:-14px;width:clamp(86px,22vw,170px);rotate:14deg}
.page .t2{right:0;bottom:-18px;width:clamp(96px,27vw,170px);rotate:-11deg;animation-delay:-2s}
.arch{position:relative}.page .t3{display:none}
.page .t4{right:-4px;bottom:-62px;width:clamp(72px,19vw,130px);rotate:9deg;animation-delay:-4s}
@media(min-width:800px){.page .t3{display:block;left:600px;top:40px;width:220px;rotate:-7deg;animation-delay:-3s}.page .t2{right:auto;left:440px;bottom:-30px}}
@keyframes teefloat{50%{margin-top:-6px}}
.tt .ptitle,.tt .eat,.tt .ph2{position:relative;z-index:1}
/* menu hero without the blurb line: even breathing room above the banner, between banner and buttons, and below (Ryan, 19 Oct 2026) */
.hero{padding:24px 0 16px}.hero img{margin:0 auto 20px}.hero .btn{margin:0 4px 8px}
/* combo card — their お得なセットメニュー made into a real offer (Ryan, 19 Oct 2026: "make the combo part more appealing") */
.cmb{padding:34px 0 30px;border-top:1px solid #1d1d1d}
.cmb-card{position:relative;max-width:620px;margin:0 auto;background:#000;border:4px solid var(--or2);border-radius:20px;padding:30px 18px 22px;text-align:center;
  box-shadow:0 0 0 4px #000,0 0 0 7px var(--or2),0 14px 40px rgba(241,90,36,.25)}
.cmb-tag{position:absolute;top:-17px;left:50%;translate:-50% 0;background:var(--or2);color:#000;font-weight:900;font-size:clamp(15px,4.4vw,19px);padding:5px 14px 4px;white-space:nowrap}
.cmb-h{font-size:clamp(30px,9vw,44px);margin-top:4px}
.cmb-sub{font-size:16px;color:#ddd;margin:8px 0 18px}.cmb-sub b{color:#fff}
.cmb-sides{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cmb-sides figure{margin:0}
.cmb-sides img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid #fff;display:block}
.cmb-sides figcaption{font-weight:900;font-size:15px;margin-top:6px;line-height:1.15}.cmb-sides small{display:block;font-size:11.5px;color:#bbb;font-weight:700}
.cmb-price{display:inline-flex;align-items:flex-start;margin:18px auto 4px;background:#f00;color:#fff;font-weight:900;font-size:clamp(46px,14vw,64px);line-height:1;
  padding:8px 22px 10px;border-radius:14px;rotate:-3deg;box-shadow:0 5px 0 #000,0 0 0 3px #fff}
.cmb-price span{font-size:.5em;margin:.12em .08em 0 0}
.cmb-how{font-size:13px;color:#aaa;margin-top:12px}
.vegnote{text-align:center;font-size:13px;color:#ddd;margin-top:22px}
.vegnote .vg{display:inline-block;width:14px;height:14px;background:var(--grn);vertical-align:-2px;margin-right:6px}
/* the page nav fits a phone width with nothing cut off (Ryan, 19 Oct 2026: the T in CONTACT was clipped) */
@media(max-width:639px){.pnav{justify-content:center;gap:clamp(4px,1.6vw,8px);padding:8px 6px 10px;font-size:clamp(10.5px,3.3vw,13.5px);letter-spacing:0}.pnav a{letter-spacing:.01em}.pnav .ball{width:6px;height:6px}}
/* v3 review screenshots — on History, their about page (Ryan, 19 Oct 2026: "take them out of the menu") */
.hrevs{padding:44px 0 0}
.revs .rg{display:block;columns:2 300px;column-gap:14px}
.rshot{break-inside:avoid;margin:0 0 14px;background:#fff;border-radius:12px;overflow:hidden;border:3px solid #fff}
.rshot img{width:100%;display:block}
.rshot figcaption{background:#fff;color:#000;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:2px 12px 8px}
/* v3 archive — a 2009 phone video of their takoyaki (Ryan, 19 Oct 2026: "include the date it was recorded, aug 19 2009") */
.arch{margin-top:44px}
.arch figure{max-width:560px}
.arch video{width:100%;aspect-ratio:4/3;display:block;border:3px solid #fff;border-radius:16px;background:#000}
.arch figcaption{margin-top:10px;font-size:15px;font-weight:700}.arch figcaption b{color:var(--or)}
.arch figcaption small{display:block;color:#888;font-size:12px;margin-top:3px}
/* v3 press — the clippings themselves, cropped from the Manpuku Media wall in Ryan's footage (Ryan, 19 Oct 2026: "just include the newspaper shots") */
.press{margin-top:44px}
.ph2{color:#f00;font-weight:900;font-size:clamp(28px,7vw,44px);margin-bottom:18px}.ph2 span{color:#fff}
.pg{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:800px){.pg{grid-template-columns:repeat(3,1fr)}}
.pg{align-items:start}
.pg figure{margin:0}.pg img{width:100%;display:block;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.pg figcaption{margin-top:8px;color:var(--or);font-size:12px;letter-spacing:.12em;font-weight:900;text-transform:uppercase}
/* landing — their minimalist home page: logo, name, address, hours, the ball nav. Nothing else. */
body.landing{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center}
/* v3: their own footage (Ryan, 19 Oct 2026) loops full-screen BEHIND the landing; a dark veil keeps the white type readable */
.reel{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.72),rgba(0,0,0,.5) 75%);pointer-events:none}
/* phones: the reel takes the top 2/3 and fades to black, so more of each shot shows (Ryan, 19 Oct 2026) */
@media(max-aspect-ratio:3/4){.reel{bottom:auto;height:68svh}.reel::after{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45) 66%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.82) 87%,#000)}}
body.landing .land{position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* the whole landing fits one screen with no scrolling (Ryan, 19 Oct 2026): sizes follow the visible height (svh) as well as the width */
body.landing{height:100svh;overflow:hidden}
.land{padding:2svh 20px;max-width:760px}
.land img{width:min(200px,46vw,24svh);display:block;margin:0 auto 2.6svh}
.land h1{font-size:clamp(20px,min(7.4vw,4.6svh),40px);font-weight:900;line-height:1.1;margin-bottom:1.8svh}
.land .ad{font-size:clamp(13px,min(4.2vw,2.4svh),18px);font-weight:800;line-height:1.4}
.land .ad a{border-bottom:2px solid #f00}
.land .hr{font-size:clamp(10.5px,min(3.2vw,1.75svh),12.5px);font-weight:800;margin:1.8svh 0 2.6svh;line-height:1.5;color:#eee}
.lnav{flex-wrap:wrap;gap:1.2svh 14px;font-size:clamp(15px,min(4.8vw,2.9svh),24px)}
.lnav a{color:#aaa}
.land .reg{margin-top:2.6svh}

/* pages show instantly when you switch (Ryan, 19 Oct 2026: the entrance animations made each page flash in blank) */
.land h1,.land .ad,.land .hr,.land .lnav,.land .reg,.hero img,.hero p,.hero .btn{animation:none!important}
.land img{animation:rock 5s ease-in-out 1.2s infinite!important}
/* ===== v2 motion ===== */
/* photos slide in from the right; clip so the page never pans sideways on a phone (clip, not hidden, keeps the sticky bars) */
html,body{overflow-x:clip}
/* daruma: drops in, then rocks and rights itself like the toy */
.land img{transform-origin:50% 92%;animation:drop .9s cubic-bezier(.3,1.4,.5,1) both,rock 5s ease-in-out 1.2s infinite}
.top img,.ah img{transform-origin:50% 92%;animation:rock 6s ease-in-out infinite}
.darumas{transform-origin:50% 100%;animation:rock 4.5s ease-in-out infinite}
@keyframes drop{from{opacity:0;translate:0 -80px;rotate:-20deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes rock{0%,62%,100%{rotate:0deg}70%{rotate:-9deg}78%{rotate:7deg}85%{rotate:-4deg}92%{rotate:2deg}}
/* landing: name, address and hours rise in after the logo */
.land h1{animation:rise .7s cubic-bezier(.2,.7,.2,1) .5s both}
.land .ad{animation:rise .7s ease .7s both}.land .hr{animation:rise .7s ease .85s both}
.land .lnav{animation:rise .7s ease 1s both}.land .reg{animation:fade 1s ease 1.4s both}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pnav a,.fnav a,.lnav a{transition:color .15s,translate .15s}
.pnav a:hover,.fnav a:hover,.lnav a:hover{translate:0 -2px}
/* the EAT NOW! BE HAPPY flyer stamps on; its dots drift */
.hero img{animation:stamp .75s cubic-bezier(.3,1.6,.5,1) .1s both}
@keyframes stamp{from{opacity:0;scale:1.5;rotate:-5deg}to{opacity:1;scale:1;rotate:0deg}}
.hero p{animation:rise .7s ease .55s both}.hero .btn{animation:rise .6s cubic-bezier(.3,1.5,.5,1) .7s both}.hero .btn.w{animation-delay:.82s}
.hero{animation:dots 9s ease-in-out infinite alternate}
@keyframes dots{to{background-position:30px -18px,-26px 14px}}
/* buttons: a light sweep, and they press in */
.btn,.btnr,.btnw,.fab a,.top a.call{position:relative;overflow:hidden;vertical-align:top;transition:translate .12s,scale .12s}
.btnr::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out 2s infinite}
@keyframes shine{0%,72%{left:-60%}100%{left:130%}}
.btn:active,.btnr:active,.btnw:active,.fab a:active,.top a.call:active{translate:0 2px;scale:.97}
/* sticky board picker follows the board you're on */
.tabs a{transition:background .25s,color .25s,scale .25s}
.tabs a.on{background:#fff;scale:1.06}
/* the specials sunburst slowly turns */
/* turn the burst's own angle instead of spinning a big square over it (the square's corners swung away on tall phone layouts
   and showed the flat orange underneath — Ryan, 19 Oct 2026). One 16deg step loops seamlessly. Without @property it just stays still. */
@property --ba{syntax:'<angle>';inherits:false;initial-value:0deg}
.burst{background-image:repeating-conic-gradient(from var(--ba) at 72% 18%,#f7a41d 0 7deg,#f58a1f 7deg 16deg);animation:burst 4s linear infinite}
@keyframes burst{to{--ba:16deg}}
/* scroll reveals (biriyani-house-v2 .rv recipe), staggered by --d */
.rv{opacity:0;translate:0 28px;transition:opacity .7s ease calc(var(--d,0)*.08s),translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--d,0)*.08s)}
.rv.in{opacity:1;translate:0 0}
/* board items: the name tab wipes on, the photo slides in tilted and settles, the price pops */
.bi.rv .tab{clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.6,0,.2,1) calc(var(--d,0)*.08s + .15s)}
.bi.rv.in .tab{clip-path:inset(0 0 0 0)}
.bi.rv .ph img,.bi.rv .ph .nopic{translate:30px 0;rotate:6deg;opacity:0;transition:translate .7s cubic-bezier(.3,1.3,.5,1) calc(var(--d,0)*.08s + .2s),rotate .7s ease calc(var(--d,0)*.08s + .2s),opacity .5s ease calc(var(--d,0)*.08s + .2s)}
.bi.rv.in .ph img,.bi.rv.in .ph .nopic{translate:0 0;rotate:0deg;opacity:1}
.bi.rv .pr,.sp.rv .spr,.li.rv em{display:block;scale:0;transform-origin:right center}
.sp.rv .spr,.li.rv em{transform-origin:left center}
@media(max-width:639px){.sp.rv .spr{transform-origin:center}}
.bi.rv.in .pr,.sp.rv.in .spr,.li.rv.in em{animation:pop .6s cubic-bezier(.3,1.8,.5,1) calc(var(--d,0)*.08s + .55s) forwards}
@keyframes pop{0%{scale:0;rotate:-14deg}65%{scale:1.25;rotate:4deg}100%{scale:1;rotate:0deg}}
.ph img{transition:scale .25s}.bi:hover .ph img{scale:1.05}
/* specials: round plates spin in like they're being set down; tap one and it turns */
.sp.rv .circ{rotate:-160deg;scale:.4;transition:rotate 1s cubic-bezier(.2,.8,.2,1) calc(var(--d,0)*.08s + .1s),scale .8s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0)*.08s + .1s)}
.sp.rv.in .circ{rotate:0deg;scale:1}
.sp.spin .circ{animation:spin 1s cubic-bezier(.2,.8,.2,1)}
@keyframes spin{to{rotate:360deg}}
/* section titles: the Japanese drops in */
h2.rv .jt{display:inline-block;translate:0 -30px;opacity:0;transition:translate .6s cubic-bezier(.3,1.6,.5,1) .15s,opacity .4s ease .15s}
h2.rv.in .jt{translate:0 0;opacity:1}
/* page titles drop in letter by letter */
.ptitle .ch{display:inline-block;animation:chdrop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*.04s + .1s)}
@keyframes chdrop{from{opacity:0;translate:0 -40px;rotate:-12deg}to{opacity:1;translate:0 0;rotate:0deg}}
/* EAT · DRINK · ENJOY pops word by word, once (Ryan: the pulse was too much) */
.eat .wd{display:inline-block}.eat.rv .wd{scale:0}
.eat.rv.in .wd{animation:pop .6s cubic-bezier(.3,1.8,.5,1) calc(var(--i)*.28s) forwards}
/* their hand-drawn map draws itself in */
.hmap.rv{clip-path:inset(0 100% 0 0);opacity:1;translate:none;transition:clip-path 1.6s cubic-bezier(.6,0,.3,1) .2s}
.hmap.rv.in{clip-path:inset(0 0 0 0)}
/* photos on history/contact tilt in */
.hist img.rv,.ct img.rv{rotate:-4deg;transition:opacity .8s ease,translate .8s ease,rotate 1s cubic-bezier(.3,1.4,.5,1)}
.hist img.rv.in,.ct img.rv.in{rotate:0deg}
/* review bubbles bob */
blockquote.rv.in{animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--d,0)*.7s + 1s)}
@keyframes bob{50%{translate:0 -5px}}
/* live open-now dot */
.live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grn);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 rgba(141,198,63,.7);animation:ping 1.8s infinite}
.live.off{background:#666;animation:none}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(141,198,63,0)}100%{box-shadow:0 0 0 0 rgba(141,198,63,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.rv *,.ptitle .ch,.eat .wd{opacity:1!important;translate:none!important;rotate:none!important;scale:none!important;clip-path:none!important}}

/* ===== pickup ordering ===== */
.ph,.circ,.li{position:relative}
.circ{overflow:visible}.circ img{border-radius:50%}
.add{position:absolute;right:6px;bottom:6px;z-index:3;width:38px;height:38px;border-radius:50%;border:3px solid #000;background:#f00;color:#fff;
  font:900 24px/1 "M PLUS 1p",sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 0 #000;padding:0 0 2px;transition:scale .15s}
.add:active{scale:.88}
.add.has{background:var(--or);color:#000;font-size:18px;padding:0}
.add.bump{animation:bump .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{scale:1.35}}
.sp .add{right:-4px;bottom:-4px}
.li .add{left:calc(min(104px,100%) - 40px);right:auto;top:42px;bottom:auto;width:32px;height:32px;font-size:20px}
@media(max-width:639px){.li .add{left:auto;right:6px;top:calc((100vw - 48px)/2*.75 - 40px)}}
.bl{align-items:center;gap:10px}.bl b{margin-left:auto}.bl .add{position:static;width:30px;height:30px;font-size:19px;flex:none}
.fab.hide{display:none}
/* cart bar */
.cbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:12px;background:#f00;color:#fff;border:3px solid #000;
  border-radius:999px;padding:12px 18px;font-weight:900;font-size:16px;box-shadow:0 8px 24px rgba(0,0,0,.55);cursor:pointer;translate:0 140%;transition:translate .35s cubic-bezier(.3,1.3,.5,1)}
.cbar.on{translate:0 0}
.cbar .ct{background:#000;border-radius:999px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:15px}
.cbar .tt{margin-left:auto}
.cbar.bump{animation:cb .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes cb{40%{scale:1.05}}
@media(min-width:800px){.cbar{left:auto;width:380px}}
/* order sheet */
.osh{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.osh.on{opacity:1;pointer-events:auto}
.opan{position:absolute;left:0;right:0;bottom:0;max-height:92svh;overflow:auto;background:#000;border-top:4px solid #f00;border-radius:18px 18px 0 0;
  padding:18px 18px 26px;translate:0 100%;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.osh.on .opan{translate:0 0}
@media(min-width:800px){.opan{left:auto;right:20px;bottom:20px;width:440px;border:4px solid #f00;border-radius:18px}}
.opan h3{font-size:26px;font-weight:900;display:flex;align-items:center;gap:8px}.opan h3 small{font-size:13px;color:var(--or)}
.opan .x{margin-left:auto;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.ol{margin:12px 0 6px}
.oi{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed #333}
.oi .nm{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:1.2}.oi .nm i{display:block;font-style:normal;font-size:12px;color:var(--or)}
.oi .q{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900}
.oi .q button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#000;color:#fff;font:900 18px/1 sans-serif;cursor:pointer}
.oi .lt{width:62px;text-align:right;font-weight:900;font-size:16px}
.tot{font-size:14px;margin:8px 0 14px}.tot div{display:flex;justify-content:space-between;padding:3px 0}.tot .g{font-size:22px;font-weight:900;border-top:2px solid #fff;margin-top:6px;padding-top:8px}
.opan label{display:block;font-size:11px;letter-spacing:.12em;color:var(--or);font-weight:900;margin:12px 0 5px}
.opan input,.opan select,.opan textarea{width:100%;background:#111;color:#fff;border:2px solid #333;border-radius:10px;padding:12px;font:700 16px "M PLUS 1p",sans-serif}
.opan input:focus,.opan select:focus,.opan textarea:focus{outline:0;border-color:var(--or)}
.opan .bad{border-color:#f00}
.place{display:block;width:100%;margin-top:18px;background:#f00;color:#fff;border:3px solid #fff;border-radius:999px;padding:15px;font:900 18px "M PLUS 1p",sans-serif;cursor:pointer}
.pay{text-align:center;font-size:12px;color:#aaa;margin-top:8px}
.done{text-align:center;padding:10px 0}
.done .big{font-size:40px;font-weight:900;color:#f00;line-height:1;animation:pop .6s cubic-bezier(.3,1.8,.5,1) both}
.done .no{display:inline-block;background:var(--or);color:#000;font-weight:900;font-size:20px;padding:6px 14px;border-radius:8px;margin:12px 0 6px}
.done p{font-size:15px;line-height:1.5;margin-top:8px}
/* combo upsell at checkout — their own お得なセットメニュー (Ryan, 19 Oct 2026) */
.up .lead{font-size:15px;line-height:1.45;margin:8px 0 14px;color:#ddd}.up .lead b{color:#fff}
.up .price{display:inline-block;background:var(--or);color:#000;font-weight:900;font-size:22px;padding:4px 12px;border-radius:8px;margin-top:4px}
.chips{display:grid;gap:10px}
.chip{display:flex;align-items:center;gap:12px;width:100%;background:#111;color:#fff;border:2px solid #333;border-radius:12px;padding:10px 12px 10px 14px;font:800 16px "M PLUS 1p",sans-serif;text-align:left}
.chip .q{display:flex;align-items:center;gap:10px}.chip .q button{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#000;color:#fff;font:900 20px/1 sans-serif;cursor:pointer}.chip .q button:disabled{opacity:.3;cursor:default}
.chip i{font-style:normal;font-size:12px;color:var(--or);display:block}
.chip .n{min-width:18px;text-align:center;font-weight:900;font-size:17px}
.chip.on{border-color:var(--or)}.chip.on .n{color:var(--or)}
.picked{font-size:13px;color:#aaa;margin:10px 0 0;min-height:18px}.place:disabled{opacity:.4;cursor:default}
.skip{display:block;width:100%;background:none;border:0;color:#aaa;font:800 14px "M PLUS 1p",sans-serif;margin-top:12px;cursor:pointer;text-decoration:underline}
.demo{font-size:11.5px;color:#888;margin-top:14px}